El porqué de no utilizar tablas

Este debería de haber sido el primer post de CSSLab, como antes tarde que nunca, traduzco y transcribo 11 misivas que explican porqué no deberías de utilizar tablas para diagramar un sitio. Comencemos:

1. Porque utilizar tablas es una estupidez: Las tablas existen en HTML por un motivo: mostrar datos tabulados. Pero con la disponibilidad del border=“0”, se hizo posible para los diseñadores tener grillas para contener su diseño. Aún hoy es la forma más común de diagramar y armar sitios.

2. Convenciendo al jefe / cliente: Algunos buenos motivos para trabajar con web standards:

• sus sitios se cargarán más rápido
• los costos de hosting se reducirán con sitios más livianos
• los rediseños de sitios serán más eficientes y baratos
• será más fácil mantener una consistencia visual entre todas las páginas del sitio
• mejores resultados en buscadores
• su sitio será más accesible para todos los browsers

3. Asesinos: nested tables y spacers: Al principio fueron meras recomendaciones para trabajar ciertas limitaciones de los browsers existentes, y como trabajaban con las especificaciones de la W3C de la época (1995-1997…. Netxcape 2, 3). El problema es que estas recomendaciones aún persisten, cuando los standards han evolucionado bastante. Muchos diseñadores van por el camino facilista de armar sitios web. El problema del uso de tablas:

• mezclan contenido con formato (dejando el peso de los archivos innecesariamente grandes, cargando los mismos datos d diagramación en cada página que visitan).
• el ancho de banda no es gratis…
• hacen el rediseño lento y caro.
• no hacen el sitio accesible para, por ejemplo, móviles, PDA’s y menos aún discapacitados visuales.

Por suerte esto ya está solucionado, los browsers modernos están mucho mejores para renderizar web standards, y pronto esperamos extinguir estos métodos arcaicos de diseño web. Ya no más meter tablas dentro de tablas, llenar celdas vacías con GIF transparentes de 1 pixel…..

4. CSS y la separación del estilo gráfico: Utilizando hojas de estilos podemos ahora separar el contenido del estilo gráfico, lo que nos permite:

• rediseños más baratos y rápidos: basta con modificar una hoja de estilo para todo el sitio ver los cambios inmediatos.
• se reduce en ancho de banda utilizado para visualizar el sitio. El CSS que controla el layout se queda en el cache del browser.
• es más fácil mantener la consistencia visual del sitio: todas las páginas utilizan la misma familia tipográfica, tamaño de textos, colores, posición de elementos, lo que a la larga fortalece la marca y deja el sitio más usable.
• dejas tu sitio accesible, independiente del dispositivo que lo despliega.
• minimizando el código y utilizando correctamente los tags de texto (H1, H2, P, etc) ayudan a mejorar tu ranking en los buscadores.

5. Aún puedes seguir utilizando tablas: pero no uses tantas. Puedes darles formatos con CSS, y no uses más spacers!

6. Cambiando la forma en que piensas: Esto es probablemente lo que hace más reticentes al cambio a la mayoría de los diseñadores. Algo nuevo, con código, difícil de digerir. Diagramar con CSS requiere una nueva forma de pensar, ahora orientado a la información: títulos con H1, subtítulos con H2, etc. En vez de contener tu texto en una celda, conténla en un DIV. Dale a ese DIV un ID (identificador único) o un CLASS que describirá el contenido en función de la apariencia o posición.

7. Evita y
: Lo que quieres decir, claro, tiene significado. Si es importante, (bold). Si quieres hacer énfasis (itálica).
aún es soportado de modo transicional, pero ha sigo corregido:
. Esto porque según la regla, todos los tags deben de abrir y cerrarse. (). Como
hace de punto aparte, se abre en sí misma. Por ese el /; y no es el único tag que funciona de esta manera. Puedes utilizar CSS para hacer lo mismo:

.aparte {display:block;}