Las tablas organizan la información de la página en filas y columnas. Cada vez se usan menos por su poca adaptabilidad (responsive) a los diferentes dispositivos existentes.
| Elemento | Descripción |
|---|---|
| table | Delimita el contenido de una tabla. |
| caption | Para agregar un título a una tabla. Debe insertarse inmediatamente después de la etiqueta.
|
| tr | Delimita cada una de las líneas de la tabla. |
| td | Delimita el contenido de cada celda de la tabla. |
| th | Delimita cada una de las celdas de la cabecera |
| colspan (Atributo de td y th) | Para hacer que una celda cubra más de una columna |
| rowspan (Atributo de td y th) | Para hacer un intervalo de celda más de una fila. |
Las tablas pueden estructurarse en cabeza (thead), cuerpo (tbody) y pie (tfoot). Dentro de ellas se insertan las filas (tr) y las columnas (td) pero, también, celdas de cabecera (th) con formato.
Los elementos td son los contenedores de datos de la tabla. Pueden contener todo tipo de elementos HTML; texto, imágenes, listas, otras tablas, etc.
Rowspan y Colspan
En ocasiones, tendremos la necesidad de unir celdas por algún motivo (encabezados, títulos, celdas con la misma información, ...).
Para ello, las celdas td cuentan con los atributos rowspan y colspan.
- Rowspan une filas
- Colspan une columnas
Hay que tener en cuenta que, al unir celdas, en las filas/columnas donde se consideran unidas a la anterior, no se representará su td correspondiente. En este caso, se creará el siguiente td si lo hubiera.
Pista: Una celda necesitará la etiqueta p.