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.