Html

Por Rubén Alvarez
Hemos visto en el capitulo anterior que las tablas están compuestas de líneas que, a su vez, contienen celdas. Las celdas son delimitadas por las etiquetas <td> o por las etiquetas <th> (si queremos texto en negrita y centrado) y constituyen un entorno independiente del resto del documento. Esto quiere decir que:
* Podemos usar prácticamente cualquier tipo deetiqueta dentro de la etiqueta <td> para, de esta forma, dar forma a su contenido.
* Las etiquetas situadas en el interior de la celda no modifican el resto del documento.
* Las etiquetas de fuera de la celda no son tenidas en cuenta por ésta.
Así pues, podemos especificar el formato de nuestras celdas a partir de etiquetas introducidas en su interior o mediante atributos colocadosdentro de la etiqueta de celda <td> o bien, en algunos casos, dentro de la etiqueta <tr>, si deseamos que el atributo sea valido para toda la línea. La forma más útil y actual de dar forma a las celdas es a partir de las hojas de estilo en cascada que ya tendréis la oportunidad de abordar más adelante.
Veamos a continuación algunos atributos útiles para la construcción de nuestrastablas. Empecemos viendo atributos que nos permiten modificar una celda en concreto o toda una línea:
align | Justifica el texto de la celda del mismo modo que si fuese el de un párrafo. |
valign | Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda. |
bgcolor | Da color a la celda o línea elegida. |
bordercolor | Define el color delborde. |

Otros atributos que pueden ser únicamente asignados a una celda y no al conjunto de celdas de una línea son:
background | Nos permite colocar un fondo para la celda a partir de un enlace a una imagen. |
height | Define la altura de la celda en pixels o porcentaje. |
width | Define la anchura de la celda en pixels o porcentaje. |
colspan | Expande una celda horizontalmente. |rowspan | Expande una celda verticalmente. |

Nota: El atributo height no funciona en todos los navegadores, además, su uso no está muy extendido. Las celdas por lo general tienen el alto que ncesitan para que quepa todo el contenido que se le haya insertado, es decir, crecen lo suficiente para que quepa lo que hemos colocado dentro. 

El atributo width si que funciona en todos losnavegadores y lo tendréis que utilizar constantemente. Si le asignamos un ancho a la celda, el ancho será respetado y si dicha celda tiene mucho texto o cualquier otro contenido, la celda crecerá hacia abajo todo lo necesario para que quepa lo que hemos colocado. 

Un matiz al último párafo. Se trata de que si definimos una celda de un ancho 100 por ejemplo, y colocamos en la celda un contenido como unaimagen que mida más de 100 pixeles, la celda crecerá en horizontal todo lo necesario para que la imagen quepa. Si el elemento, aunque más ancho, fuera divisible (como un texto) el ancho sería respetado y el texto crecería hacia abajo o lo que es lo mismo, en altura, como señalábamos en el anterior párrafo.
Estos últimos cuatro atributos descritos son de gran utilidad. Concretamente, height y widthnos ayudan a definir las dimensiones de nuestras celdas de una forma absoluta (en pixels o puntos de pantalla) o de una forma relativa, es decir por porcentajes referidos al tamaño total de la tabla. Podéis leer un articulo interesante a propósito de estas dos modalidades de diseño en nuestro manual de usabilidad.
A titulo de ejemplo:
<td width="80"> 
Dará una anchura de 80 pixels a lacelda. Sin embargo,
<td width="80%"> 
Dará una anchura a la celda del 80% de la anchura de la tabla.
Hay que tener en cuenta que, definidas las dimensiones de las celdas, el navegador va a hacer lo que buenamente pueda para satisfacer al programador. Esto quiere decir que puede que en algunas ocasiones el resultado que obtengamos no sea el esperado. Concretamente, si el texto presenta...