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 sofisticados. Pero si bien 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 en un diseño de tabla, aunque lineal, no siempre tiene sentido cuando se lee de izquierda a derecha y de arriba a abajo. Además, con tablas anidadas y varios tramos en las celdas de la tabla puede hacer que la página sea muy difícil de entender.
Esta es la razón por la que la especificación HTML5 recomienda contra las tablas para el diseño y por qué HTML 4.01 no lo permite. Las páginas web accesibles permiten que más personas las utilicen 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, los lectores de pantalla y los motores de búsqueda leerán primero las partes importantes (el contenido) y luego las partes menos importantes (navegación).
Las mesas son complicadas
Incluso si creas una tabla con un editor web, tus páginas web serán muy complicadas y difíciles de mantener. Excepto por los diseños de página web más simples, la mayoría de las tablas de diseño requieren el uso de muchos atributos y de tablas anidadas.
Crear la mesa puede parecer fácil mientras lo haces, pero una vez que lo hayas hecho, debes mantenerlo. Seis meses después, puede que no sea tan fácil de recordar por qué anidó las tablas o cuántas celdas había en una fila, etc. Sin mencionar que si mantiene las páginas web como miembro del equipo, debe explicar a todos los involucrados cómo funcionan las tablas o esperar que tomen más tiempo 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 puede escribir un archivo CSS y diseñar todas las páginas para que se vean de esa manera. Luego, cuando desee cambiar el diseño de su sitio, simplemente cambie un archivo CSS y todo el sitio cambiará, ya no tendrá que pasar por cada página una a la vez para actualizar las tablas para actualizar el diseño.
Las tablas son inflexibles
Si bien es posible crear diseños de tablas con anchos porcentuales, a menudo son más lentos de cargar y pueden cambiar dramáticamente la apariencia de su diseño. Pero si usa anchos específicos para sus tablas, terminará con un diseño muy rígido que no se verá bien en 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.
Tablas anidadas cargan más lentamente que CSS para el mismo diseño
La forma más común de crear diseños sofisticados con tablas es "anidar" las tablas. Esto significa que una (o más) tabla se coloca dentro de otra. Cuantas más tablas estén anidadas, más tiempo llevará el navegador web para representar 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 personajes significa menos para descargar.
Las tablas pueden dañar la optimización de motores de búsqueda
El diseño de la tabla más común tiene una barra de navegación en el lado izquierdo de la página y el contenido principal a la derecha. Cuando se usan tablas, esto (generalmente) requiere que el primer contenido que se muestra en el HTML sea la barra de navegación de la izquierda. Los motores de búsqueda clasifican 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 otro contenido. Por lo tanto, una página con navegación hacia la izquierda primero, parecerá tener 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 se debe colocar 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 se imprimen bien
Muchos diseños de mesas no se imprimen bien porque son demasiado anchos para la impresora. Por lo tanto, para hacer que encajen, los navegadores cortarán las tablas e imprimirán las secciones a continuación, lo que dará como resultado páginas muy desunidas. 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 solo para imprimir la página.
Las tablas para el diseño no son válidas en HTML 4.01
Los estados de la especificación de HTML 4: "Las tablas no deben usarse simplemente como un medio para diseñar el contenido del documento, 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 usar tablas para el diseño. Solo debe usar tablas para datos tabulares, y los datos tabulares generalmente parecen algo que puede 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, ahora se consideran HTML válido. Los estados de la especificación HTML5: "Las tablas no deben usarse como ayudas de diseño". Esto se debe a que las tablas para el diseño son difíciles de diferenciar para los lectores de pantalla, como se mencionó anteriormente.
El uso de CSS para posicionar y diseñar sus páginas es la única forma válida de HTML 4.01 para obtener los diseños que usó para usar las tablas para crear, y HTML5 también recomienda este método.
Tablas de diseño pueden afectar sus perspectivas de trabajo
A medida que más y más diseñadores nuevos aprenden HTML y CSS, sus habilidades para construir diseños de tablas serán cada vez menos demandadas. Sí, es cierto que los clientes no suelen decirle la tecnología exacta que debe usar para crear 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 están obligados por muchos países y las empresas encuentran la accesibilidad cada vez más importante cada día.
- Páginas web mantenibles: diseños que pueden llevar consigo incluso si no va a mantenerlos 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 scripts especiales o páginas extra.
Si no puede entregar lo que piden los clientes, dejarán de acudir a usted por diseños, y punto. ¿Puede realmente permitirse que su negocio sufra porque no está dispuesto a aprender e incorporar una técnica que ha estado en uso desde fines de la década de 1990?
La Moral: Aprende a Usar CSS
CSS puede ser difícil de aprender, pero cualquier cosa que valga la pena vale el esfuerzo. No evites que tus habilidades se estanquen. Aprenda CSS y construya sus páginas web de la forma en que fueron creadas, con CSS para el diseño.
