Tablas en CSS
Las tablas HTML son perfectas para mostrar datos organizados, como horarios, resultados o estadÃsticas. Con CSS puedes hacerlas más claras y legibles, controlando desde los tÃtulos hasta los bordes y celdas vacÃas. En esta lección veremos las propiedades caption-side
, empty-cells
, border-collapse
, border-spacing
y table-layout
, además de cómo alternar colores en las filas usando pseudo-selectores.
caption-side
Define dónde se muestra el tÃtulo de la tabla (<caption>
).
Valores: top
(por defecto), bottom
, left
, right
(estos dos últimos son experimentales).
caption {
caption-side: bottom;
text-align: center;
}
<table>
<caption>Resultados</caption>
<tr><td>a</td><td>b</td><td>c</td></tr>
</table>
Nota: El atributo HTML align
en <caption>
está obsoleto. Usa CSS.
empty-cells
Controla si se muestran bordes y fondo en celdas vacÃas.
Valores: show
(por defecto), hide
, inherit
.
Importante: Solo tiene efecto cuando border-collapse
está en separate
.
table {
border-collapse: separate;
empty-cells: show;
}
<table>
<tr><td>a</td><td>b</td><td></td></tr>
</table>
border-collapse
Determina si los bordes entre celdas se fusionan o se mantienen separados.
Valores: collapse
, separate
(por defecto).
table {
border-collapse: collapse;
border: 2px solid #333;
}
td, th {
border: 1px solid #333;
}
Nota: En collapse
, los bordes se solapan en uno solo.
border-spacing
Establece el espacio entre celdas. Solo funciona con border-collapse: separate
.
Valores: Un valor para ambos ejes, o dos valores (horizontal y vertical).
table {
border-collapse: separate;
border-spacing: 0.5em 1em;
}
td, th {
border: 1px solid #333;
}
table-layout
Controla cómo el navegador determina el ancho de las columnas.
Valores: auto
(por defecto), fixed
.
table {
table-layout: fixed;
width: 100%;
}
col:nth-child(1) {
width: 20%;
}
Explicación: Con table-layout: fixed
, el navegador calcula los anchos de las columnas antes de cargar el contenido, basándose en los valores de width
definidos en celdas o en la etiqueta <col>
. Esto mejora el rendimiento y evita que la tabla cambie de tamaño al cargarse.
En el ejemplo, la primera columna ocupa el 20% del ancho total gracias a col:nth-child(1)
. Las demás columnas comparten el espacio restante.
Consejo: fixed
es útil para tablas grandes o con muchas columnas, y también cuando quieres un diseño predecible sin depender del contenido de cada celda.
Valores: auto
(por defecto), fixed
.
Consejo: fixed
es útil para mejorar el rendimiento en tablas grandes.
Alternar colores en filas
Se puede usar :nth-child
para aplicar estilos diferentes a filas pares e impares (efecto zebra).
tr:nth-child(odd) {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #ffffff;
}
Accesibilidad: Asegúrate de usar colores con suficiente contraste.
Buenas prácticas
Valores universales: Puedes usar initial
, inherit
y unset
en las propiedades vistas:
initial
: Valor por defecto del navegador.inherit
: Hereda del elemento padre.unset
: Aplicainherit
si es heredable, oinitial
si no lo es.
Accesibilidad: Usa <caption>
para describir la tabla. Añade aria-describedby
si es compleja. Usa <th scope="col">
o scope="row"
para cabeceras.
Diseño adaptable: Usa width: 100%
y considera overflow-x: auto
para pantallas pequeñas:
table {
display: block;
overflow-x: auto;
}
Evita usar tablas para maquetar. Para eso es mejor usar Flexbox o Grid.
Rendimiento: Usa table-layout: fixed
y evita sombras o bordes complejos en celdas si no son necesarios.
Compatibilidad: Evita caption-side: left/right
. :nth-child
tiene soporte completo en navegadores modernos.
Pruebas: Revisa la tabla en diferentes navegadores y dispositivos. Verifica los colores alternos y la visibilidad de las celdas vacÃas.