Tablas
Las tablas están incluidas en HTML desde sus primeras versiones y son una forma estupenda de mostrar datos tabulados, es decir, en filas y columnas, de forma ordenada. Además, si las construimos de forma semántica y correcta, es sencillo darle estilos desde CSS.
Una tabla puede ser sencilla o compleja, dependiendo de lo que queremos representar y de la cantidad de etiquetas y atributos que utilicemos, y de la vistosidad que pretendamos darle a nuestras tablas.
Elementos HTML
| Etiqueta | Descripción |
|---|---|
| table | Etiqueta contenedora que tendrá en su interior toda la tabla. |
| caption | Título/pie de la tabla |
| tr | Table Row. Etiqueta contenedora de cada fila de la tabla. |
| td | Table Data. Cada una de las celdas de la tabla. |
| th | Table Header. Cada una de las celdas de cabecera de la tabla. |
Declaraciones CSS
| Propiedad | Valor | Significado |
|---|---|---|
| border-collapse: | separate | collapse | Aplicado sobre una tabla, elimina el espacio de relleno. |
| border-spacing: | tamaño | 0 | Amplia el espacio de relleno entre tabla y celdas. |
| caption-side: | top | bottom | Mueve el elemento caption del interior de una tabla. |
| empty-cells: | show | hide | Hace desaparecer visualmente una celda vacía (sin texto). |
| table-layout: | auto | fixed | Indica si las celdas deben ajustarse o tener un tamaño fijo. |
