El porqué de no utilizar tablas

25/Ago/2006 1070

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. jordan shoes [#]

    I intended to send you one little word in order to give many thanks as before with the unique methods you have provided above. This has been particularly open-handed of you giving publicly what exactly many of us would’ve sold for an e-book to generate some cash for themselves, primarily now that you could have done it in the event you wanted. These tactics likewise acted like a good way to realize that other people have a similar eagerness really like my own to see more and more with regard to this issue. I’m certain there are many more enjoyable opportunities in the future for individuals who scan through your blog post.

  2. steph curry shoes [#]

    I just wanted to construct a quick comment so as to appreciate you for some of the stunning tactics you are giving on this website. My extensive internet research has finally been compensated with wonderful know-how to go over with my relatives. I would admit that we site visitors actually are very lucky to live in a great website with very many lovely people with insightful tactics. I feel really privileged to have used the web pages and look forward to really more cool minutes reading here. Thanks again for a lot of things.

  3. kd 12 [#]

    I have to express some appreciation to the writer for bailing me out of this type of dilemma. Right after surfing around through the the net and seeing views that were not productive, I assumed my life was gone. Living minus the solutions to the problems you’ve fixed as a result of your site is a critical case, and ones that would have negatively affected my career if I had not encountered your web site. Your actual ability and kindness in controlling a lot of stuff was helpful. I’m not sure what I would’ve done if I hadn’t encountered such a step like this. I am able to at this point look ahead to my future. Thanks for your time very much for the reliable and result oriented help. I will not hesitate to suggest your web site to anybody who desires guide on this problem.

  4. golden goose [#]

    I not to mention my guys were actually taking note of the excellent hints from your website and before long got a horrible feeling I had not expressed respect to you for those techniques. These young boys happened to be for this reason warmed to learn them and already have clearly been having fun with those things. Appreciate your getting considerably considerate and for deciding on this sort of good issues millions of individuals are really wanting to know about. My personal sincere apologies for not saying thanks to sooner.

  5. jordan shoes [#]

    I simply wished to thank you so much all over again. I’m not certain what I could possibly have created without the actual thoughts revealed by you about such a topic. It seemed to be a very daunting condition in my opinion, nevertheless taking a look at the specialized approach you dealt with the issue forced me to cry for happiness. Now i am thankful for the assistance and as well , hope you are aware of a powerful job you’re putting in training the mediocre ones using your webpage. I am sure you have never encountered all of us.

  6. lebron james shoes [#]

    I would like to express some appreciation to you just for bailing me out of this type of incident. After researching throughout the online world and getting views which are not powerful, I believed my life was done. Being alive without the answers to the problems you’ve fixed by way of your good guideline is a serious case, as well as those that would have adversely damaged my entire career if I had not come across your site. Your main capability and kindness in taking care of all the pieces was very helpful. I’m not sure what I would’ve done if I hadn’t come upon such a stuff like this. I can also now look ahead to my future. Thanks so much for the professional and amazing help. I won’t hesitate to endorse the blog to any person who would need support on this problem.

  7. birkin bag [#]

    I wanted to send you the bit of word to finally say thank you again on the pleasing opinions you have documented above. It has been particularly open-handed with you giving freely what exactly some people could have distributed as an e-book to earn some money for themselves, mostly given that you might have done it in the event you considered necessary. Those strategies in addition acted as a great way to be certain that the rest have the same keenness really like mine to realize good deal more in terms of this matter. I’m sure there are numerous more pleasurable instances in the future for folks who go through your blog.

  8. lebron shoes [#]

    I wish to express thanks to the writer for rescuing me from this type of condition. Just after checking throughout the the net and coming across thoughts which are not beneficial, I figured my life was done. Being alive devoid of the solutions to the problems you have resolved by way of your article content is a critical case, and the kind which might have adversely damaged my career if I hadn’t encountered your web site. Your actual understanding and kindness in maneuvering all the stuff was priceless. I’m not sure what I would have done if I had not come upon such a stuff like this. I can also at this moment relish my future. Thanks for your time so much for your reliable and amazing guide. I will not be reluctant to endorse the website to anyone who will need care on this matter.

  9. stromectol [#]

    General Dope Here this product
    https://ivermectinstrom.com ivermectin for sale
    https://stromectolivermect.com ivermectin for humans pills 12 mg
    https://ivermectinsts.com ivermectin tablets for humans
    https://ivermectinstrom.com ivermectin 6 mg
    https://ivermectinsts.com ivermectin 6 mg

  10. ivermectin for humans [#]

    stromectol medication https://stromectolforte.com/# stromectol online stromectol for humans

  11. ivermectin 12 mg [#]

    Non-specific Dope Far this by-product
    https://ivermectinst.com stromectol
    https://ivermectstromect.com ivermectin 6 mg
    https://ivermectstromect.com ivermectin for sale for humans
    https://stromectolivermect.com ivermectin tablets for humans
    https://stromectolivermect.com ivermectin tablets

  12. Teoblabs [#]

    buy tadalafil mexico online

  13. ivermectin tablets for sale [#]

    General Low-down About this offshoot
    https://ivermectinst.com ivermectin over the counter
    https://ivermectstromect.com ivermectin 3 mg
    https://stromectolivermect.com ivermectin for humans
    https://ivermectstromect.com ivermectin for humans
    https://ivermectinsts.com ivermectin 6 mg

  14. GaloInvake [#]

    buy zithromax at walgreens

  15. ivermectin 12 mg [#]

    Accustomed Dope About this offshoot
    https://ivermectinsts.com ivermectin 6 mg
    https://ivermectinst.com stromectol
    https://stromectolivermect.com ivermectin for sale for humans
    https://ivermectinstrom.com ivermectin over the counter
    https://stromectolivermect.com ivermectin for humans

  16. ivermectin 12 mg [#]

    Accustomed Information Fro this outcome
    https://ivermectinstrom.com ivermectin 12 mg
    https://ivermectinsts.com ivermectin over the counter
    https://ivermectinsts.com stromectol
    https://ivermectinsts.com ivermectin tablets
    https://ivermectstromect.com ivermectin 12 mg

  17. GustavoVet [#]

    best online essay writing service
    order essay

  18. what to write college essay about [#]

    help writing college essays https://online2casino.com/

CSSLab