Crear una tabla en HTML

Quizás hayas visto en los artículos de otros bloggers tablas mostrando datos y hayas pensado como añadir una en tu blog. Aquí tienes  instrucciones para hacerlo paso a paso de forma sencilla. La solución es aprender un poco más de HTML, ya que es con este lenguaje con el que vas a poder crear una tabla. Si empiezas desde cero, estaría bien que leyeras que es una etiqueta. Y con ese conocimiento mínimo vamos a construir el código HTML de una tabla muy sencilla con bordes negros. Más adelante escribiré de las opciones que existen para configurar las celdas a voluntad, fundir dos espacios en uno o cambiar el formato de los bordes.

Lo primero es saber que las tablas en HTML se organizan en filas, y las filas en celdas. Importante! No se organizan por columnas, por lo que tendremos tres códigos diferentes de apertura y cierre. El primero nos indica que empieza la tabla ( <table> <tbody>) y que termina la tabla ( </table> </tbody> ). El segundo código no señala el principio de una fila ( <tr> ) y su final ( </tr> ). Y el tercero concreta la cantidad de celdas que tenemos en cada fila, y también tiene una etiqueta de apertura ( <td> ) y cierre ( </td> ). Así que de forma jerarquica las celdas las tendremos dentro de las filas y las filas dentro de las celdas. Si queremos crear una tabla de una fila y tres celdas, este sería el código HTML que necesitamos.

<table border="1"> <tbody>

<tr> <td> Texto 1 </td> <td> Texto 2 </td> <td> Texto 3 </td> </tr>

</tbody> </table>

El resultado es el siguiente.

Texto 1;

Texto 2

Texto 3

Si eres observador te habrás fijado en un par de cosas: Que el texto se escribe, siempre dentro de las celdas. Que la etiqueta table tiene una característica, el grosor del borde de los marcos. Si no añades esta característica no tendrá bordes visible, por lo que te puede servir para distribuir elementos dentro del post de Blogger. Otra cosa importante es que hay que ser muy cuidadoso en la colocación de las etiquetas para cerrarlas justo en el orden inverso, a como las hemos abierto. Si queremos que la tabla sea de 3 x 3 sólo hemos de triplicar la línea. El código sería este.

<table border="1"> <tbody>

<tr> <td> Texto 1 </td> <td> Texto 2 </td> <td> Texto 3 </td> </tr>

<tr> <td> Texto 1 </td> <td> Texto 2 </td> <td> Texto 3 </td> </tr>

<tr> <td> Texto 1 </td> <td> Texto 2 </td> <td> Texto 3 </td> </tr>

</tbody> </table>

Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3

Si queremos que la tabla tenga más celdas por línea, hay añadirlas de forma manual, una por una. De esta forma puedes crear tablas con la cantidad de recuadros que desees. Aquí puedes ver el resultado con tres líneas y seis celdas. Bueno, hay un vacío en la última línea, es porque nos hemos olvidado de escribir la cuarta celda de la última fila y los ordenadores hacen lo que les decimos al pie de la letra.

Texto 1	Texto 2	Texto 3	Texto 4	Texto 5	Texto 6
Texto 1	Texto 2	Texto 3	Texto 4	Texto 5	Texto 6
Texto 1	Texto 2	Texto 3	Texto 5	Texto 6

Con esto tienes conocimientos suficientes para empezar a crear tu primera tabla e ir jugando con la cantidad de filas y columnas que quieres crear. Y recuerda que estos códigos debes escribirlos en Blogger en la edición de HTML para que funcionen, sino sólo serán letras.

Imagen: en dominio público. Autor: Joan Tapia.