Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a XHTML que contiene a HTML: uso de atributos id, headers y axis en tablas

Datos de búsqueda

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:

Eventos 2010
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 atributos id, 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>

Comentarios del artículo

Los comentarios están cerrados.

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.

Los comentarios están cerrados.

Información del sitio