JMiur [E]

"Desde que en 1998 las recomendaciones del recientemente creado CSS2 hablaban de ello, el uso de tablas en las páginas web fue cayendo en el olvido y los sitios basados en CSS se transformaron en un sinónimo de elegancia y buen diseño."

Tablas. Malditas tablas. La cultura geek odia las tablas. Son ... como el Judas Iscariote del HTML. Hay que alejarse de ellas lo más posible. Las tablas, dicen, sólo hay que usarlas para ... hacer tablas ...

Claro, el hecho de que la mayoría de los sitios más visitados usen tablas parece que es un pequeño detalle. Google usa tablas y tan mal no le va. Y no las usa ahora que puede darse el lujo de hacer cualquier cosa, las usó siempre. GMail usa tablas; Yahoo usa tablas, YouTube usa tablas, Twitter usa tablas, casi todos los gadgets usan tablas. Parecería entonces que las verdades absolutas y la realidad van por caminos diferentes (como siempre).

Lo elemental sería aclarar algo antes que alguien grite.

No hay etiquetas buenas y etiquetas malas porque no hay codigos "buenos" y códigos "malos". Tampoco hay etiquetas prohibidas porque de existir tal cosa, simplemente, se hubiera eliminado de los navegadores; sin embargo, siguen allí, las usemos o no y algunas ya tienen muchisimos años de existencia.

Pero ¿por qué esos sitios usan tablas?

No sé, tal vez, porque quienes los desarrollaron no saben otra cosa, tal vez porque les resulta cómodo y tal vez, porque a veces es más sencillo. Sea como sea, cualquiera de esas reazones o cualquier otra es tan válida como la contraria porque una herramienta es tan buena o mala como quien la utiliza y el diseño web debería estar mucho más allá de estos pseudo-pecados.

Salvo algún detalle gráfico que podrían solucionarse ¿qué diferencia hay entre estos dos enlaces que no llevan a ninguna parte?:

PSEUDO-ENLACE


A menos que se mire el código fuente, no habrá gran diferencia. Ambos se ven bien (o mal); ambos cumplen su función (ninguna en este caso); ambos serán indexados ¿Cuál de ellos es el que tiene el estigma de ser una tabla?

Parece obvio pero, en realidad, las páginas web son eso, se ven, funcionan, se encuentra lo que uno buscaba o no, nos resultan agradables o no, listo, no importa mucho más porque para eso están.

Filosofía al margen: ¿hay que usar tablas? La respuesta es ... depende, en todo caso ¿para qué usar una tabla? Y bueno, porque a veces, es mucho más sencillo hacer algo de ese modo que de otro y eso, no es ni malo, ni bueno.

Por ejemplo, quiero centrar una imagen tanto horizontal como verticalmente en un rectángulo que tenga un borde y un color de fondo, si sólo es una imagen es sencillo, necesito conocer el ancho:
<div style="background-color: #135; border: 1px solid #68A; margin: 10px auto; padding:10px; text-align:center; width:236px;">
<img src="MI_IMAGEN" />
</div>


Pero, si tengo tres imágenes de diferente tamaño y las quiero poner, una al lado de la otra, las cosas se me complican y para centrarlas verticalmente deberé recurrir a alguna clase de truco que implica crear más DIVs hacer cácullos, usar márgenes negativos, todo eso implica una larga cantidad de CSS. Para colmo, si quisiera cambiar una de ellas, debería empezar otra vez:


Ni lo intento. Obviamente, es mucho más sencilo colocarlas en una tabla donde con un par de atributos, las centro sin problemas:
<table style="background-color: #135; border: 1px solid #68A; margin: 10px auto; padding:10px;">
<tr>
<td><img src="IMAGEN_1" /></td>
<td><img src="IMAGEN_2" /></td>
<td><img src="IMAGEN_3" /></td>
</tr>
</table>


Y no, no es el diablito el que me lo sugiere, es el sentido común ¿para qué me voy a complicar la vida? El código usado es válido, es sintácticamente correcto, el resultado es el que quería, funciona, se ve bien ¿puedo pedir más?

¿Esto significa que hay que usar tablas siempre? No, claro que no, ese sería el mismo error que no usarlas. Lo que esto significa es que hay que usarlas cuando nos parezcan útiles.

MÁS INFORMACIÓN: Malditas Tablas 1 | 2 | 3 | 4 | 5

33 comentarios:

Argifauve  

Uuuuuuuuu.. momento...
aca el defensor de porbres y ausentes :)

- Por qué malditas tablas ?

- Si ya se que es hipotéticamente.. (dicese del hipopotamo que hipotálamo) :X

- Pero están ahí, y si hay que usarlas se usan...

2x1=2 2x2 eee...4, 2x6=etc

- (primero en el blog de pruebas después a insertarlas)

Responder
humphr3y  

AMEN!

Responder
Gem@  

Yo las uso de vez en cuando y me facilitan la tarea, por qué negarse a algo que funciona bien y complicare la vida tanto?

Responder
Marcos-Gabriel  

.class img{float:left;}
apenas isso seria utilizado , n?

Responder
Graciela  

"Cómo estamos hoy, eh!
Estamos a full, duro y parejo, que mañana será igual porque anoche ya es viejo.
Una vuelta más, otra vuelta más, seguro que nos vamos a marear"

No te pierdas la presentación, si deseas te la traduzco :)

Buen lunes :P

Responder
MamaNunes  

:D
Hace poco me questionava sobre el "marquee", "blink e otros trucos sencillos que tambiem fueram abandonados. Pero si funcionan, porque son malos? :-|
Ahah filosofia...

besotes maestro!

Responder
Pablo  

Siempre que puedo uso tablas, solucionan problemas fácilmente y son sencillas de usar. Será porque las conocí antes que los famosos DIVS, con los cuales me toca pelear seguidamente. Malditos DIVS!

Responder
Coloush +16  

Hola, queria ver a donde debo ir si necesito una galeria de videos.
Saludos!

Responder
La hormiguita  

Una profesora mía decía, "Lo ideal es enemigo de lo posible".!!!! Siempre me lo acuerdo... !!!
En mi caso usé tablas, porque no se usar div!!!
Pero si es algo que simplifica, porque no usarlas?
Serán modas....???
Saludos :)

Responder
Mariano Planells  

Hola JMiur:
¿Te acuerdos que te notifiqué mis problemas de indexación por haber sobrepasado las 5000 entradas en Mariano Digital y también de consultar las entradas en el Panel?. Confirmado.
Google no me indexa, casi un año después y tras haber requerido una consideración por dos veces.

Razón por la que he decidido dejar de publicar más entradas en Mariano Digital y he abierto MD, con este url: http://mirdig.blogspot.com.

Me permito abusar de tu amistad y hacerlo público en tu blog, por si quieres cambiar la url (puedes conservar el nombre de Mariano Digital o poner MD, lo mismo da). Y también por si algún amigo y seguidor quiere intercambiar enlace, ahora es el momento. Invitados. Gracias.

PS: Y no me resisto a aventurar otra suposiciones sobre este tope, límite de 5000 entradas de Blogger. Tu, que tanto sabes del tema, quizás podrías averiguar algo.

No me alargo más.
Saludos, amigos. Gracias, JMiur.

Responder
JMiur  

Argifauve, humphr3y: están ahí, y si hay que usarlas se usan ... tal cual :)

Gem@: No hay motivos para hacerlo; son ese tipo de verdades que no tienen fundamentos.

Marcos-Gabriel: No serviría, el resultado sería esto; habría que agregar muchas más propiedades para lograr el mismo resultado.

Entrada musicaliza por la DJ Graciela :D

MamaNunes: No, no son malos. Siempre creí que todo lo que funciona, sirve y que hay muchas formas de conseguir lo mismo y de mejorarlo :D

Pablo: Jajajaja; en realidad, nada es "bendito" y nada es "maldito" ppero, se entiende la idea :D

Coloush: No sé a qué te refieres.

La hormiguita: Tu profesora tenía razón :D

Mariano: Cambiado el enlace, me quedé con Mariano Digital porque me gusta :D

Lo del tope, lo desconozco en verdad, recuerdo el problema que planteabas y que me resistía a creerlo. Voy a ver si encuentro algo al respecto.

Responder
egoloco  

@todos: alguien está siguiendo los cambios que JMiur hace en este blog?

@JMiur: están geniales tus cambios, me gustó mucho el cambio a lightwindow, algo muy original, y al parecer, va más allá de lo que yo creía. Y... sobre las tablas, bueno, las nuevas tendencias dicen que quizás pasen de moda, pero siguen ahí y funcionan, sin embargo yo uso DIVs porque fue lo 1ero que conocí y me llevo bien con ellos. :D Saludos!!!

Responder
egoloco  

Otra cosa, la nube de etiquetas también cambió :O

Y el hover al enlace de bolsanegra.net no aparece, si aparece con las imagenes siguientes.

Responder
JMiur  

Hay que entretenerse con algo :$

Responder
Graciela  

Ego nos damos cuenta :)
La nube de etiquetas merece ser explicada, otro div? está preciosa.
Ya el pajarito a volado sabe el cielo donde, en realidad en mi blog se hace pesado de cargar don Twitter.

Buen martes y sigue, que las preguntas vendrán todas juntas!

Responder
JORGE  

Me creerán, yo uso los divs porque aprendí eso en blogger pero las tablas.. :O No se mucho sobre eso.. aunque parece ser mas facil. Bueno a aprender a usar tablas se ha dicho... Gracias por el post, interesante como siempre.

Responder
egoloco  

Aunque la nube más bien parece una copa sin base o una cacerola de brujas :D

Quién no imaginó formas viendo las nubes?

(Que vuelvan los lentos) jajaja

Responder
JMiur  

Jorge: Pués siempre es bueno conocer las herramientas que existen porque todas son útiles en su momento :D

egoloco: Si pudiera desordenarla aún más, sería feliz :D

Responder
Marcos-Gabriel  

.class{overflow:hidden;}
.class img{float:left;}

esta seria a solução ,
tabelas ... não mais porfavor !!
não necessitamos de tabelas para fazer nada hoje.
Tabelas servem para fazer APENAS TABELAS .
=D

Responder
JMiur  

Y el resultado de eso, sería este. No se alinearían verticalmente. Por eso son útiles las tablas y por eso el CSS3 intenta usar ese criterio con alguna de las nuevas propiedades de display.

Una tabla, no es otra cosa que un conjunto de elemento ordenados, cualquier elemento, cualquier dato, una imagen o un enlace también son datos porque todo lo que hay en una web son datos y por lo tanto, no hay ningún motivo lógico para rehusarse a usar las herramientas que existen si es que uno quiere hacerlo. No está ni mal ni bien porque lo único que importa es que el resultado final sea aceptable.

Moraleja: Si quieren usar tablas, usen tablas y si no quieren usarlas, no las usen; en estas cosas no hay virtudes ni pecados.

Responder
LeonardoN  

Hace unas semanas estaba buscando algo sobre el border-radius y me encontré con una página de la W3C... cuando entré, vi que había tablas para mostrar los ejemplos y todo eso.

Tan malas no deben ser, pensé.

Responder
JMiur  

No. como todo, depende de cómo son usadas; el resto es subjetivo y no tiene sentido discutirlo.

Responder
Un simple anónimo  

Yo desarrollo sitios hace 6 años si bien recuerdo. Obviamente partí diseñando con tablas. Toda la maquetación a tablas. Aún las usos, porqué en la empresa donde trabajo el diseño está basado en tablas, pero cada día las uso menos.

Hace unos años empecé usar div's por un tema de estandarización. ¿El resultado a nivel visual? El mismo. ¿El resultado a nivel personal? más trabajo. He peleado y peleado con los div's sus margenes, paddings, bordes, etc.. UF! Aunque admito que cada día es más fácil, claro, la costumbre. Y bueno, ¿ventajas de trabajar con div's?: si se hace bien, separando lo que es estructura (código) a lo que es el diseño (css) se hace muuuuuuuucho más fácil de modificar el sitio a nivel de su "ropa", ya sea tamaños, colores, fuentes, bordes, comportamientos, etc en un futuro.

Por lo que he leído, aparte de ya ser un estándar maquetear un sitio con div's, el renderizado de este es mucho más rápido que maquetear con tablas, osea, el sitio carga más rápido.

Aún así sigue siendo más cómodo usar tablas, pero ahora sólo las uso cuando necesito mostrar información tabulada (reportes, listas de usuarios, formularios en algunos casos).

Otra ventaja que a nivel SEO es mucho mejor visto un sitio basado en div's que en tablas.

Saludos.

Responder
JMiur  

Aquí no se ha hablado de diseñar un sitio con tablas sino de usarlas cuando lo creamos conveniente.

Que el sitio cargue más rápido es discutible y dependerá. El CSS no es neutro y ocupa espacio por lo tanto ...

Si SEO significa cómo los buscadores evaluan e indexan las páginas; es indiferente. Ante esta pregunta: ¿Es una página web diseñada con CSS mejor para SEO que una basada en tablas?, Matt Cutts CEO de Google responde:

Francamente, no preocuparía de esto. Vemos las tablas y el CSS, trabajamos con ambos. Así que intentamos evaluarlas, ya sabes, no importa qué tipo de diseño utilices. Francamente, utiliza lo que sea mejor para ti. Mucha gente tiende a utilizar CSS ahora ya que es fácil para cambiar tu sitio web. Es fácil para cambiar el diseño. Muy modular. Mientras que las tablas, tiene algo de, ya sabes, connotaciones web 1.0. Pero si tienes la mejor web, intentaremos encontrarla e intentaremos colocarla arriba sin importar si está basada en tablas o en CSS.

Responder
El Potro  

Las tablas deben tener algún tipo de feromonas que simplemente hacen que nos rehusemos a ellas. De sólo ver su estructura me siento como un estudiante de medicina al ver su primer esqueleto y toda la composición ósea... ¡Qué miedo!

Lo cierto es que nos guste o no, son la solución a muchos de nuestros problemas al colocar algunos elementos que suelen ser caprichosos y "no se dejan acomodar". Y si los grandes emporios de la Web las usan debe ser por algo.

Creo que ya es tiempo de armarme de valor, perderles el miedo y empezar a usarlas, claro, siempre y cuando la situación lo amerite, y por supuesto, que no me vuelva loco al tratar de entenderlas.

Responder
JMiur  

La verdad, discutir sobre etiquetas HTML es tan tonto como discutir sobre martillos o sierras. Sólo son eso, herramientas sin conciencia, sin virtudes y sin pecados.

Responder
Daniel  

:D Saludos Jmiur. He estado buscando por cielo, mar y tierra algo que pueda servirme para poner mis publicaciones en la pagina principal, pero que unicamente se muestren las imágenes una al lado de otra y su titulo en la parte inferior. Intenté solucionar esto utilizando el gadget de entradas relacionadas de LinkedIn pero me limita la cantidad de articulos que puedo mostrar. ¿Es posible hacer algo asi con una tabla de artículos que se actualize automáticamente a medida que voy creando las entradas? Tk´s.

Responder
JMiur  

Sí. Eso es posible utilizando JavaScript y leyendo los feeds del blog; algo de eso pensaba publicar en las próximas semanas viene. Aunque no sé si será exactamente lo que quieres hacer, tal vez, el concepto ayude.

Responder
Daniel  

:D Ok. Estaré a la espera de tu publicación. Gracias.

Responder
raul  

mejor usar xhtml da los mismos resultados ke css ..

Responder
JMiur  

¿De qué estás hablando? Eso es como decir que es mejor usar un martillo que una pinza. Son cosas diferentes y sirven para situaciones diferentes.

Responder
Cegal Company  

Bueno, me parece que por la antigüedad del post es algo aceptable decir tales aberraciones como las vertidas aqui, ya sea porque en su momento era normal diseñar en tablas, pero ahora 2013, el modo de usar tags semánticos en HTML5 como < header > < section > < aside > < footer > y combinandolos con los < div > y CSS3 con javascript, se producen espectaculares resultados en poco tiempo.
El uso de tablas no es malo, si se le da el correcto uso: El de mostrar información de una lista de cosas,como (Nombre) (Edad) (Lugar de nac) etc y abajo de esos rotulos enumerar gente.
Pero como elemento principal de diseño esta totalmente errado.
Espero por favor se pasen a sitios como http://awwwards.com http://css-tricks.com http://codepen.com y revisen articulos y temas de HTML5 y CSS3 actualizados.
Talvez alguien en el 2015 o 2020 si sigue funcionando esta pagina vuelva a ver lo que escribi y probablemente dira lo mismo que digo yo, que talvez esta pesimo lo que digo y que HTML10 y CSS8 junto con realidad aumentada, OpenGL, Websockets 4.0 y demas son el actual standard

JMiur  

Lo dicho en el artículo fue válido en el 2010 y seguirá siendo válido en el 3522: las herramientas son sólo herramientas, carecen de bondad y maldad, no se las debe endiosar ni estigmatizar a menos que estemos hablando de mística y las adoremos como totems o deidades.

Una aberración es algo que "sale de lo normal" pero, desde el principio de los tiempos, nadie, salvo los academicistas, ha podido definir qué es lo normal por lo tanto, lo mejor de esta vida es dejar que cada uno experimente y encuentre su camino sin andar predicando verdades absolutas que a la larga, terminan siendo falsas.

Si quieres usar tablas, úsalas. Si no quieres usarlas, no las uses. Ninguna de las alternativas te hará mejor ni peor.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR