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>
| 1 | 2 | 3 |
| 4 | 5 | 6 |
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.
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>
| 1 | 2 | 3 |
| 4 | 5 | 6 |
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á.
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>.
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.
| Sin imagen |
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 |
Diseño web de Hooping