Tablas CSS

Las tablas de HTML son un grupo de etiquetas de HTML que sirven para mostrar datos tabulados. En el pasado, se utilizaron de forma errónea para crear un diseño, debido a su facilidad de colocación al ser un esquema rectángular. Afortunadamente, hoy en día ya se ha perdido esa percepción incorrecta, aunque nunca está de más conocer un poco de historia para no repetir los errores del pasado.

Cuando queremos dar estilo a una tabla de HTML, podemos utilizar propiedades genéricas como border, background, color, font-family, padding, margin, entre otras. Combinándolas en los diferentes elementos HTML de tablas, en particular, celdas <td>, encabezados <th>, filas <tr> y tablas <table>, podemos personalizar mucho el aspecto visual de la misma.

Propiedades CSS para tablas

Sin embargo, también existen varias propiedades CSS específicas para alterar o modificar el comportamiento de ciertas características de una tablas HTML. Veamos cuales son esas propiedades específicas para tablas:

Propiedad Valor Significado
border-collapse separate | collapse Aplicado sobre la tabla, elimina el espacio de relleno entre celdas.
border-spacing 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 contenido).
table-layout auto | fixed Indica si las celdas deben ajustarse o tener un tamaño fijo.

La propiedad border-collapse permite especificar si los bordes de una tabla y sus celdas deben estar unidos (collapse) o separados (separate). En el segundo caso, se puede también aplicar la propiedad border-spacing, que especifica el tamaño que medirán los espacios exteriores entre celdas.

La propiedad caption-side permite especificar donde se colocará el título de la tabla (en el caso de haber utilizado el elemento HTML <caption>): al principio de la tabla (top) o al final (bottom).

La propiedad empty-cells establece si mostrar (show) o no (hide) las celdas vacías, haciéndolas desaparecer en el último caso.

Por último, la propiedad table-layout permite especificar si el navegador debe adaptar el tamaño de las celdas automáticamente (auto) o establecer un tamaño fijo (fixed).

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.