Vamos a dedicar una serie de artículos a explicar cómo construir tablas en HTML, elementos imprescindibles para presentar datos estructurados. Las tablas tienen cierta relevancia histórica, pues se abusaba de ellas para diseñar la estructura de la propia página en sí. La primera edición de «El Club del Autodidacta», hace más de quince años, empleaba las tablas como principal elemento de diseño.
Hoy día ya no es necesario recurrir a ellas para mostrar una página perfectamente seccionada. La versión actual de «El Club del Autodidacta», como la gran mayoría de las páginas actuales, consigue diseños infinitamente mejores empleando una tecnología sencilla de la que hablaremos largo y tendido en este blog: CSS, las hojas de estilo «en cascada».
Pero, aún así, para presentar un conjunto de datos en formato tabular, las tablas HTML siguen siendo la mejor opción. Voy a mostrarte cómo generarlas.
Comienza echando un vistazo a esta página, en la que se muestra una tabla de dos filas por tres columnas presentada con tres tipos de borde diferentes.
El primer paso para crear una tabla es delimitarla en HTML con el par de etiquetas <table> ... </table>.
<table>
...
</table>Una vez definido el contenedor global nos aproximaremos a su contenido pensando en filas. Emplearemos las etiquetas <tr> ... </tr> (de table row, fila de tabla), para delimitar cada fila. En el ejemplo tenemos dos filas, por los que nos encontraremos dos pares de etiquetas <tr>:
<table>
<tr>
...
</tr>
<tr>
...
</tr>
</table>Entre medias, en el espacio definido por los puntos suspensivos, introduciremos los datos de cada fila propiamente dichos, delimitando cada columna por el par de etiquetas <td> ... </td> (de table data, datos de la tabla).
Observa la tabla completa:
<table>
<tr>
<td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
<td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>Este código se corresponde a la primera de las tres tablas del ejemplo, que aparece sin bordes. Si deseamos enmarcarlas podemos recurrir al atributo border, asignándole un valor que hará referencia al grosor del marco. Fíjate cómo he cambiado la etiqueta <table> con el nuevo atributo.
<table border="1">
<tr>
<td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
<td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>La segunda tabla del ejemplo se corresponde con el código anterior. Incrementando el valor del atributo border aumentamos, a su vez, su grosor. El tercer ejemplo emplea <table border="5">.
Cuando empecemos con las hojas de estilo veremos maneras mucho más potentes de jugar con el diseño de la tabla. Esta ha sido la evolución general del HTML: se ha ido separando el contenido del diseño y, aunque muchas etiquetas aún mantienen atributos que afectan su aspecto, por lo general, se suele recurrir a las hojas de estilo para todas las consideraciones de diseño.
En el próximo artículo le daremos una pequeña vuelta al concepto de tabla y aprenderemos a crear encabezados que identifiquen las filas o columnas.
Javier Montero
El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)
El Club del Autodidacta