CSS: La Guía Definitiva, 5ª Edición

Capítulo 13. Diseño de tablas en CSS

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

Puede que tú, , hayas echado un vistazo al título de este capítulo y te hayas preguntado: "¿Diseño de tabla? ¿No es eso tan del último milenio?". Efectivamente, pero este capítulo no trata sobre el uso de tablas para maquetar. En cambio, trata de las formas en que las tablas se maquetan mediante CSS, que es un asunto mucho más complicado de lo que podría parecer a primera vista.

Las tablas son inusuales, comparadas con el resto de la maquetación de documentos. Hasta que aparecieron flexbox y grid, sólo las tablas poseían la capacidad única de asociar tamaños de elementos con otros elementos: por ejemplo, todas las celdas de una fila tienen la misma altura, independientemente de la cantidad de contenido que pueda tener cada celda individual. Lo mismo ocurre con las anchuras de las celdas que comparten una columna. Las celdas contiguas pueden compartir un borde, aunque las dos celdas tengan estilos de borde muy diferentes. Como verás, estas capacidades se adquieren a expensas de una gran cantidad de comportamientos y reglas -muchos de ellos arraigados profundamente en el pasado de la web- que se aplican a las tablas, y sólo a las tablas.

Formato de tablas

Antes de empezar a preocuparnos por cómo se dibujan los bordes de las celdas y se dimensionan las tablas, tenemos que profundizar en las formas fundamentales en que se montan ...