TICO: Presentar información en tablas

Presentar información en tablas: <table>, <tr> y <td>

Durante mucho tiempo fue habitual utilizar las tablas de HTML tanto para presentar datos complejos de una forma más sencilla, como también para estructurar por entero el diseño de una página web o para subdividir el texto en varias columnas. Sin embargo, con el aumento de la popularidad de CSS este papel extra de las tablas pasó a un segundo plano, de tal modo que hoy las tablas asumen únicamente la función para lo que fueron pensadas, es decir, la presentación de datos de forma ordenada. Las tablas se componen, por lo menos, de estos tres elementos:

<table>: esta etiqueta marca el inicio y el cierre de una tabla en HTML, aunque por sí sola no informa al navegador de aspectos necesarios para mostrarse como el número de filas o de columnas.

<tr>: con el elemento "table row" (fila de la tabla) se añaden tantas filas a la tabla como sea necesario.

<td>: las columnas completan la estructura básica de una tabla. Para ello necesitamos el tag "table data" (datos de la tabla), que se subordina a una etiqueta <tr>, puesto que, dentro de una fila, se crean varias celdas (una por columna). El contenido de una celda se sitúa entre la etiqueta de inicio <td> y el de cierre </td>.

Creamos a continuación una tabla sencilla para entender la estructura de tabla en HTML. En nuestra prueba se compone únicamente de una línea y dos columnas:

Al mostrar la vista preliminar en el explorador, pronto se detecta que la tabla no se muestra como debería, pues ni se distinguen las dos columnas ni se reconoce siquiera si se trata de una tabla. La explicación es más sencilla de lo que parece y es que, por defecto, las celdas de HTML no tienen borde. Esta característica tan propia de las tablas se marca ampliando la etiqueta <table> con el atributo border y la variable 1, como en nuestro ejemplo:

Abre ahora tu documento HTML en tu navegador y observa la tabla resultante.

Nota: HTML5 ya no soporta el atributo border, una función que ha asumido CSS.

A pesar de su sencillo formato, HTML también permite destacar los títulos de las columnas. Para ello se ha de marcar la fila correspondiente con la etiqueta <thead> (table head) y marcar las celdas como <th>. Con este código de abajo diseñas una tabla con cuatro filas, tres columnas y títulos: