Habitualmente se utiliza el atributo scope
en las tablas para definir la relación de las celdas con las columnas.
Pero hay ocasiones en las que los encabezados se hacen complejos, abarcando más de una columna o fila, como en la siguiente tabla:
Tipo | Evento | Descripción | Fechas | |
---|---|---|---|---|
Inicio | Fin | |||
Tipo 1 | Evento 1.1 | Descripción 1.1 | 2010-02-10 | 2010-02-12 |
Evento 1.2 | Descripción 1.2 | 2010-03-11 | 2010-03-13 | |
Tipo 2 | Evento 2.1 | Descripción 2.1 | 2010-02-12 | 2010-02-14 |
Evento 2.2 | Descripción 2.2 | 2010-04-12 | 2010-04-14 | |
Tipo 3 | Evento 3 | Descripción 3 | 2010-06-23 | 2010-07-05 |
- El atributo
id
se usa para definir las celdas de encabezado o que están jerárquicamente por encima del resto. - El atributo
headers
(enlace externo, en inglés) se utiliza para referenciar, mediante el valor dado a los atributosid
, las celdas superiores a la que se está aplicando dicho atributo. - El atributo
axis
(enlace externo, en inglés) se usa para categorizar las celdas de encabezado o que están jerárquicamente por encima del resto.
Código HTML de la tabla de ejemplo:
<table summary="Tabla de eventos 2010">
<caption>Eventos 2010</caption>
<col width="20%" />
<col width="19%" />
<col width="25%" />
<col width="18%" />
<col width="18%" />
<thead>
<tr>
<th id="col_01" rowspan="2">Tipo</th>
<th id="col_02" rowspan="2">Evento</th>
<th id="col_03" rowspan="2">Descripción</th>
<th id="col_04" colspan="2">Fechas</th>
</tr>
<tr>
<th id="col_04_01" axis="fecha" headers="col_04" scope="col">Inicio</th>
<th id="col_04_02" axis="fecha" headers="col_04" scope="col">Fin</th>
</tr>
</thead>
<tbody>
<tr>
<th id="fil_01" headers="col_01" rowspan="2">Tipo 1</th>
<th id="fil_01_01" headers="col_02 fil_01">Evento 1.1</th>
<td headers="col_03 fil_01_01">Descripción 1.1</td>
<td headers="col_04_01 fil_01_01">2010-02-10</td>
<td headers="col_04_02 fil_01_01">2010-02-12</td>
</tr>
<tr>
<th id="fil_01_02" headers="col_02 fil_01">Evento 1.2</th>
<td headers="col_03 fil_01_02">Descripción 1.2</td>
<td headers="col_04_01 fil_01_02">2010-03-11</td>
<td headers="col_04_02 fil_01_02">2010-03-13</td>
</tr>
<tr>
<th id="fil_02" headers="col_01" rowspan="2">Tipo 2</th>
<th id="fil_02_01" headers="col_02 fil_02">Evento 2.1</th>
<td headers="col_03 fil_02_01">Descripción 2.1</td>
<td headers="col_04_01 fil_02_01">2010-02-12</td>
<td headers="col_04_02 fil_02_01">2010-02-14</td>
</tr>
<tr>
<th id="fil_02_02" headers="col_02 fil_02">Evento 2.2</th>
<td headers="col_03 fil_02_02">Descripción 2.2</td>
<td headers="col_04_01 fil_02_02">2010-04-12</td>
<td headers="col_04_02 fil_02_02">2010-04-14</td>
</tr>
<tr>
<th id="fil_03" headers="col_01">Tipo 3</th>
<th headers="col_02 fil_03">Evento 3</th>
<td headers="col_03 fil_03">Descripción 3 </td>
<td headers="col_04_01 fil_03">2010-06-23</td>
<td headers="col_04_02 fil_03">2010-07-05</td>
</tr>
</tbody>
</table>