Outbook
HTML+CSS+JS, Accesibilidad, PHP y más
Inicio
Desarrollo web
XHTML
HTML: uso de atributos id, headers y axis en tablas
HTML: uso de atributos id, headers y axis en tablas
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
idse 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>
Artículos relacionados:
Datos del artículo:
- Publicado el Martes 16 de febrero de 2010 a las 00:01
- Archivado en Desarrollo web, XHTML
- Etiquetas: Accesibilidad, Atributo header, Atributo id, Atributos HTML, HTML, Tablas HTML, XHTML
- Seguimiento de comentarios (RSS 2.0).
Comentarios del artículo
Puedes comentar o hacer trackback desde tu propio sitio web.
Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.
Todavía no hay comentarios.










