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:


Ingresos del año
Septiembre $1.720.000
Octubre $2.140.000

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:


Producto Cantidad (kg) Impuestos (euros)
Madera 800 800.000
Vidrio 10 50.000
Pintura 5 20.000

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:


Página Visitas/día Visitas/semana Visitas/mes
Total 97 713 2820
index.php 20 154 652
HTML.php 42 301 1186
CSS.php 35 258 982

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>