En el artículo anterior vimos el procedimiento básico para crear tablas en HTML. Hoy voy a explicarte cómo mejorar la presentación definiendo encabezados que sirvan de títulos a las filas o columnas.
Abre la página de ejemplo y déjala a la vista en una ventana o pestaña aparte, pues acudiremos a ella continuamente.
La Tabla 1 ya la conoces. Es una simple matriz de datos de dos filas por tres columnas que nos servirá como conejillo de indias y sobre la que realizaremos todo tipo de perversiones.
Recordemos su código:
Tabla 1
<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>Vimos que el método para crearla era aproximarnos a ella fila a fila, cada una contenida entre las etiquetas <tr> ... </tr>. Cada celda individual dentro de una fila se delimitaba con las etiquetas <td> ... </td>. Todo el conjunto quedaba encerrado entre <table> ... </table>.
Los encabezados de una tabla, sus títulos, no son más que celdas que tienen un formato diferente al de una celda normal. Los navegadores suelen presentarlas destacando su contenido en negrita. Obsérvalo en las tablas 3, 4 y 5 del ejemplo.
El único secreto que tiene la confección de encabezados es entender que pueden aplicarse a cualquier celda, no sólo a la primera fila o columna. Observa la Tabla 2 y fíjate cómo aparecen destacados elementos que estrictamente no constituyen un encabezado. Para crearlos, basta con cambiar la etiqueta de sus celdas: en vez de <td> empleamos <th> (de table header, cabecera de tabla).
Este es el código que genera la tabla:
Tabla 2
<table border="1">
<tr>
<th>manzana</th><td>pera</td><th>fresa</th>
</tr>
<tr>
<td>tomate</td><th>cebolla</th><td>pepino</td>
</tr>
</table>Fíjate cómo aquellos elementos que queremos destacados tienen la etiqueta <th> y los que no <td>.
Entendido esto el resto no tiene historia. Vamos a programar la Tabla 3, en la que la fila superior titula cada columna.
Tenemos tres filas (la de título más las dos de datos), por lo que nos aparecerán tres secciones <tr>. En la primera fila todas sus celdas están destacadas, por los que su etiqueta será <th>.
Tabla 3
<table border="1">
<tr>
<th>Columna 1</th><th>Columna 2</th><th>Columna 3</th>
</tr>
<tr>
<td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
<td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>La Tabla 4 ilustra un ejemplo en el que los encabezados titulan cada fila. Tenemos dos filas por cuatro columnas esta vez. Sólo el primer elemento de cada fila tendrá por etiqueta <th>.
Tabla 4
<table border="1">
<tr>
<th>Fila 1</th><td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
<th>Fila 2</th><td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>La Tabla 5 tiene títulos tanto en las filas como en las columnas. En este caso, el primer elemento de la primera fila no contiene dato alguno, pero aún así ponemos el par de etiquetas <td></td>, aunque no haya nada entre ellas. Las restantes celdas de la fila son encabezados. En las filas 2 y 3, sólo el primer elemento es un encabezado. El código te ilustrará esto con claridad:
Tabla 5
<table border="1">
<tr>
<td></td><th>Columna 1</th><th>Columna 2</th><th>Columna 3</th>
</tr>
<tr>
<th>Fila 1</th><td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
<th>Fila 2</th><td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>En el próximo artículo veremos cómo crear tablas con celdas irregulares, resultado de combinar entre sí celdas contiguas.
Javier Montero Gabarró
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