Cambio de Tablas a CSS

In: Desarrollos Móviles|Posicionamiento Web

22 Jul 2009

Hace ya un tiempo publiqué una entrada sobre el efecto que tenía el uso excesivo de tablas en el diseño de un sitio web.

La maquetación de un sitio web se debe procurar hacer en CSS y no en tablas.

En un comentario, juan me pidió el favor de realizar el sitio web del ejemplo de la entrada pasada en CSS.

El sitio web era el de dosis verde, que en la época se encontraba totalmente desarrollado en tablas:

El sitio ya se encuentra totalmente desarrollado en CSS (usando wordpress como CMS)

Visualmente, el sitio se ve muy similar y no es posible notar los cambios de pasar de tablas a CSS.

dosis-verde-css

Pero voy a utilizar una barra para firefox llamada “web developer” que permite ver un sitio web sin hojas de estilos. De esta forma es más claro observar cómo vería (masomenos) un motor de búsqueda el sitio web (habría que deshabilitar javascript para emular aún más la visita de un motor de búqueda a un sitio web)

dosis-verde-web-dev

Al instalar la barra “web developer” se pueden ir al menú que dice CSS, luego Deshabilitar Estilos y finalmente dan click donde dice “Todos los estilos”.

dosis-verde-sin-css

Se puede ver que el código está totalmente en CSS, se pueden identificar elementos claros de HTML como encabezados y listas.

En general se presenta un código muchísimo más limpio a los motores de búsqueda.

Adicionalmente con CSS es más fácil realizar cambios sobre la parte visual de un sitio, pues simplemente se edita un archivo .css, se cambian unas propiedades y listo. Mientras que un sitio web que haya utilizado tablas es mucho más rígido, y cualquier cambio puede tomar mucho tiempo y recursos.

4 Comentarios en Cambio de Tablas a CSS

Avatar

desarrollo web

July 22nd, 2009 at 9:39 pm

Totalmente de acuerdo, el paso de la maquetación con tablas a la CSS es imprescindible para poder realizar un sitio accesible y usable, todo esto a su vez beneficia en la estructuración del código fuente y facilita la indexación a los buscadores.

Un saludo,
Alejandro Arco

Avatar

anRoswell

October 2nd, 2009 at 4:09 pm

Pero…. y como se hace???

Avatar

IngVillamizar

October 5th, 2009 at 6:03 pm

@anRoswell: Bueno, el proceso como tal de pasar a CSS se trata de que crees la misma maquetación que tenías con una tabla, pero usando divs, y estilos CSS.

Por ejemplo, en vez de crear 8 celdas para poner un menú vertical, simplemente pones una lista ordenada en html con los estilos respectivos para que se vea igual que como se tenía en una tabla.

La ventaja de hacer esto, es que el código va a ser mucho más limpio, realizar cambios es mucho más sencillo, la relación del código de la página frente al contenido va a ser muchísimo mejor, etc.

Con un poco de trabajo, y conocimientos básicos de CSS podrás pasar una maquetación en tablas a CSS sin problemas.

Avatar

paco

February 8th, 2010 at 12:10 am

Hola
Desde que cambie alguna d emis webs de tablas a css , no tengo problemas con los distintos navegadores.
eso si , siempre quedan algunas cosillas que Internet Explorer no ve bien , pero con microsoft ya se sabe…
Normalmente creo dos css para el mismo sitio de tal manera que en funcion del navegador que llega , se activa un css o el otro especialmente pensado para IExplorer.
Las diferencias tampoco son tantas.
Sin embargo , cuando utilizaba tablas ( aun tengo alguna web con ellas ) en firefox se ven de pena , porque se pensaba antes al diseñar solo en IE.
Saludos

Comentarios:

Suscripcion a Newsletter:

Sobre este blog ...

He abierto este blog para brindar información sobre desarrollo y diseño web principalmente. Espero que la información que les presente aquí les sea útil de alguna forma. Ah tengo cuenta de twitter en @alexanderv33