Que es CSS tableless o layout tableless

Últimamente cuando hacen ofertas de empleo en foros o sitios de teletrabajo solicitan maquetación XHTML – CSS tableless y eso desconcierta un poco al que nunca escucho hablar de tableless.

Tableless es simplemente maquetar sin tablas, armar la estructura con DIVs y editarla con CSS.

Este tipo de maquetación es la mas usada en blogs, por lo general son estructuras de 2 o 3 columnas, header (cabecera) y foot (pie), otra característica de layout tableless es que son diseños centrados y con ancho fijo.

El concepto fue adoptado a mediados del 2006 cuando las nuevas versiones de los navegadores empezaban a soportar un mayor porcentaje de estándares y CSS (a excepción de Explorer que siempre fue rebelde), hacer un diseño de 3 columnas con DIVs y CSS era tan censillo como hacerlo con tablas, pero la estructura mantenía su semántica.

Pero… hacer un layout tableless no significa llenar indiscriminadamente de DIVs la estructura HTML con propósito de presentación y diseño, lo ideal es usar y aprovechar todos los elementos HTML como encabezados, listas, párrafos, vínculos, agrupaciones, ext. (w3c ofrece una guía de referencia XHTML en español donde se pueden ver los elementos, semántica, nombre, tipo, atributo, definición, ext).

Herramientas

W3 Tableless es una herramienta online que comprueba si las páginas de un sitio usan tablas o usan CSS para organizar la estructura y diseño.
W3 Tableless presenta 2 resultados:
Primero si la pagina sigue las recomendaciones W3C.
Segundo si la pagina es 100% tableless, o sea, que no contiene ninguna tabla (las tablas fueron echas para presentar datos tabulados y no esta mal usarlas cuando es debido).
Si la pagina es tableless automáticamente la registra en su directorio de paginas tableless.

Existen varios software WYSIWYG (What You See Is What You Get) tableless que facilitan la maquetacion con DIVs y CSS, lo único que uno hace es dibujar cajas y el código va saliendo con DIVs y sus identificadores.

Yo recomiendo Dreamweaver y escribir código a mano.

Mas información en Wikipedia.