Aprender a escribir diseños CSS puede ser complicado, especialmente si está familiarizado con el uso de tablas para crear diseños de páginas web elegantes. Pero mientras que HTML5 permite tablas para el diseño, no es una buena idea.

Las tablas no son accesibles

Al igual que los motores de búsqueda, la mayoría de los lectores de pantalla leen las páginas web en el orden en que se muestran en el HTML, y las tablas pueden ser muy difíciles de analizar para los lectores de pantalla. Esto se debe a que el contenido de un diseño de tabla, aunque lineal, no siempre tiene sentido cuando se lee de izquierda a derecha y de arriba hacia abajo. Además, con tablas anidadas, y varios espacios en las celdas de la tabla pueden hacer que la página sea muy difícil de entender.

Esta es la razón por la que la especificación HTML5 recomienda no utilizar tablas para el diseño y por la que HTML 4.01 no lo permite. Las páginas web accesibles permiten que más gente las utilice y son la marca de un diseñador profesional.

Con CSS, puede definir una sección como perteneciente al lado izquierdo de la página pero colocarla en último lugar en el HTML. Luego, tanto los lectores de pantalla como los motores de búsqueda leerán las partes importantes (el contenido) primero y las partes menos importantes (navegación) después.

Las tablas son complicadas

Incluso si crea una tabla con un editor web, sus páginas web seguirán siendo muy complicadas y difíciles de mantener. A excepción de los diseños de páginas web más simples, la mayoría de las tablas de diseño requieren el uso de muchos atributos y de tablas anidadas.

Construir la mesa puede parecer fácil mientras lo haces, pero una vez hecho esto, necesitas mantenerla. Seis meses después, puede que no sea tan fácil recordar por qué anidó las tablas o cuántas celdas estaban en una fila y así sucesivamente. Por no mencionar que si usted mantiene páginas web como miembro del equipo, tiene que explicar a todos los involucrados cómo funcionan las tablas o esperar que se tomen un tiempo adicional cuando necesiten hacer cambios.

CSS también puede ser complicado, pero mantiene la presentación separada del HTML y hace que sea mucho más fácil de mantener a largo plazo. Además, con el diseño CSS puedes escribir un archivo CSS y darle estilo a todas tus páginas para que se vean de esa manera. Luego, cuando quiera cambiar el diseño de su sitio, simplemente cambie un archivo CSS, y todo el sitio cambiará, sin tener que pasar por todas las páginas una a la vez para actualizar las tablas y actualizar el diseño.

Las tablas son inflexibles

Aunque es posible crear diseños de tabla con anchos de porcentaje, a menudo son más lentos de cargar y pueden cambiar drásticamente el aspecto de su diseño. Pero si utiliza anchos específicos para sus tablas, terminará con un diseño muy rígido que no se verá bien en los monitores que tienen un tamaño diferente al suyo.

Crear diseños flexibles que se vean bien en muchos monitores, navegadores y resoluciones es relativamente fácil. De hecho, con las consultas de medios CSS, puede crear diseños separados para pantallas de diferentes tamaños.

Las tablas anidadas se cargan más lentamente que las CSS para el mismo diseño

La forma más común de crear diseños de fantasía con tablas es «anidar» las tablas. Esto significa que una (o más) mesa se coloca dentro de otra. Cuantas más tablas estén anidadas, más tiempo tardará el navegador en renderizar la página.

En la mayoría de los casos, un diseño de tabla utiliza más caracteres para crear que un diseño CSS. Y menos caracteres significa menos para descargar.

Las tablas pueden dañar la optimización de motores de búsqueda

El diseño creado en la tabla más común tiene una barra de navegación a la izquierda de la página y el contenido principal a la derecha. Cuando se utilizan tablas, esto (generalmente) requiere que el primer contenido que se muestre en el HTML sea la barra de navegación de la izquierda. Los motores de búsqueda categorizan las páginas según el contenido, y muchos motores determinan que el contenido que se muestra en la parte superior de la página es más importante que el resto del contenido. Por lo tanto, una página con navegación por la izquierda en primer lugar, parecerá tener un contenido que es menos importante que la navegación.

Usando CSS, puede poner el contenido importante primero en su HTML y luego usar CSS para determinar dónde debe colocarse en el diseño. Esto significa que los motores de búsqueda verán primero el contenido importante, incluso si el diseño lo coloca más abajo en la página.

Las tablas no siempre imprimen bien

Muchos diseños de mesa no imprimen bien porque simplemente son demasiado anchos para la impresora. Por lo tanto, para que encajen, los navegadores cortan las tablas e imprimen las secciones de abajo, lo que resulta en páginas muy desarticuladas. A veces terminas con páginas que se ven bien, pero falta todo el lado derecho. Otras páginas imprimirán secciones en varias hojas.

Con CSS puede crear una hoja de estilo separada sólo para imprimir la página.

Las tablas para el diseño no son válidas en HTML 4.01

La especificación HTML 4 indica: «Las tablas no deben utilizarse únicamente como un medio para maquetar el contenido de los documentos, ya que esto puede presentar problemas al renderizar en medios no visuales».

Por lo tanto, si desea escribir HTML 4.01 válido, no puede utilizar tablas para el diseño. Sólo debe utilizar tablas para los datos tabulares, y los datos tabulares generalmente se ven como algo que podría mostrar en una hoja de cálculo o posiblemente en una base de datos.

Sin embargo, HTML5 cambió las reglas y ahora las tablas para el diseño, aunque no se recomiendan, se consideran HTML válidas. La especificación HTML5 indica: «Las mesas no deben ser usadas como ayuda para el diseño.» Esto se debe a que las tablas de diseño son difíciles de diferenciar para los lectores de pantalla, como se mencionó anteriormente.

Usar CSS para posicionar y maquetar sus páginas es la única forma válida de obtener los diseños que usaba para crear tablas, y HTML5 recomienda este método también.

Las tablas para el diseño pueden afectar a sus perspectivas de trabajo

A medida que más y más nuevos diseñadores aprenden HTML y CSS, sus habilidades en la construcción de diseños de mesas estarán cada vez menos demandadas. Sí, es cierto que los clientes no suelen decirle la tecnología exacta que debe utilizar para construir sus páginas web, pero sí solicitan cosas como:

• Páginas web accesibles : los diseños que pueden ser vistos por los lectores de pantalla son obligatorios en muchos países y las corporaciones encuentran la accesibilidad cada vez más importante cada día.
• Páginas web mantenibles : diseños que se pueden llevar con ellas aunque no las vaya a mantener en el futuro.
• Diseños flexibles : diseños que funcionan en muchos navegadores, resoluciones y dispositivos.
• Páginas de descarga rápida : la velocidad es cada vez más importante, incluso para SEO.
• Diseños imprimibles : páginas que se imprimen sin guiones especiales o páginas adicionales.

Si usted no puede entregar lo que los clientes piden, ellos dejarán de venir a usted por diseños — punto. ¿Puede realmente permitirse dejar que su negocio sufra porque no está dispuesto a aprender e incorporar una técnica que ha estado en uso desde finales de la década de 1990?

La Moral: Aprenda a Usar CSS

CSS puede ser difícil de aprender, pero cualquier cosa que valga la pena vale la pena. No dejes que tus habilidades se estanquen. Aprenda CSS y construya sus páginas web de la forma en que deben ser construidas, con CSS para la maquetación.