Categorías
Accesibilidad web CSS

Tablas HTML maquetadas con CSS Grid: ¿Tiene sentido?

Hace algunas semanas maqueté una tabla en html usando los elementos propios de la tabla (table, caption, thead, tbody, th y td y no hubo tfoot porque la tabla no tenía).

— ¿Pero que has hecho?
— Hacer una tabla.
— Pero ya no se hacen así.

Y me recomendó la lectura del siguiente artículo: Responsive data tables with CSS Grid – Revisited. Resumiendo el argumento del artículo, para hacer una tabla accesible se usan elementos como div y span para luego añadir CSS usando las propiedades de CSS Grid display: grid; y grid-template-columns.

En Septiembre haré 20 años que llevo como desarrollador web, y hemos pasado de utilizar tablas para maquetar absolutamente todo (ojo, que todavía se hace y se encuentra código con esta técnica totalmente desaconsejada) a no usar tablas ni para maquetar datos tabulares.

Y la lista puede seguir con enlaces que parecen botones, textos que parecen títulos (¿os suena .h1?), y otras ocurrencias.

El avance que se ha producido en CSS con nuevas especificaciones y una gran velocidad de soporte por los principales navegadores, nos permite hacer auténticas virguerías con los estilos, y es algo genial. Pero no tenemos que olvidar algo esencial: las hojas de estilo CSS son para definir estilos, y el HTML define la estructura de una página web.

El viejo truco de desactivar los estilos, y plantearse otras formas de navegar (lector de pantalla, por ejemplo), nos pueden ayudar a decidir la opción más correcta.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *