Tutorial:XHTML

A continuación se muestran algunas propiedades, tags y atributos interesantes para definir partes de las tablas HTML.

La imagen siguiente muestra de modo gráfico su estructura de una tabla y los elementos utilizados para su construcción:

El atributo summary

El atributo summary puede específicarse dentro del tag table y permite añadir un resumen del contenido de la tabla. Posteriormente será utilizado para informar a navegadores u otros agentes de usuario que facilitan el acceso al contenido a usuarios discapacitados.

<table summary="Clasificación final liga BBVA" > .... </table>

Título para una tabla

Para especifcar un título para una tabla se usará la etiqueta <caption> (no confundir con los títulos h1...h6 de los textos).

Este tag deberá escribirse dentro de la etiqueta <table> pero fuera de las etiquetas <tr>, no importando su lugar.

Por defecto se posicionará encima de todas las celdas.

Véase el ejemplo siguiente:

El código para esta tabla es el siguiente:

<table>
     <caption>Ingresos del año</caption>
     <tr>
          <td>Septiembre</td>
          <td>$1.720.000</td>
     </tr>
     <tr>
          <td>Octubre</td>
          <td>$2.140.000</td>
     </tr>
</table>

Celdas de encabezado

Un encabezado en una tabla es importante, pues define y diferencia el significado de las filas y/o columnas presentes en la tabla.

Para representar un encabezado en una tabla, deberá reemplazarse la etiqueta <td> por <th>. El resultado del contenido de todas las celdas de esa fila se mostrarán en negrita. Sirva el siguiente ejemplo:

El código sería el siguiente:

<table>
    <tr> 
    	<th>Producto</th> 
    	<th>Cantidad (kg)</th> 
    	<th>Impuestos (euros)</th> 
    </tr>
    <tr> 
    	<td>Madera</td> 
        <td>800</td> 
        <td>800.000</td> 
    </tr>
    <tr> 
    	<td>Vidrio</td> 
        <td>10</td> 
        <td>50.000</td> 
    </tr>
    <tr> 
    	<td>Pintura</td> 
        <td>5</td> 
        <td>20.000</td> 
    </tr>
</table>

En el capítulo siguiente veremos los posibles atributos para las celdas de cabeceras.

Encabezado, cuerpo y pie de una tabla

Existen ciertas etiquetas que permiten estructurar las partes de una tabla independientemente del orden en que se escriban en el código HTML. El navegador será quien se encargue de mostrar los datos de forma lógica y ordenada.

Para ello se emplearán las etiquetas <thead>, <tbody> y <tfoot>.

<thead> proporciona la información de encabezado de una tabla que se mostrará en la primera linea de la table.

La etiqueta <tbody> recogerá los datos del cuerpo de la tabla y <tfoot> encerrará los datos de pie de la tabla (que generalmente son los resultados expuestos en el cuerpo de la tabla).

Deberán especeficarse única y sólamente una vez para cada tabla. Todas las etiquetas <tr> deberán estar englobadas dentro de uno de estos tres tags.

Véase el siguiente ejemplo:

El código para la tabla es el que se muestra a continuación:

<table>
	<thead>
    	<tr>
        	<th>Página</th>
               <th>Visitas/día</th>
               <th>Visitas/semana</th>
               <th>Visitas/mes</th>
        </tr>
	</thead>

	<tfoot>
    	<tr>
        	<th>Total</th>
        	<td>97</td>
        	<td>713</td>
        	<td>2820</td>
    	</tr>
	</tfoot>

	<tbody>
    	<tr>
        	<td>index.php</td>
        	<td>20</td>
        	<td>154</td>
        	<td>652</td>
    	</tr>
    	<tr>
        	<td>HTML.php</td>
        	<td>42</td>
        	<td>301</td>
        	<td>1186</td>
    	</tr>
    	<tr>
        	<td>CSS.php</td>
        	<td>35</td>
        	<td>258</td>
        	<td>982</td>
    	</tr>
	</tbody>
</table>