Apuntes sobre Css

¿Para qué quieres herencias cuando tienes !important?

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: Aplica inherit si es heredable, o initial 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.

TOP