DailyCosas 2.0

Recordemos el primer axioma de la accesibilidad web: el estilo no importa.

A la hora de enfrentarse con una web, los diseñadores que entraban en el mundo de la web hace unos años se veían maniatados por un código infernal que no era tan cómodo como esos programas de maquetación que usaban. Así, cuando la web llamo la atención de los que tenían el dinero, contrataron a diseñadores y les dijeron que querían lo mismo que hacian en papel o en las aplicaciones…. y comenzaron a usar lo mas rígido que tenían a mano y que les permitía fijar los contenidos como los habían diseñado: TABLAS.
Bueno, también había algunos bestias que usaban TABLAS + imagenes (cortadas en trocitos), lo cual no tiene mucha lógica… o ¿que código alt le pondrías a cada imagen?)
Lo peor de todo es que aun se diseña mucho de esta manera… tomemos unas nociones del tema y no repitamos este error.

Esta lección va dedicada a la gente de Tableless (sin tablas), que nos van avisando de la gente que ha dejado el lado oscuro.

¿Que es una tabla?

Aquí si que hay un agrio debate sobre que es una tabla y que no, yo solo puedo decir que son datos tabulados y que cada uno decida si lo suyo son datos tabulados (una lista con gente y notas, las caracteríscas de algo…). Así, es quizás mas sencillo darse cuenta de lo que NO son datos tabulados y porque no se deben usar las tablas para organizar la presentación en pantalla.

Alternativas

La alternativa es un buen marcado y un buen css a mano. Si introducimos cada parte que queramos mostrar en un elemento de bloque luego podemos colocarlo donde nos plazca (incluso en planos distintos). La sencillez y unos <div> bien puestos son los reyes de esta batalla.

Usando correctamente las tablas

Por descontado no nos interesa saber que ancho o que alto en píxeles tiene una tabla, pero lo que si nos podría interesar es el tamaño en filas y columnas.

Piensa con la cabeza y con los pies

<th> significa Table Head, lo cual nos da una clara idea de su utilidad. Con ello marcamos las celdas que contienen los encabezados de datos. Un atributo muy interesante es scope, que nos permite indicar que estamos encabezando, si una fila, una columna o un grupo de filas/columnas.
<thead>, todos los encabezados se puedene agrupar con esta marca, de esta manera un navegador podría seguir mostrándonos el cabecero mientras recorremos la tabla aunque esta ocupe mas espacio que la pantalla de nuestro dispositivo.
<tfoot>, se usa de manera similar pero para mostrar el pie (a veces un resultado). El W3C recomienda su definición antes del <tbody> para renderizarlo mejor.

Ante cualquier duda de tablas, nada como consultar la definición de W3C:
XHTML Tables Module

Finalmente, no debemos olvidar que el desarrollo de tecnologías DOM que permiten acceder a los contenidos web de una manera menos estática requieren una mejor definicion de los elementos de un documento, y las tablas son el lugar mas comprometido.

PD: Si, soy un mal ejemplo, mis principales sitios web personales en este momento usan tablas para organizar contenidos. Esto es debido a que se diseñaran antes de saber manejar CSS decentemente y a que no tengo tiempo para ponerlos a tono. Eso si, estoy haciendo esfuerzos para que poco a poco desaparezcan las tablas que no dicen nada.

Ya tenía escrito esto y minid me volvió a sorprender gratamente.