El Aula Virtual de EducaMadrid nos permite, entre sus variadas opciones, insertar y editar tablas en HTML, para que se vean mejor en las actividades y que al estudiante le llame mas la atencion.

En en presente post te vamos a explicar como editar tablas en HTML.

Como editar tablas en HTML

Para editar tablas en HTML debemos seguir los siguientes pasos:

1. Lo primero que debemos hacer es ubicarnos en la actividad en la que vamos a Insertar la tabla. En este paso a paso vamos a utilizar las Preguntas de una prueba.

2. A continuación elegiremos el tipo de pregunta que deseamos agregar. En este caso lo haremos con Encuentra la palabra perdida. Posteriormente le damos clic al botón Agregar.

3. Seguidamente, le desplegaremos los botones avanzados dando clic al botón ubicado en la parte superior derecha, y luego que se desplieguen los mismos le damos clic al botón Insertar Tabla.

4. Posteriormente se desplegará una ventana en la cual debemos definir el numero de filas y columnas, y luego de esto le damos clic al botón Crear tabla. 

5. A continuación procedemos a diseñar nuestra tabla. Lo primero que debemos hacer es borrar la celda del encabezado luego escribir los datos en la tabla.

6. Para editar la tabla en HTML debemos dirigirnos al icono de HTML y darle clic.

7. Ahora podemos visualizar el código HTML y podemos editarlo. Lo primero que haremos aquí es borrar el siguiente código: scope=»col». Esto no afectará la estructura de la tabla y se debe hacer en todas las líneas de código que lo contengan.

8. Posteriormente procedemos a colocarle borde a las celdas. Para ello debemos agregar el siguiente código justo a la derecha de th así: <th style=»border:color ancho del borde px solid;»>. En este ejemplo usaremos el borde de color verde y de 3 pixeles de acho de borde, por lo que el código debe quedar así: <th style=»border:green 3px solid;»>

Si volvemos a ver la tabla, podemos ver que el borde de la celda de «extremidades» se ha puesto de color verde.

9. Ahora, si queremos además del borde, agregarle márgenes interiores a lo bordes, al código anteriormente mencionado debemos agregarle lo siguiente: padding:margen. Supongamos que queremos un margen interior de 10px. El código nos debe quedar asi: <th style=»border:green 3px solid; padding:10px»>

 

Si volvemos a revisar como nos ha quedado la tabla, debemos ver que los márgenes ya se han aplicado.

10. Ahora, para aplicarlo en toda la tabla, solamente tenemos que copiar y pegar el código que hemos agregado, en todas las líneas de código que corresponden a las celdas, excepto en la primera ya que, en este caso, es la celda en blanco.

Ahora, volvemos a la versión normal y podemos ver la tabla completamente editada, con los bordes y márgenes interiores que le aplicamos.

Esto aplica para todas las preguntas. Ahora puedes editar las tablas a tu gusto con los códigos que aquí te hemos mencionado.