Tener código HTML optimizado es una gran ventaja para el éxito de un sitio web, inicialmente desde dos puntos de vista: para los usuarios y para los motores de búsqueda. Aveces el desarrollo de un sitio web con tablas puede parecer un verdadero desorden!

Revisando varios sitios web, es increíble que no se preste atención a factores básicos de usabilidad o accesibilidad durante el proceso del desarrollo de un sitio, y aunque debo reconocer que últimamente sí se estan generando buenas propuestas de desarrollo web, al menos en Colombia, aún hay algunos desarrollos que dejan mucho que desear.

En este post, me voy a enfocar en solo un factor que es importante para tener un mejor sitio web: El uso de tablas vs uso de CSS.

Para los motores de búsqueda, al menos en mi experiencia, he notado que el uso de CSS ayuda tremendamente en comparación al uso de tablas. Ya que con un sitio web desarrollado en CSS se puede tener una mejor relación de contenido vs código, el código es más fácil escribirlo semánticamente, el peso de las páginas web serán más ligeras, etc. En general, es mejor CSS que tablas 🙂

Revisando varios sitios web, me encontré con uno en particular que ofrece servicios de deportes extremos en Colombia: dosis verde.

El sitio web es bueno, sin embargo, por alguna razón noté que tardaba mucho en cargar, por lo que lo primero que hice fue mirar el peso total de la página web:

135k ?! Me pareció algo exagerado, pero tras revisar el código del sitio web, me encontré con la -desagradable- razón.

El uso excesivo de tablas es realmente procupante, esto hace que el código no sea limpio, y que finalmente, la página web tarde más de lo normal en cargar.

He tratado de ilustrar la cantidad de tablas que se usan para mostrar el contenido de este sito web:

Existe un plugin para firefox llamado “web developer” (que a propósito, recomiendo que lo tengan, es muy útil) que permite resaltar las tablas presentes en un sitio web.

En la figura anterior, cada cuadro, es el uso de una celda de una tabla, se ve que el uso es exagerado. Y esto sin lugar a dudas, no es bueno para el desarrollo web.

Para concluir, voy a listar otras razones adicionales por las que el uso de CSS es mejor al uso de tablas:

• Las páginas cargan más rápido, como se mostró en el ejemplo anterior, el codigo de las páginas desarrolladas en tablas es por lo general más pesado que cuando se usa CSS
• Rediseñar es más sencillo con el uso de CSS que con tablas: Las tablas son más dificiles de modificar, mientras que con CSS, simplemente se puede ir modificando la hoja de estilos.
• Mover código más fácilmente con CSS: Para el posicionamiento web, es mejor tener código relevante al inicio de una página. Esto se puede lograr fácilemente con CSS, mientras que con tablas es casi imposible.
• Mejor uso de etiquetas estándares como H1s, H2s. Aunque obviamente también se pueden usar con tablas, he notado que el uso de estas estiquetas es mayor cuando un sitio web está totalmente en CSS. (Esto es solo una observación personal 🙂 )

Espero que los puntos anteriores sean útiles para resaltar las ventajas que tiene CSS con respecto al uso exesivo de tablas en el desarrollo de sitios web.