title: &lt;table&gt;
link: http://jj.isgeek.net/2005/08/table/
author: Jj
description: 
post_id: 31
date: 2005/08/27 18:58:46
created_gmt: 2005/08/27 23:58:46
comment_status: open
slug: table

#### 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](http://www.macromedia.com/go/gnavtray_products_more) 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 `&nbsp;`.  
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](http://www.w3.org/People/howcome/p/cascade.html), 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](http://www.nvu.com/) y agregar la columna :P

[AcÃ¡ juguÃ© con XHTML un poco para ver los resultados de las tablas](http://www.isgeek.net/files/tablas.html), 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](http://www.w3.org/tr/CSS21/tables.html)
  *[WYSIWYG]: What you see is what you get

## Comments

**[Axel](#66 "2005-11-26 00:08:58"):** ALex

**[Manu](#216134 "2008-08-26 09:11:20"):** Manu.

