1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

tablas antiguasimagen de Ecainj

5 razones para no usar tablas en tu HTML

Antes que nada quiero decir que las tablas tienen una función muy importante en en HTML, sirven para mostrar información tabular.

Pero hay algo para lo que las tablas NO fueron creadas.

NO fueron creadas para darle forma al diseño de una página web.

Así que eres bienvenido a usar tablas para mostrar datos tabulares, pero si estás usándolas o piensas convencer a alguien de no usarlas...

Estas son las 5 razones

1. Porque el CSS es más flexible y te da muchas más posibilidades.

Sí, con CSS puedes hacer cosas increíbles que no podrías lograr usando tablas, si tienes algún amigo que aún use tablas, sólo pregúntale cuanto tiempo demoraría en cambiar 2 o 3 elementos de posición.

¿Notaste que dije: que aún use tablas?... eso nos lleva al punto 2.

2. Usar tablas para la presentación de un sitio es tan de los 90's

Si quieres ser un buen diseñador web, no puedes permitir que nadie diga que está bien usar tablas para hacer el layout de un sitio.

Si alguien dice que es imposible hacerlo sin tablas, simplemente no sabe suficiente CSS.

3. ¿Te interesa que tus páginas carguen rápidamente?

Si es así, te cuento que usar tablas para la hacer el diseño de la página hace que tu archivo HTML pese bastante más.

Por otro lado los archivos de CSS se quedan en el caché del navegador, esto hace que se consuma menos ancho de banda y tus páginas cargarán mucho más rápido.

4. Porque un código HTML bien hecho (sin tablas para el layout) hace tus páginas más amigables para los buscadores como Google.

Sí, te ayudará a tener un mejor ranking en los resultados de búsqueda, ¡piensa en todo el tráfico que puedes recibir! ¿porque tus páginas cargan rápidamente no?

5. ¡Porque la misma persona que ideó el layout en base a tablas lo dice!

Sí, David Siegel lo dice en su articulo The Web is Ruined and I Ruined it "La web está arruinada y yo la arruiné". de Octubre de 1997!

Si esto no fue suficiente, aquí les dejo el link a un post muy divertido: sobre por que diseñar con tablas es estúpido, si prefieren pueden ver la versión original (en inglés).

Es un artículo muy gráfico y gracioso, se los recomiendo!

Etiquetas:

Comentarios

deja un comentario

  1. Avatar de Noe Noe

    Pues para mí los CSS son un infierno, era mucho más fácil cuando podías usar las tablas...

    Estoy acostumbrada a programar en lenguajes de verdad (Java, C++, C, etc...) así que para mí el caos y el desorden del CSS y el HTML me trae de cabeza.

    Podrían normalizar este tipo de "código" por llamarlo de alguna manera.

    Es muy difícil centrar cosas con los divs y los css, es todo super raro y complejo, y luego hace lo que le da la gana, y para colmo, nunca funcionara en el maldito internet explorer!! Eso va en contra de toda mentalidad de ingeniería, parece un protocolo definido por una panda de monos.

  2. Avatar de Buy Cialis Buy Cialis

    en serio usar tablas es una forma obsoleta de programar tienes otras opciones!!

  3. Avatar de stramin 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 5 razones para no usar tablas yo te puedo dar 18 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/

  4. Avatar de Germán Germán

    Hola Stramin, en realidad me mantengo en lo que dije el 2008 (sí, hace más de 5 años).

    Te recomiendo que busques un poco de información sobre HTML y semántica.

  5. Avatar de Andres Andres

    Siempre se dice que es mejor no usar tablas, pero veo aplicaciones como gmail de google que usan tablas. Igualmente siempre las evito, pero si tengo alinear muchas columnas por filas si las uso.
    Saludos

  6. Avatar de Oscar Fiblas Oscar Fiblas

    ¡Toda la razón a Stramin! ¡Vivan las tablas!

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910