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").

Atrás  Inicio  Adelante


.