Unidad 6. Tablas (III)

Encabezado de columna <th>

Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero podemos poner en su lugar las etiquetas <th> y </th>.

Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir los encabezados o títulos de las columnas.

Por ejemplo, si escribiéramos el siguiente código:

<table width="50%" border="1" align="center">
  <tr>
    <th>Sabado</td>
    <th>Domingo</td>
  </tr>
  <tr>
    <td>Curso HTML</td>
    <td>Curso Dreamweaver</td>
  </tr>
  <tr>
    <td>Curso Frontpage</td>
    <td>Curso Flash</td>
  </tr>
</table>

Obtendríamos la siguiente tabla:

Sábado	Domingo
Curso HTML	Curso Dreamweaver
Curso Frontpage	Curso Flash

Título de tabla <caption>

No solamente es posible establecer títulos para las columnas, también es posible establecer un título para la tabla mediante las etiquetas <caption> y </caption>.

Estas etiquetas han de ir después de la etiqueta <table>, y puede especificarse el valor de los atributos align (con los valores bottom, center, left, right y top) y valign (con los valores bottom y top).

Por ejemplo, si escribiéramos el siguiente código:

<table width="50%" border="1" align="center">
  <caption align="right" valign="top">Titulo de la tabla<tr>
  <tr>
    <th>Sabado</td>
    ...
  </tr>
</table>

Obtendríamos la siguiente tabla con título:

Titulo de la tabla

Sábado	Domingo
Curso HTML	Curso Dreamweaver
Curso Frontpage	Curso Flash

El título aparece ajustado a la margen derecho de la tabla (align="right") y encima de la tabla (valign="top").

Pág. 6.3