Hace algunos años era normal que la maquetación HTML de todos los sitios estuviera realizada utilizando la etiqueta table para dar forma al diseño, estructura de las diferentes secciones de un sitio web, etc… Desde hace unos años se viene utilizando en vez de esto la etiqueta div y apoyándose en estilos de archivos .css para dar cuerpo a la forma (layout) de un sitio web.
La discusión sobre cuál de las dos formas es mejor es un tema muy tratado ya en Internet, la práctica y la tendencia escogida por los principales proyectos web demuestra que lo mejor es la utilización de DIVs/CSS sobre las tablas.
Ahora bien, muchos webmasters deben dar una explicación a sus clientes sobre por qué escoger una forma u otra, incluso algunos webmasters siguen poniendo en duda las ventajas de una forma sobre otra. Adjuntamos dos enlaces sumamente útiles para hacer esta justificación:
http://css-discuss.incutio.com/?page=WhyCss
http://www.hotdesign.com/seybold/10filesize.html
El primer artículo describe en español básicamente los siguientes puntos, los cuales son contundentes en la justificación:
1. Editando un solo archivo CSS puede hacer cambios drásticos a un diseño completo en segundos.
2. CSS le permite tener un output en múltiples formatos de una forma muy sencilla
3. CSS le permite usar nombres para cada elemento de una página. Usted por ejemplo puede darle a un DIV el nombre de “Encabezado” que describe perfectamente el contenido de su HTML.
4. Los CSS externos se quedan almacenados en el cache de los navegadores por lo que se reduce el tiempo de descarga de un sitio web
5. CSS elimina código innecesario y obsoleto, por ejemplo la etiqueta font, gifs spacer, tablas encadenadas. Todo esto mejora el tiempo de carga y hace la vida del desarrollador más fácil
6. CSS permite hacer cosas más interesantes que el HTML por sí sólo no permite como un mejor control de los tipos de letra, posicionamiento absoluto, borders más elegantes, etc.
7. El buen uso de CSS mejora la accesibilidad y la lectura que tienen los motores de búsqueda sobre un sitio web.
8. El uso de :hover en CSS elimina el uso de Javascript para crear efectos de onmouseover.
9. Si quiere validación XHTML strict no le queda otro camino que usar este método.


















3 comentarios
A las 10:19 @ 30 Junio 2009,
fmorenop ha dicho...
Hola.
Es sólo una opinión pero:
El primer artículo describe en español básicamente los siguientes puntos, los cuales son contundentes en la justificación:
“1. Editando un solo archivo CSS puede hacer cambios drásticos a un diseño completo en segundos.”
-Efectivamente, tanto para divs como para tablas.
“2. CSS le permite tener un output en múltiples formatos de una forma muy sencilla”
-Creo que esto es el número uno pero con otras palabras, ¿no?
“3. CSS le permite usar nombres para cada elemento de una página. Usted por ejemplo puede darle a un DIV el nombre de ‘Encabezado’ que describe perfectamente el contenido de su HTML.”
-Pero no sólo con divs, también con tablas, recordad.
“4. Los CSS externos se quedan almacenados en el cache de los navegadores por lo que se reduce el tiempo de descarga de un sitio web”
-Ejem, los CSS, el HTML, las imágenes, los javascript, etc… (El caché es para eso, y salvo cambios en las configuraciones por defecto del browser y ficheros externos no usados, ajax, y demás ‘animalitos’ modernos, funciona con todos los elementos y ficheros de las páginas)
“5. CSS elimina código innecesario y obsoleto, por ejemplo la etiqueta font, gifs spacer, tablas encadenadas. Todo esto mejora el tiempo de carga y hace la vida del desarrollador más fácil”
-Desgraciadamente no todos los desarrolladores ‘optimizan’ su páginas. La presencia de divs y tablas anidadas en exceso y, aparentemente, sin sentido, está a la orden del día.
“6. CSS permite hacer cosas más interesantes que el HTML por sí sólo no permite como un mejor control de los tipos de letra, posicionamiento absoluto, borders más elegantes, etc.”
-Pues si, tienes toda la razón.
“7. El buen uso de CSS mejora la accesibilidad y la lectura que tienen los motores de búsqueda sobre un sitio web.”
-Estoooooo…. no, lo siento. Css no mejora nada de cara a los motores de búsqueda, de hecho motores, robots y demás posiblemente ignoran css precisamente por su naturaleza y función (la ‘presentación’ de la página).
A los buscadores y robots le interesa precisamente lo que no es css; La información y el uso o mal uso de divs y tablas puede impedir el acceso a esa información pero no por ser tablas o divs, sino por usar estos elementos mal.
“8. El uso de :hover en CSS elimina el uso de Javascript para crear efectos de onmouseover.”
-Esto es cierto pero no conozco webs en los que no se use javascript, por lo menos de menos de 10 años. (Es una forma de hablar, entendedme bien… jeje).
“9. Si quiere validación XHTML strict no le queda otro camino que usar este método.”
-Es algo que siempre me he preguntado, la utilidad de restringir el diseño y uso de elementos estandar, para obtener una validación que no me garantiza la visualización correcta en todos los navegadores y dispositivos.
Estos comentarios, entiéndase bien, son sólo opiniones pero es que, tal vez, esta entrada no tiene nada que ver con los divs vs tablas, sino con las bondades del css, que las tiene ‘a fé mía’.
¿Le gusta este comentario?
0
0
A las 19:37 @ 3 Septiembre 2009,
kriminal ha dicho...
3. CSS le permite usar nombres para cada elemento de una página. Usted por ejemplo puede darle a un DIV el nombre de ‘Encabezado’ que describe perfectamente el contenido de su HTML.”
//
//
//
//
//
esto es muy claro, pero a mi ya se me ubieran akabado los nombres,
8. El uso de :hover en CSS elimina el uso de Javascript para crear efectos de onmouseover.”
para todo lo demas se usa java.
if (swfobject.hasFlashPlayerVersion(”9.0.0″)) {
var fn = function() {
/* los kodigos son de esta pagina */
¿Le gusta este comentario?
0
0
A las 18:51 @ 4 Febrero 2010,
diseño web ha dicho...
El que continúa usando tablas para maquetar es porque o no domina o no tiene conocimientos en CSS. Para maquetar, CSS es mucho mejor, por el tema de orden, mantenimiento, accesibilidad, navegabilidad y de mil razones más.
¿Le gusta este comentario?
0
0
< Pagina principal Publicar un comentario en la entrada