Tablas

Las tablas HTML se crearon para instancias en las que se necesita agregar material tabular (datos organizados en filas y columnas) a una página web. Las tablas pueden ser utilizadas para organizar horarios, comparaciones de productos, estadísticas u otros tipos de información.

Las tablas tendrán celdas que serán la unión entre filas y columnas. Una celda de tabla puede contener cualquier tipo de información, incluyendo números, elementos de texto e incluso imágenes y objetos multimedia. A modo de ejemplo:

Alimento	Calorías
Cebolla	47
Almendra	60

A las filas las llamaremos "table row" tal como se dice en inglés y a las columnas "table data". Las table row las identificaremos con la etiqueta <tr> y las table data con la etiqueta <td>

La construcción de la tabla requiere de la etiqueta de apertura <table> y la etiqueta de cierre </table> para su construcción.

La palabra "Alimento" y "Calorías" son encabezados de la tabla y utilizan la etiqueta <th>. Veamos entonces el código:

<table>
    <tr>
        <th>Alimento</th>
        <th>Calorías</th>
    </tr>
    <tr>
        <td>Cebolla</td>
        <td>47</td>
    </tr>
    <tr>
        <td>Almendra</td>
        <td>60</td>
    </tr>
</table>

Prueba el coódigo y observá el resultado de la estructura. El diseño de la tabla la definiremos desde los CSS.

Expansión de las celdas

Una característica fundamental de la estructura de la tabla es la expansión de celdas, que es el estiramiento de una celda para cubrir varias filas o columnas. La expansión de celdas permite crear estructuras de tabla complejas.

Es similar a la opción de combinar celda que aprendieron cuando utilizaron planillas de cálculos. Los atributos colspan o rowspan son los encargados de esto y lo veremos a continuación.

Observen la estructura de la tabla, al th le aplicamos el atributo colspan="2" lo que significa que esa fila ocupa 2 columnas. De antemano se que la tabla tiene dos columnas, es cuestión de ver:

👉 Considerar que colspan es un atributo de th y td.

De la misma forma que existe colspan, está rowspan, que será el atributo son los intervalos de fila, funcionan igual que los intervalos de columna, pero hacen que la celda se extienda hacia abajo en varias filas. En este ejemplo, se vará en claro su acción:

Organizando la tabla

Es posible organizar la tabla definiendo un encabezado, cuerpo y pie. Las etiquetas que utilizamos son de apertura <thead> y de cierre </thead> para definir el encabezado y la etiqueta de apertura <tbody> y de cierre </tbody> para el cuerpo y <tfoot> </tfoot> para el pie.

🪧 Es importante que escribas estos códigos en visual studio code.