Viendo lo fácil que era maquetar con tablas, ¿por qué nos complicamos la vida con las CSS y las capas?. Estoy seguro que para muchos de vosotros es algo obvio, pero sigo escuchando comentarios que siguen pensando que se trata únicamente de un capricho o moda.
Las tablas, gracias a la etiqueta border=»0″, se convirtieron en una rejilla en la que era muy fácil maquetar una web. Además y gracias también a la imagen de un pixel transparente, conseguíamos posicionar todo en el lugar adecuado.
Existen varios motivos por los que es mejor usar capas en lugar de tablas, vamos a detallarlos:
Estándares recomendados por la W3C:
- La guerra de navegadores ha sido, es y seguirá siendo una batalla en la que los más perjudicados son los maquetadores. Hay ocasiones en las que conseguir que una página se vea igual en explorer y firefox (los navegadores más importantes actualmente) supone un verdadero quebradero de cabeza.
Lo que se pretende por parte de la W3C, es unificar criterios. Para empezar, establece que las tablas no se crearon para maquetar, si no para tabular contenidos, por lo que no deben de usarse para otra cosa que no sea esa. Otra razón por la que no usar tablas, es que muchas de las etiquetas que usábamos para dimensionar nuestras celdas, ahora ya no cumplen los estándares. El uso de W3C nos garantiza que apostamos por una tecnología de futuro, por lo que nuestro esfuerzo e inversión siempre será más duradero.
Accesibilidad:
- Para que las páginas empiecen a verse bien en cualquier dispositivo (teléfonos, pda’s, televisión, pc…) lo que ahora se intenta, es separar el contenido de la estructura. De esta forma, con una modificación en la css podremos fácilmente adaptar una página a los distintos dispositivos.
- El peso de la página se optimiza mucho al usar capas, esto supone mayor rapidez de carga.
Posicionamiento:
- El uso de tablas influye negativamente en google.
El navegador lee una tabla tal y como se ha formado y no visualmente como lo puede hacer cualquier humano, esto es, empieza por una columna (la primera de la izquierda) y hasta que no la ha terminado no pasa a la segunda. Si además tenemos nuestra maquetación llena de tablas anidadas, esto ocasionará que nuestro texto relevante no lo sea para el buscador, y por lo tanto no sea indexado. Gracias a las etiquetas <div> y a la CSS, podemos hacer que sea casi inapreciable el código que se encuentra entre estos contenidos relevantes, por lo que la indexación es mucho más fácil.
En conclusión, podemos ver que todo son beneficios maquetando con capas, y que con un poco de paciencia podemos conseguir que funcione perfectamente en los navegadores más importantes.
Un pequeño truco para mayor rapidez en la carga: en ocasiones la css acaba siendo bastante grande, sobre todo en portales horizontales con mucha variedad de secciones. En el caso de muchoviaje.com, teníamos una css únicamente para la home, para que cargase más rápido y luego había secciones que tenían la suya propia.
Una cosa es que te de igual estar bien posicionado en Google, estoy seguro de que tus clientes no pensarán lo mismo, en cuanto a la debilidad del argumento, te recomiendo que busques en internet como afectan las tablas anidadas y la cantidad de código que se genera a los buscadores, quizás te sorprendas.
saludos y gracias por tu comentario.
De los 3 puntos que has dicho, sólo el de la rapidez y el de la recomendación del W3C me parecen ciertas, las otras son razones bastante débiles (me pude dar igual google y la adaptación a distintos clientes puede no ser tan directa)
Enjoy
PARA TODOS !!!
En este mismo blog tenéis unos enlaces a muy buenas páginas en las que podéis ver cómo se maqueta con capas, incluso podéis copiar los ejemplos para adaptarlos a vuestras necesidades.
ejemplos de capas
Yo no me aclaro ni con las capas ni con css, soy poco ducho en estos menesteres.
¿Alguna ayuda de cómo maquetar con capas? Yo utilizo el Dreamweaver MX pra esta página: http://www.miquelmartipol.net
Muy interesante el artículo, para los no entendidos resultaba más fácil modificar una página con las tablas que con las capas.