Atributos de las tablas
Los atributos que puede tener la etiqueta <table> son los siguientes:
•
Align: alineación de la tabla. Permite definir la posición
de la tabla y por tanto la posición del texto en función de
la tabla y puede ser alineada a la izquierda (left) o derecha (right) y
con el texto alrededor. El valor center coloca el texto a ambos lados de
la tabla.
•
Background: imagen de fondo. Será la imagen de fondo de cada celda.
•
Bgcolor: color de fondo de las celdas de la tabla. Se define el color
de fondo de todas las celdas.
•
Border: define el número de píxeles de grosor del borde de
la tabla. Tiene un valor por defecto que es 1, aunque el borde no será visible
salvo que se indique expresamente.
•
Bordercolor: color del borde de la tabla.
•
Cellspacing: grosor de la línea que divide las celdas. Tiene un valor
por defecto de 2 píxeles.
•
Cellpadding: espacio entre el contenido de la celda y los bordes de ésta.
Su valor por defecto es 1 píxel.
•
Width: anchura de la tabla. Puede venir expresada de manera absoluta,
en número de píxeles, o en porcentaje respecto a la anchura
total de la ventana del navegador.
Tabla que ocupa toda la anchura de la ventana.
<table width="100%" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Propiedades de las celdas
Como se ha explicado, las celdas se colocan con las etiquetas <tr>, <td> y <th>.
Las celdas además tienen una serie de propiedades como tamaño,
alineación y color o imagen de fondo.
Tamaño de las celdas
El navegador se ocupa de calcular automáticamente el tamaño
de las celdas de la tabla. Sin embargo se pueden especificar las dimensiones
de la celda con los atributos width y height de las etiquetas <th> y <td>.
Todas las celdas de una misma columna deben tener la misma anchura. Si
se especifican distintos valores de anchuras se toma el mayor de ellos.
Todas las celdas de una misma fila deben tener la misma altura. Si se
especifican distintos valores de alturas se toma el mayor de ellos.
<table width="60%" border="1">
<tr>
<td width=”150”>1</td>
<td>2</td>
<td width=”30”>3</td>
</tr>
<tr>
<td height=”55”>4</td>
<td width=”35%”>5</td>
<td>6</td>
</tr>
</table>
Alineación del contenido de las celdas
El atributo ALIGN es usado para alinear horizontalmente el contenido
de la celda. Los valores pueden ser left, center y right. Por defecto
el valor que tiene asignado es left.
El atributo VALIGN permite alinear verticalmente el contenido
de la celda. Los valores pueden ser top, middle y bottom. El valor asignado
por defecto
es middle.
Ambos atributos pueden aparecer en las etiquetas <tr>, <th> y <td>.
Si se pone el atributo en la etiqueta <tr> se asignará ese
valor a toda la fila, aunque si luego en un elemento de esa fila definimos
el mismo atributo con otro valor para una <th> o una <td>, esta
prevalecerá.
Color de fondo de las celdas
El atributo bgcolor de las etiquetas <tr>, <th> y <td> permite
especificar un color de fondo para la celda o para toda la fila en el caso
de la etiqueta <tr>.
Imagen de fondo de las celdas
El atributo background permite colocar una imagen de fondo en una fila
de la tabla (si se aplica a TR) o en una celda (si se aplica a TH o TD).
En función del navegador utilizado la imagen puede fluir de una
celda a otra o comenzar de nuevo en cada una de ellas.
Configuración de las celdas vacías
Si una celda de una tabla está vacía no se dibujan los bordes
a su alrededor.
| Relleno |
Relleno |
Relleno |
| Relleno |
|
Relleno |
Para evitar este efecto poco estético se suele colocar en la celda un
espacio en blanco forzado,
| Relleno |
Relleno |
Relleno |
| Relleno |
|
Relleno |