accesskey_mod_content

Tablas

  • Escuchar
  • Imprimir PDF
  • Compartir

En una tabla de datos compleja (aquella que posee dos o más niveles de encabezado de fila y/o columna) la asociación de sus encabezados con sus respectivas celdas de datos se realiza por medio de los atributos id y headers. De esta forma cada celda de datos incluirá en su atributo headers el identificador unívoco (id) de todos los encabezados relacionados con ésta.

Ejemplo de código

 <table summary=”Datos de extensión y habitantes de ciudades”> 
<tr> 
   <th id=”ciudad”>Ciudad</th> 
    <th id=”habitantes”>Habitantes</th>
   <th id=”extension”>Extensión (<abbr title="kilómetros cuadrados">km<sub>2</sub></abbr>)</th>
 </tr>
 <tr>
  <th headers=”ciudad” id=”leon”>León</th>
  <td headers=”habitantes leon”>135000</td>
  <td headers=”extension leon”>39</td>
 </tr>

 

En las tablas de datos se deberá proporcionar información sobre su contenido bien mediante un título con el elemento CAPTION o mediante un resumen con el atributo summary. En las tablas de datos sencillas se considera suficiente el uso de CAPTION, mientras que en las tablas complejas se debería usar el atributo summary.

Cuando una tabla de datos dispone de un texto a modo de título de la misma, este texto se debe marcar con el elemento CAPTION y no con otro elemento diferente sin relación con las tablas de datos (como un párrafo o un encabezado de página, por ejemplo). El elemento CAPTION debe ser el primer elemento hijo del elemento TABLE correspondiente. De esta forma se relaciona unívocamente dicho título con la tabla de datos a nivel de código y no sólo de forma visual.

Adicionalmente, es importante incluir en las tablas de datos complejas mediante el atributo summary un resumen de los contenidos de la misma y de las relaciones entre las celdas, especialmente para las tablas con encabezamientos anidados, celdas que ocupan varias columnas o filas, u otras relaciones que solo son evidentes cuando la tabla se muestra visualmente.

En caso de que en una tabla de datos se emplee conjuntamente el elemento CAPTION y el atributo summary entonces el contenido de ambos debe ser diferente y complementario y por tanto no estar duplicado.

Ejemplo de código

 <table summary="La tabla muestra la nota final de los alumnos de 1º B en la asignatura de Matemáticas">
<caption>Calificaciones: asignatura Matemáticas</caption>
<tr> <th scope="col">Alumno/a</th>
<th scope="col">Matemáticas</th> </tr>
<tr> <td>Javier González Rodríguez</td>
<td>8,3</td> </tr>
<tr> <td>María del Carmen Martín Pérez</td>
<td>5</td> </tr>

 

Para colocar un recuadro con una leyenda en una tabla de datos, y que sea accesible para todos los usuarios, existen dos posibilidades:

  • Si el texto de la leyenda no es muy extenso se puede incluir en las propias celdas de datos.
  • En el caso de que la leyenda sea muy amplia, lo mejor es colocarla después de la tabla, y hacer referencias desde las celdas de datos correspondientes mediante enlaces a dicha leyenda.
     

eInclusion ejemplo de leyenda en tabla

 Se debe identificar adecuadamente la leyenda mediante un texto que la asocie a la tabla correspondiente. Así mismo se debería indicar, mediante el atributo summary de la tabla, que existe dicha leyenda y está situada después de la tabla.