Cabeceras, celdas y accesibilidad

Descargo de responsabilidad preliminar

Con el soporte del posicionamiento CSS en la gran mayoría de los navegadores, ya no es necesario soportar las desventajas asociadas al formato basado en tablas, a no ser que se tenga que ofrecer un diseño idéntico al del antiguo Netscape 4. Además, este artículo se centrará en el formato de las tablas de datos, utilizadas para presentar datos tabulares.

Para completar esta visión, lea el artículo Los problemas del formato basado en tablas.

Dicho esto, este artículo está lejos de describir todas las recomendaciones para que una tabla de datos sea perfectamente accesible. Ese será el tema de otro artículo que se publicará próximamente…

Diferentes etiquetas

Etiquetas elementales

• <table>: crea una tabla
• <caption>: título de la tabla (opcional)
• <tr>: fila de la tabla
• <th>: celdas de la cabecera de la tabla
• <td>: celdas de la tabla

Etiquetas adicionales

• <thead>: grupo de celdas de la cabecera
• <tbody>: grupo de celdas del cuerpo de la tabla
• <tfoot>: grupo de celdas del pie de la tabla

Accesibilidad

Para los navegadores de texto, Braille o voz que puedan utilizar los discapacitados visuales, se debe añadir el atributo "summary" para explicar el contenido de la tabla. Este atributo se aplica al elemento table.

Tabla simple

El código (X)HTML para una tabla de datos simple presentada en columnas, respetando los estándares y un mínimo de accesibilidad, puede ser de la siguiente forma:

<table summary="exemple de structure d'un tableau de données 2 lignes, 2 colonnes"> <caption>Tableau de données</caption> <tr> <th>Titre colonne 1</th> <th>Titre colonne 2</th> </tr> <tr> <td>cellule A1</td> <td>cellule B1</td> </tr> <tr> <td>cellule A2</td> <td>cellule B2</td> </tr></table>

En este contexto, todo el formato de la tabla y sus celdas debe declararse mediante CSS.

Nota: podemos especificar border="1" en el elemento table para que las celdas de la tabla sigan teniendo bordes si las hojas de estilo están desactivadas.

Elegimos las opciones de una línea sólida (solid), negra (#000000), y de grosor medio (medium) del borde de la mesa ; y los bordes de las celdas en sólido (solid) fino (thin) y azul claro (#6495ed). El código CSS, que debe especificarse en una hoja de estilo externa o en la cabecera de la página entre las etiquetas <style type="text/css"></style>, será este:

table {border: medium solid #000000;width: 50%;}td, th {border: thin solid #6495ed;width: 50%;}

Esto hará que la tabla tenga este aspecto:

Nota 1: Se prefiere el tamaño de la tabla y de las celdas (width:) en porcentajes y no en píxeles para que la tabla se ajuste automáticamente a la ventana de visualización, independientemente de la resolución de la pantalla.

Nota 2: El grosor de la línea también puede expresarse en píxeles (px), puntos (pt), pica (pc)…, así como su apariencia puede ser en guiones (dashed), con guiones (dotted), con relieve (outset o inset), etc.

Si queremos que la torre de la tabla y los bordes de las celdas se mezclen, añadiremos border-collapse: collapse en los estilos de table.

El aspecto de la tabla podría ser entonces el siguiente:

En los navegadores actuales, el texto presente en las celdas de cabecera definidas por las etiquetas th está en negrita y centrado por defecto.

Nada impide, por supuesto, cambiar la alineación del texto, el tipo de letra o el color de fondo de cada una de las celdas.

Ejemplo

table {border: medium solid #6495ed;border-collapse: collapse;width: 50%;}th {font-family: monospace;border: thin solid #6495ed;width: 50%;padding: 5px;background-color: #D0E3FA;background-image: url(sky.jpg);}td {font-family: sans-serif;border: thin solid #6495ed;width: 50%;padding: 5px;text-align: center;background-color: #ffffff;}caption {font-family: sans-serif;}

Vea los distintos ejemplos descritos: documento anexo 1.

Centrar una tabla en una página

Si el tamaño de la tabla es inferior al 100% de la ventana de visualización, a menudo se desea que esté centrada en la página.

Con MSIE 6, Netscape 6 y +, Mozilla, Firefox u Opera 5 y +, el atributo margin: auto, a incluir en los estilos CSS de table, centra automáticamente el bloque.

Pero las versiones anteriores a MSIE 6 lamentablemente no lo reconocen. El truco está entonces en enmarcar la tabla con etiquetas <div style="text-align:center"></div>, que son inútiles para los anteriores navegadores mencionados, pero que permitirán tener una presentación homogénea sea cual sea el navegador.

Tablas más elaboradas

Para presentaciones más complejas, se podrán aprovechar otros conjuntos de elementos y atributos. Estudiemos el siguiente caso de presentación utilizando las etiquetas theadtfoot y tbody, citadas al principio del artículo:

<table summary="liste de quelques articles publiéssur OpenWeb regroupés par auteurs (en ligne) et niveaux (en colonne)"><caption>Présentation de quelques articles publiés sur OpenWeb</caption> <thead> <tr> <th></th> <th>Débutants</th> <th>Experts</th> <th>Gourous</th> </tr> </thead> <tfoot> <tr> <th></th> <th>Débutants</th> <th>Experts</th> <th>Gourous</th> </tr> </tfoot> <tbody> <tr> <th>Tristan Nitot</th> <td>Introduction à l'accessibilité</td> <td>Introduction à l'accessibilité</td> <td></td> </tr> <tr> <th>Tristan Nitot</th> <td>Interview de Chantal Laplanche, ResponsableAccessibilité Web au Ministère de la Culture</td> <td>Interview de Chantal Laplanche, ResponsableAccessibilité Web au Ministère de la Culture</td> <td>Interview de Chantal Laplanche, ResponsableAccessibilité Web au Ministère de la Culture</td> </tr> </tbody> <tbody> <tr> <th>Laurent Denis</th> <td>Un exemple de feuille de style d'impression</td> <td></td> <td></td> </tr> <tr> <th>Laurent Denis</th> <td></td> <td>Commenter le document de travailW3CXHTML 2</td> <td>Commenter le document de travailW3CXHTML 2</td> </tr> </tbody></table>

Esto da este resultado poco atractivo:

La espec. del W3C especifica que el thead y el tfoot deben declararse antes del tbody. El navegador interpretará por sí mismo la colocación correcta de los diferentes grupos de celdas.

Primero, vamos a fusionar las celdas de artículos y autores idénticos. Para las celdas de las filas añadiremos el atributo colspan="n"; para las de las columnas se utilizará rowspan="n", siendo n del número de celdas fusionadas.

El código (X)HTML pasa a ser:

<table summary="liste de quelques articles publiéssur OpenWeb regroupés par auteurs (en ligne) et niveaux (en colonne)"><caption>Présentation de quelques articles publiés sur OpenWeb</caption> <thead> <tr> <th></th> <th>Débutants</th> <th>Experts</th> <th>Gourous</th> </tr> </thead> <tfoot> <tr> <th></th> <th>Débutants</th> <th>Experts</th> <th>Gourous</th> </tr> </tfoot> <tbody> <tr> <th rowspan="2">Tristan Nitot</th> <td colspan="2">Introduction à l'accessibilité</td> <td></td> </tr> <tr> <td colspan="3">Interview de Chantal Laplanche, ResponsableAccessibilité Web au Ministère de la Culture</td> </tr> </tbody> <tbody> <tr> <th rowspan="2">Laurent Denis</th> <td>Un exemple de feuille de style d'impression</td> <td></td> <td></td> </tr> <tr> <td></td> <td colspan="2">Commenter le document de travailW3CXHTML 2</td> </tr> </tbody></table>

Resultado:

Queda mejorar la presentación visual para hacerla más agradable usando CSS:

table {border:3px solid #6495ed;border-collapse:collapse;width:90%;margin:auto;}thead, tfoot {background-color:#D0E3FA;background-image:url(sky.jpg);border:1px solid #6495ed;}tbody {background-color:#FFFFFF;border:1px solid #6495ed;}th {font-family:monospace;border:1px dotted #6495ed;padding:5px;background-color:#EFF6FF;width:25%;}td {font-family:sans-serif;font-size:80%;border:1px solid #6495ed;padding:5px;text-align:left;}caption {font-family:sans-serif;}

Resultado:

Complementos

• Al igual que el ancho de las columnas, también se puede establecer la altura de cada fila. El atributo height: se especificará para el elemento tr.
• La alineación vertical del texto presente en cada celda puede modificarse mediante el atributo vertical-align: que puede tomar los valores: baseline | top | middle | bottom. Este atributo puede especificarse para los elementos td o th.
• Para posicionar el título de la tabla el atributo caption-side, que debe especificarse para el elemento table puede tomar los valores top | bottom.

Ver los distintos ejemplos descritos: documento del apéndice 2.