Cookies en Outbook

Esta web utiliza cookies propias para ofrecer una mejor experiencia. Al navegar, aceptas dichas cookies.
  • Más información acerca de las cookies

Outbook

UI-Dev & more

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>

Publicado

Categorías: