El porqué de no utilizar tablas

25/ago/2006 35

Este debería de haber sido el primer post de CSSLab, como antes tarde que nunca, traduzco y transcribo 11 misivas que explican porqué no deberías de utilizar tablas para diagramar un sitio. Comencemos:

1. Porque utilizar tablas es una estupidez: Las tablas existen en HTML por un motivo: mostrar datos tabulados. Pero con la disponibilidad del border="0", se hizo posible para los diseñadores tener grillas para contener su diseño. Aún hoy es la forma más común de diagramar y armar sitios.

2. Convenciendo al jefe / cliente: Algunos buenos motivos para trabajar con web standards:

  • sus sitios se cargarán más rápido
  • los costos de hosting se reducirán con sitios más livianos
  • los rediseños de sitios serán más eficientes y baratos
  • será más fácil mantener una consistencia visual entre todas las páginas del sitio
  • mejores resultados en buscadores
  • su sitio será más accesible para todos los browsers

3. Asesinos: nested tables y spacers: Al principio fueron meras recomendaciones para trabajar ciertas limitaciones de los browsers existentes, y como trabajaban con las especificaciones de la W3C de la época (1995-1997…. Netxcape 2, 3). El problema es que estas recomendaciones aún persisten, cuando los standards han evolucionado bastante. Muchos diseñadores van por el camino facilista de armar sitios web. El problema del uso de tablas:

  • mezclan contenido con formato (dejando el peso de los archivos innecesariamente grandes, cargando los mismos datos d diagramación en cada página que visitan).
  • el ancho de banda no es gratis…
  • hacen el rediseño lento y caro.
  • no hacen el sitio accesible para, por ejemplo, móviles, PDA’s y menos aún discapacitados visuales.

Por suerte esto ya está solucionado, los browsers modernos están mucho mejores para renderizar web standards, y pronto esperamos extinguir estos métodos arcaicos de diseño web. Ya no más meter tablas dentro de tablas, llenar celdas vacías con GIF transparentes de 1 pixel…..

4. CSS y la separación del estilo gráfico: Utilizando hojas de estilos podemos ahora separar el contenido del estilo gráfico, lo que nos permite:

  • rediseños más baratos y rápidos: basta con modificar una hoja de estilo para todo el sitio ver los cambios inmediatos.
  • se reduce en ancho de banda utilizado para visualizar el sitio. El CSS que controla el layout se queda en el cache del browser.
  • es más fácil mantener la consistencia visual del sitio: todas las páginas utilizan la misma familia tipográfica, tamaño de textos, colores, posición de elementos, lo que a la larga fortalece la marca y deja el sitio más usable.
  • dejas tu sitio accesible, independiente del dispositivo que lo despliega.
  • minimizando el código y utilizando correctamente los tags de texto (H1, H2, P, etc) ayudan a mejorar tu ranking en los buscadores.

5. Aún puedes seguir utilizando tablas: pero no uses tantas. Puedes darles formatos con CSS, y no uses más spacers!

6. Cambiando la forma en que piensas: Esto es probablemente lo que hace más reticentes al cambio a la mayoría de los diseñadores. Algo nuevo, con código, difícil de digerir. Diagramar con CSS requiere una nueva forma de pensar, ahora orientado a la información: títulos con H1, subtítulos con H2, etc. En vez de contener tu texto en una celda, conténla en un DIV. Dale a ese DIV un ID (identificador único) o un CLASS que describirá el contenido en función de la apariencia o posición.

7. Evita <b> y <br>: Lo que quieres decir, claro, tiene significado. Si es importante, <strong> (bold). Si quieres hacer énfasis <em> (itálica). <br> aún es soportado de modo transicional, pero ha sigo corregido: <br />. Esto porque según la regla, todos los tags deben de abrir y cerrarse. (<em></em>). Como <br /> hace de punto aparte, se abre en sí misma. Por ese el /; y no es el único tag que funciona de esta manera. Puedes utilizar CSS para hacer lo mismo:

.aparte {display:block;}

8. Menuliza con UL y LI’s: Menúes son meras listas de links. Entonces, utiliza UL para contenerlos, horizontal o verticalmente.

9. Más de una manera para hacer lo mismo: con CSS puedes llegar a la misma solución a cierto diseño de diferentes maneras, impulsando la creatividad. Haz la prueba, pregúntale a otra persona cómo posicionaría un elemento respecto a otro, o cómo diagramaría un menú con ancho elástico.

10. Migrando de tables a tableless: No es un camino fácil, pero es gratificante ciertamente.

  • Primero que nada, debes rediseñar el contenido del sitio. Ya que si vamos a meter mano, hagámoslo bien.
  • A continuación, deberás despedazar el sitio: encabezado, navegación principal, subnavegación, contenido, información adicional, etc.
  • Limpiemos la casa: chao todos esos <font> y spacers. También adiós <b>, <bgcolor, background>, <center>.
  • Elige un DOCTYPE de acuerdo con lo que estás construyendo. Transitional es lo recomendado aún, pero no está lejos el día en que todos debamos de utilizar Strict.
  • Divide tu sitio en DIV‘s lógicos; utiliza nombres descriptivos de acuerdo al contenido, no al estilo gráfico (por ejemplo: #menu, #contenido y no #menuderecha o #textorojo).
  • Prueba, prueba, prueba! En los browsers y plataformas más variados. Sólo así lograrás llegar bien a todos tus visitantes, y posibles futuros clientes.

11. Nunca dejarás de aprender: es un interesante mundo, el que difícilmente dejarás de seguir aprendiendo nuevas técnicas. Aprende, y aprende de los mejores.

Comentarios

  1. Alexi [#]

    Grandes aportes compa = sirve de arto cuando uno se lanza y llega al punto en que dice “que puse mal” después de mil revisiones uno pasa por estos lados y entiende que estaba mal jajaja

  2. CSSLab Admin [#]

    gracias por los elogios, he estado muchas veces en esoso mismos problemas… la idea es aportar a una mejor internet.

    saludos.

  3. Lo mejor de la semana - aNieto2K [#]

    […] ¿Por que no usar tablas? Por que no! […]

  4. dobled [#]

    Felicitacion por este post, en general todos los encuentro buenos.
    Mira con este post he meditado y empezare a realizar mi primer site en CSS puro sin tablas ni nada. Ahi les cuento como me va.

    Saludos y Muy buen Post

  5. eruntale [#]

    Hola, muy revelador el post, estoy estudiando DreamWeaver en un instituto y estamos diagramando sitios web con tablas, el mismo profesor dice que es por la falta del tiempo pero definitivamente la voz es usar puro CSS, aunque las etiquetas me marean mucho. En fin, tu post es una gran motivación. Te escribo también para contarte que me ha gustado mucho tu blog y por ello te he incluido entre los 5 blogs que recomiendo en el BLOGDAY 2006. Felicitaciones por el blog, y que sigan los éxitos! Un abrazo, Johana Cevallos.

  6. CSSLab Admin [#]

    Gracias por los elogios Johana, dile a tu profe q lea ete post y q no siempre el camino facil es el mejor. Es algo con lo q he peleado mucho en la educacion, y lo q tb he comentado ya en un post anterior ( http://www.csslab.cl/?p=58 ). Saludos y gracias nuevamente.

  7. geniusluis [#]

    Muchisimas gracias, dices en 3 palabras lo que algunos maestros se tardan todo un semestre en decir en la U ( y bueno mas barato, jeje) saludos de Colombia y gracias por esa premisa la de compartir el conocimiento, asi si vale.

  8. cazorla [#]

    Este post iba con nombre….

  9. CSSLab Admin [#]

    carlos si era para ti. para de diagramar con tablas. no puedes estar tan aburrido como para leer este blog.

  10. oliverastro [#]

    gracias por las indicaciones, ya que estoy recien empezando en esto de las CSS, y fijarme a la norma

  11. Pancho [#]

    Tus palabras me motivan muchísimo, ya que soy bastante principiante en esto del css, y me frustra el no lograr lo que quiero e cuanto a diagramación.
    de hecho, llegué acá buscando algunos consejos para diagramar.

    Saludos, intentaré propagar tus motivos a mis compañeros de universidad, que no logran entender el por qué yo quiero aprender css.

    Adiós

  12. fexnok [#]

    Hola desde hace rato uso CSS pero ni idea como salirme de las tablas :(
    En este momento tengo una página con varias tablas, de 2 columnas y 10 filas en promedio, de 80% de ancho de la página. El contenido de la primera columna alineado hacia la izquierda y la segunda alineado hacia la derecha, cómo reorganizo todo esto sin tablas??

    Gracias por tu ayuda y felicitaciones por el artículo.

  13. CSSLab Admin [#]

    fexnok, diagramar y estructurar un sitio en CSS no es algo trivial. Como lo he propuesto, debe existir un cambio en el paradigma del diseñador de dejar de hacer algo fácil (diagramar con tablas) a hacer las cosas bien, más demorado y con sentido global (a ti te sirve, al cliente tb y a toda la comunidad web q busca por informacion). quizas el primer post de este sitio, q ya esta por cumplir 1 añito, te pueda servir. Creo q es necesario otro articulo q explique mas a fondo la diagramacion tableless.

    Saludos y gracias por plantear tu inquietud.

  14. 123mediaweb.cl » Blog Archive » Galerías CSS: inspiración y belleza cumpliendo los estándares [#]

    […] La separación entre estilo y contenido resulta fundamental en la construcción de páginas hoy en día: llevamos ya diez años con CSS. Las hojas de estilo en cascada son las que nos ayudan a maquetar (conviene recordar que las tablas NO se usan para maquetar, sino para hacer tablas), y se pueden llegar a componer verdaderas joyas visuales con CSS. […]

  15. Jose [#]

    gracias por la información facilitada, muy clara y directa
    saludos

  16. Galerías CSS: inspiración y belleza cumpliendo los estándares [#]

    […] La separación entre estilo y contenido resulta fundamental en la construcción de páginas hoy en día: llevamos ya diez años con CSS. Las hojas de estilo en cascada son las que nos ayudan a maquetar (conviene recordar que las tablas NO se usan para maquetar, sino para hacer tablas), y se pueden llegar a componer verdaderas joyas visuales con CSS. […]

  17. Total Validator at JuicyOrange [#]

    […] Links Relacionados: TotalValidatorW3CEl por qué de no utilizar tablas […]

  18. CSSLab » Selectores avanzados de atributos [#]

    […] Artículos con tags similares Texto auxiliar con estilomenúes y la class .selectedLo ví y me gustó 17¡Aaaaabajo!estilos de botones crossbrowserCentrando Horizontalmente (a prueba de IE)+ bordes redondosDiseño para móviles: referenciaColumnas de igual altoSEO y la web semánticaTransparencias a prueba de browsersCentrado Vertical con CSS (actualizado)Más estilos a las listasEvangelizandoFormularios Semánticos: el regresoCSS en Flash: sólida parejaDiseño a oscurasEl contorno de la discordiaNuevo sitio, nuevos métodos.clearfix: el widgetAgregando movimiento vía JavaScriptLo ví y me gustó 18Ahorrando hasta en códigoRecursos GráficosCargando imágenes con CSSLightbox + SWFLayout Fijo: resucitando los framesEl porqué de no utilizar tablasBordes redondos crossbrowserFlotando en la incertidumbre […]

  19. Jatem [#]

    Esta muy bueno el post y la pagina en general làstima no haberla conocido ants …Es una muy buena guia para principiantes como yo…

  20. Criss [#]

    gracias por darno a entender tantas cosas de este mundo css, me enccanta jugar con ella, en los myspace la uso y el cambio que sucede, bueno asi aprendo…
    saludos
    criss

  21. Tablas con CSS — CSS — Freak Group — Diseño web, recursos y mucho más [#]

    […] los archivos necesarios haciendo clic aquí. También pueden obtener más información acerda de el uso correcto de las tablas en CSSLab. « Open Web Awards: “Applications and Widgets” No hay comantarios […]

  22. DotNetNuke Olé» Blog Archive » Por que utilizar divs en DotNetNuke. [#]

    […] punto, ya que solo por ello no deberíamos usar tablas en nuestros skins de dnn , tenéis aquí en csslab un buen articulo de por qué no se debería maquetar con […]

  23. david lopez aguilar [#]

    por q no utilisais las tablas asi podeis hacer los deveres sin agoviara nuestros padres

  24. Marcos García [#]

    Siento decir que hay cosas aquí incorrectas, es una forma inválida sólo permitida en XHTML.

  25. Marcos García [#]

    parece que el filtro hace de las suyas, me refería al tag “”

  26. manuelmayorquin [#]

    Increible que este post siga siendo de utilidad para la comunidad de beginners .. y mas todavia para nosotros los que somos 100% oldschool. Buenisimo tu blog. Saludos desde Mexico.

  27. fernado [#]

    Muy buen articulo. Que algo tenga vigencia al hablar de web despues de tres años es visionario. Claro tiene que ver con que tambien somos varios los que llegamos tarde a algunas conversaciones.

  28. Dennis [#]

    muchas gracias por este post, como cuesta quitarse las tablas de la cabeza en serio!! muchas gracias otra vez!! voy a leerme esta web completa.

    saludos desde Costa Rica

  29. Porque no usar tablas | Blog Siften.com [#]

    […] Este post esta genial, lo he sacado de csslab y nos explica claramente por que no usar […]

  30. jairo [#]

    facil si te gusta joomla dreamweaver todo eso bien elije div. si eres un experto usas loq ue quieres en mi caso uso tablas al fin al cabo el resultado es el mismo yo controlo eso

  31. pepe [#]

    Es Estandar no standarts animal
    -2. Convenciendo al jefe / cliente: Algunos buenos motivos para trabajar con guebs standarts:
    lo repites varias veces… corrije

  32. stramin [#]

    Sinceramente no encontré ninguna de las razones validas, muchas de los puntos expuesto ni si quiera tienen relación con el tema, sino que habla de por que usar CSS en general.

    Tal como has puesto 11 razones para no usar tablas yo te puedo dar 16 razones para si usarlas:
    1.- es más fácil diagramar una tabla de datos con tablas ya que ya tiene la estructura.
    2.- es más corto usar que escribir o , por lo que el archivo html pesa menos (y el ultimo ejemplo tambien hace el css más grande).
    3.- html tiene muchas herramientas para lograr lo que queremos, pero en vez de usarlo muchos prefieren usar para todo y agregarle un estilo, esto es menos eficiente y fomenta la pereza mental.
    4.- los div no reconocen la altura 100%, solo las tablas tienen esta particularidad, lo que permite diagramar sitios que se adapten a la altura de la ventana.
    5.- es más rápido para el navegador hacer la búsqueda de regla de estilos por elementos distintos, que en clases distintas de un mismo elemento ya que debe hacer más de una busqueda, hay que saber usar cada etiqueta cuando sea necesario.
    6.- Para un navegador es más facil reconocer la estructura de tablas que la de elementos flotantes o en linea de divs.
    7.- Una tabla se carga al instante ya que no necesita esperar a que se lea la hoja de estilo para verse como debe, y si la hoja de estilo por alguna razón no carga el sitio queda despedazado.
    8.- algunos dicen que escribir varios divs es más “semántico”, no se que entenderán por semántico pero para mi esto: unodostres, me parece mucho menos semantico que esto unodostres (además de más largo)
    9.- ahora veamos el css, lo mismo, tendrás que hacer las siguientes reglas: div.container{ display:table;border:1px; }, div.elemento{ display:table-cell;color:#F00; }, mientras que usando tablas logras el mismo resultado con esto table{ border:1px; }, td{ color:#F00; }.
    10.- algunos en su intento de evitar usar tablas usan con estilos para darle forma de tabla, tal como se ve en el footer de esta página, creo que no tiene sentido, consumir más tiempo de procesador del cliente leyendo las reglas de estilo y más ram por incluir más caracteres en el html y css para lograr exactamente el mismo resultado, exactamente el mismo.
    11.- Si quieres tener un panel lateral y un panel de contenidos y que ambos paneles tengan el mismo alto dependiendo del largo de contenidos no puedes hacerlo con divs
    12.- Las tablas tienen un contenido semantico mas amplio usando thead, tbody, tfoot,tr,th,td, entre otros.
    13.- no requiere overflow hidden para que sus contenidos no desborden
    14.- no requiere display para anidar distintos paneles
    15.- no requiere position relative para entender que width/height 100% implica ocupar el 100% del tamaño disponible, y no el 100% de la pantalla.
    16.- no requiere clear:both; para hacer una nueva fila
    17.- si tienes más de una columna con divs y uno de los contenidos es más largo las demás columnas no se ajustarán, mientras que en tablas tanto filas como columnas se ajustan al contenido haciendo que nada quede descuadrado.
    18.- no puedes maquetear una página como esta con divs sin usar display:table: http://jsfiddle.net/TzF8p/

  33. stramin [#]

    En el comentario anterior todas las etiquetas HTML que puse desaparecieron, aqui va de nuevo:

    Sinceramente no encontré ninguna de las razones validas, muchas de los puntos expuesto ni si quiera tienen relación con el tema, sino que habla de por que usar CSS en general.

    Tal como has puesto 11 razones para no usar tablas yo te puedo dar 16 razones para si usarlas:
    1.- es más fácil diagramar una tabla de datos con tablas ya que ya tiene la estructura.
    2.- es más corto usar <tr> que escribir <div style="display:table-column"> o <div class="columna">, por lo que el archivo html pesa menos (y el ultimo ejemplo tambien hace el css más grande).
    3.- html tiene muchas herramientas para lograr lo que queremos, pero en vez de usarlo muchos prefieren usar <div> para todo y agregarle un estilo, esto es menos eficiente y fomenta la pereza mental.
    4.- los div no reconocen la altura 100%, solo las tablas tienen esta particularidad, lo que permite diagramar sitios que se adapten a la altura de la ventana.
    5.- es más rápido para el navegador hacer la búsqueda de regla de estilos por elementos distintos, que en clases distintas de un mismo elemento ya que debe hacer más de una busqueda, hay que saber usar cada etiqueta cuando sea necesario.
    6.- Para un navegador es más facil reconocer la estructura de tablas que la de elementos flotantes o en linea de divs.
    7.- Una tabla se carga al instante ya que no necesita esperar a que se lea la hoja de estilo para verse como debe, y si la hoja de estilo por alguna razón no carga el sitio queda despedazado.
    8.- algunos dicen que escribir varios divs es más "semántico", no se que entenderán por semántico pero para mi esto: <div class="container"><div class "panel"><div class="elemento">uno</div><div class="elemento">dos</div><div class="elemento">tres</div></div></div>, me parece mucho menos semantico que esto <table><tr><td>uno</td><td>dos</td>tres<td></td></tr></table> (además de más largo)
    9.- ahora veamos el css, lo mismo, tendrás que hacer las siguientes reglas: div.container{ display:table;border:1px; }, div.elemento{ display:table-cell;color:#F00; }, mientras que usando tablas logras el mismo resultado con esto table{ border:1px; }, td{ color:#F00; }.
    10.- algunos en su intento de evitar usar tablas usan <ul><li> con estilos para darle forma de tabla, tal como se ve en el footer de esta página, creo que no tiene sentido, consumir más tiempo de procesador del cliente leyendo las reglas de estilo y más ram por incluir más caracteres en el html y css para lograr exactamente el mismo resultado, exactamente el mismo.
    11.- Si quieres tener un panel lateral y un panel de contenidos y que ambos paneles tengan el mismo alto dependiendo del largo de contenidos no puedes hacerlo con divs
    12.- Las tablas tienen un contenido semantico mas amplio usando thead, tbody, tfoot,tr,th,td, entre otros.
    13.- no requiere overflow hidden para que sus contenidos no desborden
    14.- no requiere display para anidar distintos paneles
    15.- no requiere position relative para entender que width/height 100% implica ocupar el 100% del tamaño disponible, y no el 100% de la pantalla.
    16.- no requiere clear:both; para hacer una nueva fila
    17.- si tienes más de una columna con divs y uno de los contenidos es más largo las demás columnas no se ajustarán, mientras que en tablas tanto filas como columnas se ajustan al contenido haciendo que nada quede descuadrado.
    18.- no puedes maquetear una página como esta con divs sin usar display:table: http://jsfiddle.net/TzF8p/

    • sysbot [#]

      Es increible encontrar un comentario así, por favor lee e infórmate un poco más. No te vendría mal. Existe algo llamado estándares web, donde no recomiendan su uso simplemtente porque no se crearon para ello. En varios de tus puntos estas TOTALMENTE EQUIVOCADO (no tiene sentido nombrarlos, son la mayoría). Por lo visto te quedaste en el pasado y tu cabeza no te da para comprender nuevas formas de trabajar (html + css). Separando el contenido de la presentación.
      Hace más de diez años de trabajaba así, porque no había otra, pero vuelvo a repetir, estas muy equivocado.
      Saludos.

      PD: te invito a visitar esta página, donde hay algunos diseños “un poco buenos” (claro, si tablas!)

      http://www.mezzoblue.com/zengarden/alldesigns/

      • JD [#]

        Esperaba encontrar verdaderas razones para dejar de usar tablas totalmente, pero es el mero capricho y estupidez lo que se expone aquí, empezando como dice la primera razon, ¨porque es una estupidez¨ los div no son mas livianos y si lo son, realmente no afectan a la carga de la página, si no, como habríamos hecho 10 años atras para diseñar con conexiones lentas de 56k, los sitios cargaban bien e incluso Flash cargaba de forma aceptable y no teniamos más, por favor quieren modas, debería dedicarse a la costura.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab