Mis quejas acerca de el uso de las tablas

El uso de tablas en muchas de las páginas web comerciales que se encuentran hoy en Internet es ridículo. En algún lugar enseñaron a los diseñadores web a usar tablas para definir el diseño de la página y ubicación de sus elementos. Esto genera desorden y miles de tablas anidadas, con miles de etiquetas <td> vacias, o usadas como bordes!!

En el trabajo desarrollamos una web cuyo diseño fue elaborado por una persona con amplia experiencia usando Dreamweaver pero lamentablemente muy poca experiencia con *HTML. Esto resultó en que las páginas tenían miles de tablas que eran usadas para generar espacios entre párrafos, <td>s utilizados como bordes, alineación de texto, separadores de campos, etc. No sólo fueron las tablas lamentablemente, sino los famosos [blank.gif](http://tinyurl.com/8cs37) de 1pixel por 1 pixel aprovechados para estirar cualquier <td>, el uso desmesurado de  .
Yo creo que el problema en este caso fué que el uso extensivo de Dreamweaver en modo WYSIWYG no permitió a esta persona comprender todo el desorden que hacía adentro y la poca semántica que ponía en su página y el uso de estilos se limitó a dar tamaños y colores a las letras.

Lamentablemente esto no lo he visto sólo en éste caso en particular, sinó que en muchos lugares o personas especializados en hacer páginas web sucede esto. Yo practiqué en uno de estos lugares y pude verlo de cerca, me pedían que desmenuce las imágenes y las ponga en las celdas de una tabla como si fuera un rompecabezas!

Los estilos en las páginas existen desde 1993(ok, es injusto pensar en esos drafts como CSS, de todas maneras CSS2 existió desde 1998). Yo conocí CSS hace poco mas de un año, por suerte nunca tuve que hacer trabajo serio con lo poco que sabía.

Al hacer esto con las páginas web se pierde la estructura del contenido y se hace intentendible semánticamente, los títulos, listas, cabeceras, párrafos, capítulos, índices... Todo pierde estructura al querer separarlos visualmente usando tablas. Esto por mezclar el diseño con el contenido.

Usando CSS se puede alcanzar prácticamente todos estos efectos si es que se estructura bien el documento XHTML y se hace buen uso de CSS, incluso se pueden lograr menús emergentes y efectos interesantes con el uso de pseudoclases ;)

Todo este problema con las tablas hizo que las tablas sean mal vistas, sin embargo, pese a que se usaron tanto, pocos disfrutaron de todas las capacidades de ellas, y para muchos fueron siempre desconocidas. Las tablas deben ser usadas cuando se muestra información tabular, datos o información que lo amerite.

Jugando con las tablas

De todas formas, tengo que agradecerle a ése proyecto, que al ver tantas tablas anidadas, me invitó a buscar un poco mas de informacón acerca de ellas y llegar a conocerlas un poco mejor :)

Algo que me pareció bastante curioso de las tablas fue el hecho de que <tfoot> se declare antes de <tbody>, lo cual no es muy problemático, pero lo interesante esta al momento de seleccionar el texto ;), al extender la selección de el texto de <thead> a <tbody>, se selecciona el texto en <tfoot> :D

Por que usar <thead>, <tfoot>, <tbody>? No sólo por razones de orden y semántica, sino que al mostrar la página en otros medios diferentes a un navegador web, en el caso de imprimir una tabla muy extensa, los campos en <thead> y <tfoot> aparecerán en todas las hojas :)
El uso de <tbody>s puede servir para agrupar conjuntos de filas, en caso cada registro ocupe mas de un <tr>, tambien son muy útiles si se les va a modificar dinámicamente con javascript ;) (pueden haber varias etiquetas <tbody> dentro de una tabla).

El uso de colgroups tambien es muy interesante para manejar el ancho de las columnas. Algo interesante es que al aplicar estilos en las etiquetas <col>, no tienen efecto sobre las celdas de dicha columna. Por que? por que las etiquetas <col> no forman parte de la cascada de las etiquetas <td>, para llegar a un <td> hay que pasar antes por <tr> y antes por <tbody> y <table>. En esta ruta nunca aparecio <col>, ya que para llegar a <col> hay que tomar otro camino, <table> -> <colgroup> -> <col>
Se pueden hacer trucos con CSS para aplicar estilos a determinadas celdas usando los modificadores '+', pero no es muy elegante en mi opinión.

Acerca de el ancho de las columnas. Siempre me fué un problema el estar teniendo que calcular los porcentajes que uso para especificar el ancho, se complicaba cuando hay demasiadas columnas y pueden tener anchos variables. Para esto la unidad '' cae como anillo al dedo, se usa 1 como ancho base y se hace que las columnas tengan 2, 3, n* de ancho, siendo estas n veces mas anchas que la original.

Siempre me pregunté como hacer para que una celda ocupe todo el ancho restante de una fila? usando colspan="0"

Ayer un amigo me preguntó cómo alinear una tabla usando CSS (esto fué lo que me impúlsó a hacer el post), ya que alegremente se podría poner align="center", sin embargo se puede lograr una tabla centrada usando el estilo margin: 0 auto;.

La propiedad border ya no se debe usar, existe sólo por compatibilidad hacia atrás, los bordes en las tablas se deben hacer con estilos, en XHTML una tabla no tiene bordes de manera predeterminada.

Con CSS2 las tablas y sus elementos son etiquetas con atributos especiales como colspan, que de manera predeterminada gozan de ciertas reglas. Entonces al aplicar estas reglas a otro tipo de elemento se pueden obtener resultados similares salvo por los atributos particulares de cada etiqueta :P

Lo que si es un problema, es cuando se tiene que manejar una tabla con muchas filas y por cualquier motivo haya que agregar o eliminar una columna, no queda otra mas que agregar el <td> extra en todas las filas, o abrir algún programa WYSIWYG de edicion HTML y agregar la columna :P

Acá jugué con XHTML un poco para ver los resultados de las tablas, ahí tambien se puede probar el efecto de la selección tanto en la tabla original y en la hecha con <div>s

Esto es todo lo que me viene a la mente por el momento, cualquier corrección o sugerencia sería chevere :)

Más información sobre tablas *[WYSIWYG]: What you see is what you get

Comments

#66" title="2005-11-26 00:08:58">Axel: ALex

#216134" title="2008-08-26 09:11:20">Manu: Manu.