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. |