Aprendiendo a escribir CSS Los diseños pueden ser complicados, especialmente si está familiarizado con el uso de tablas para crear diseños de páginas web elegantes. Pero mientras HTML5 permite el diseño de tablas, no es una buena idea.
Las mesas no son accesibles
Similar a 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. 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, las tablas anidadas y varios intervalos en las celdas de la tabla pueden hacer que la página sea difícil de descifrar.
Esta es la razón por la que el Especificación HTML5 recomienda contra 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 las partes importantes (el contenido) primero y las menos importantes (navegación) al final.
Las tablas son complicadas
Incluso si crea una tabla con un editor web, sus páginas web seguirán siendo 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 hace, pero una vez que está hecho, debe mantenerlo. 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, etc. Sin mencionar que si mantiene 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 contenido 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 sus 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 cambios en el sitio: ya no es necesario pasar por cada página de una en una para actualizar las tablas y 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 drásticamente el aspecto de su diseño. Pero si usa anchos específicos para sus tablas, termina con un diseño muy rígido que no se verá bien en monitores que tengan 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 dañan la optimización del motor de búsqueda
El diseño de tabla más común utiliza una barra de navegación en el lado izquierdo de la página y el contenido principal a la derecha. Cuando se usan tablas, este enfoque (generalmente) requiere que el primer contenido que se muestre en HTML sea la barra de navegación de la izquierda. Los motores de búsqueda clasifican las páginas en función del 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. Entonces, una página con navegación a la izquierda primero, parecerá tener contenido que es menos importante que la navegación.
Con 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 el contenido importante primero, 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 simplemente son demasiado anchos para la impresora. Entonces, para que encajen, los navegadores cortan las tablas e imprimen las secciones a continuación, lo que resulta en páginas 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 solo para imprimir la página.
Las tablas de diseño no son válidas en HTML 4.01
La Estados de especificación HTML 4: "Las tablas no deben usarse únicamente como un medio para diseñar el contenido del documento, ya que esto puede presentar problemas al renderizar en medios no visuales".
Entonces, 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 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álido. La especificación HTML5 establece: "Las tablas no deben utilizarse 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.
Usar CSS para posicionar y diseñar sus páginas es la única forma válida de HTML 4.01 de obtener los diseños que solía usar para crear tablas, y HTML5 también recomienda encarecidamente este método.