Completo tutorial de HTML - Tablas en HTML. Atributos para filas y celdas

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 de etiqueta 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 colocados dentro 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 nuestras
tablas. 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 del borde. 


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 los navegadores 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 una imagen
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 width nos 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.
A titulo de ejemplo:

---

<td width="80">

---

Dará una anchura de 80 pixels a la celda. 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 una palabra
excesivamente larga, puede que la anchura de la celda se vea aumentada para
mantener la palabra en la misma línea. Por otra parte, si el texto resulta muy
largo, la celda aumentara su altura para poder mostrar todo su contenido.

---

Análogamente, si por ejemplo definimos dos anchuras distintas a celdas de una
misma columna, el navegador no sabrá a cual hacer caso. Es por ello que resulta
conveniente tener bien claro desde un principio como es la tabla que queremos
diseñar. No esta de más si la prediseñamos en papel si la complejidad es
importante. El HTML resulta en general fácil pero las tablas pueden convertirse
en un verdadero quebradero de cabeza si no llegamos a comprenderlas debidamente.

---

Los atributos rowspan y colspan son también utilizados frecuentemente. Gracias a
ellos es posible expandir celdas fusionando éstas con sus vecinas. El valor que
pueden tomar estas etiquetas es numérico. El número representa la cantidad de
celdas fusionadas.

---

Así,

---

<td colspan="2">

---

Fusionara la celda en cuestión con su vecina derecha.
|| Esta celda tiene un colspan="2" ||
|| Celda normal || Otra celda ||

---

Del mismo modo,

---

<td rowspan="2">
|| Esta celda tiene rowspan="2", por eso tiene
fusionada la celda de abajo. || Celda Normal ||
|| Otra celda normal ||

---

Expandirá la celda hacia abajo fusionándose con la celda inferior.

---

El resto de los atributos presentados presentan una utilidad y uso bastante
obvios. Los dejamos a vuestra propia investigación.