Cookie

Il semble trivial, mais il y a certains aspects de l'ordinateur, et donc de HTML que, parfois, devrait être revisité. Il convient de noter que le W3C recommande fortement l'utilisation de tables pour concevoir la mise en page du site. Les tableaux sont utilisés pour la saisie des données, il layout si fa con i div.

Les tableaux ne doivent pas être utilisés pour définir le contenu du graphique, car il pourrait présenter des problèmes pour les lecteurs d'écran (mais aussi pour les robots). en plus, lorsque vous avez utilisé pour définir le graphique, tables peuvent forcer les utilisateurs à faire défiler horizontalement pour afficher une page de table conçue pour un écran plus grand. Pour minimiser ces problèmes, les auteurs doivent utiliser les CSS pour contrôler la mise en place des tables.

Fait intéressant, le W3C ne jamais utiliser l'impératif (devrait, ne devrait pas…), ils savent que les bonnes manières.

Aujourd'hui, nous voyons un certain article de table (pour servir de table et non pas comme la mise en page) et les variations sur les. Ils peuvent tirer leurs propres conclusions.

La balise pour l'en-tête: “th

La balise “th” Il sert à définir l'en-tête de table: la première ligne et / ou la première colonne. La structure la plus simple maintenant tombée en désuétude (sans “th“) Il se présente comme suit:

<tableau>  
  <tr>  
    <td>Auto</td>  
    <td>Catégorie</td>  
    <td>déplacement</td>  
  </tr>  
  <tr>  
    <td>Opel</td>  
    <td>Corsa</td>  
    <td>1.2</td>  
  </tr>  
  <tr>  
    <td>Citroen</td>  
    <td>c2</td>  
    <td>1.1</td>  
  </tr>  
</tableau>

Qu'est-ce que produira ce résultat:

AutoCatégoriedéplacement
OpelCorsa1.2
Citroenc21.1

Pour ceux qui ne grande vision, il est facile de comprendre ce dont on parle, mais qui doit compter sur un lecteur d'écran pour l'interprétation de la page Web, il est considérablement désavantagé. Voilà pourquoi nous avons introduit les balises “th“, est synonyme de “tête de table“. Cette balise définit l'en-tête de la table et il sépare les données de table (“td” – données de table) et est utilisé de cette façon:

<tableau>  
  <tr>  
    <e>Auto</e>  
    <e>Catégorie</e>  
    <e>déplacement</e>  
  </tr>  
  <tr>  
    <td>Opel</td>  
    <td>Corsa</td>  
    <td>1.2</td>  
  </tr>  
  <tr>  
    <td>Citroen</td>  
    <td>c2</td>  
    <td>1.1</td>  
  </tr>  
</tableau>

Cela va générer ce résultat:

AutoCatégoriedéplacement
OpelCorsa1.2
Citroenc21.1

Les balises pour les sous-titres: “caption

Tout comme les photos, De plus pour les tables il y a une légende. È possibile mostrare la didascalia sopra o sotto la tabella, l'élément CSS qui permet le positionnement est “caption-side” et accepte comme arguments “top” le “bottom“. Cependant la balise “caption” il est pas obligatoire, selon les circonstances, il peut être utilisé ou moins.

En cas d'utilisation doit être placé immédiatement après la balise d'ouverture “table“.

<tableau>
  <légende>Combien de voitures sont garées dans mon garage?</légende>
  <tr>  
    <e>Auto</e>  
    <e>Catégorie</e>  
    <e>déplacement</e>  
  </tr>  
  <tr>  
    <td>Opel</td>  
    <td>Corsa</td>  
    <td>1.2</td>  
  </tr>  
  <tr>  
    <td>Citroen</td>  
    <td>c2</td>  
    <td>1.1</td>  
  </tr>  
</tableau>

Qu'est-ce que produira ce résultat:

Combien de voitures sont garées dans mon garage?
AutoCatégoriedéplacement
OpelCorsa1.2
Citroenc21.1

L'attribut de résumer le contenu de la table: “summary

En plus de l'étiquette “caption” vous pouvez utiliser l'attribut “summary” (de se lier à l'étiquette “table“) expliquer brièvement le contenu de la table. Cette option est visible pour l'utilisateur qui voit la table, sert à ceux qui voient ne pas utiliser un lecteur d'écran pour comprendre tout de suite si la table il peut affecter ou non.

La bonne structure est la suivante:

<Résumé de la table ="marque, modèle et voitures capacité moteur garés dans mon garage">
  <légende>Le auto del mio garage</légende>
  <tr>
    <e>marque</e>
    <e>Catégorie</e>
    <e>déplacement</e>
  </tr>
  <tr>
    <td>Opel</td>
    <td>Corsa</td>
    <td>1.2</td>
  </tr>
  <tr>
    <td>Citroen</td>
    <td>c2</td>
    <td>1.1</td>
  </tr>
</tableau>

Le résultat de ces lignes de code avec le style appliqué globalement sur ce site est que:

Combien de voitures sont garées dans mon garage?
marqueCatégoriedéplacement
OpelCorsa1.2
Citroenc21.1

Il est important de souligner que l'attribut “summary” Il n'est pas visible à l'œil de ceux qui surfent, Il est néanmoins enregistré que des informations complémentaires par les robots et les meilleurs index de la table et est lu par les lecteurs d'écran pour aider les utilisateurs ayant une déficience visuelle.

En-têtes abrégés avec l'attribut “abbr

l'attribut “abbr” Il est un autre attribut facultatif, si ce n'est pas mis n'affecte pas la structure ou le fonctionnement de la table. Le contenu est lu par les lecteurs d'écran pour donner une définition concise à ceux qui ont des problèmes de vision, que de cette manière il évitera les en-têtes de sentiment avec des différences mineures. l'attribut “abbr” Il est utilisé de cette façon:

<Résumé de la table ="marque, modèle et voitures capacité moteur garés dans mon garage">
  <légende>Le macchine del mio garage</légende>
  <tr>
    <th abbr ="marque">La marque de voiture</e>
    <th abbr ="Catégorie">Le modèle de voiture</e>
    <th abbr ="déplacement">Le moteur de voiture</e>
  </tr>
  <tr>
    <td>Opel</td>
    <td>Corsa</td>
    <td>1.2</td>
  </tr>
  <tr>
    <td>Citroen</td>
    <td>c2</td>
    <td>1.1</td>
  </tr>
</tableau>

Relate-têtes et des données: “scope“, “id” et “headers

Les tables sont suffisamment vues banales, Voici comment faire comprendre au lecteur d'écran la corrélation entre les en-têtes et les données. Nous éliminons l'en-tête “marque” Ce dans notre tableau, et modifier les entrées de la marque afin qu'ils deviennent un en-tête.

<Résumé de la table ="marque, modèle et voitures capacité moteur garés dans mon garage">
  <légende>Le auto del mio garage?</légende>
  <tr>
    <td></td>
    <e>Catégorie</e>
    <e>déplacement</e>
  </tr>
  <tr>
    <e>Opel</e>
    <td>Corsa</td>
    <td>1.2</td>
  </tr>
  <tr>
    <e>Citroen</e>
    <td>c2</td>
    <td>1.1</td>
  </tr>
</tableau>

Et le résultat sera:

Combien de voitures sont garées dans mon garage?
Catégoriedéplacement
OpelCorsa1.2
Citroenc21.1

Nous ajoutons l'attribut “scope” pour faciliter le travail au lecteur d'écran:

<Résumé de la table ="marque, modèle et voitures capacité moteur garés dans mon garage">
  <légende>Le auto del mio garage</légende>
  <tr>
    <td></td>
    <th scope ="col">Catégorie</e>
    <th scope ="col">déplacement</e>
  </tr>
  <tr>
    <th scope ="rangée">Opel</e>
    <td>Corsa</td>
    <td>1.2</td>
  </tr>
  <tr>
    <th scope ="rangée">Citroen</e>
    <td>c2</td>
    <td>1.1</td>
  </tr>
</tableau>

l'attribut scope definisce una cella di intestazione e fornisce informazioni di intestazione per una colonna o riga:

  • col: intestazione per la colonna
  • row: intestazione per la riga

Aggiungendo scope con il valore col alle intestazioni della prima riga andiamo a indicare che sono le intestazioni per le celle sotto elencate.

Viceversa usando row indicheremo che le intestazioni si riferiscono alle celle della riga corrispondente (a destra).

l'attribut scope supporta anche altri due valori:

  • colgroup: intestazioni per il gruppo di colonne che la contiene
  • rowgroup: intestazioni per il gruppo di righe che la contiene

Per i gruppi di colonne si utilizza l’elemento colgroup, mentre per i gruppi di righe possiamo usare thead, tfoot et tbody (che vedremo più avanti).

Un’altra tecnica per collegare i dati di una cella con le appropriate intestazione è imputare ad ogni intestazione un id univoco, poi aggiungere l’attributo header a ogni dato. Questo attributo contiene una lista separata da spazi degli id di ogni cella di intestazione che si applica ai dati di quella cella. Questa tecnica è più complicata e dovrebbe essere utilizzata solo quando ci sono dati che debbano essere collegati a più di due celle di intestazione, quando l’attributo scope è insufficiente ad esempio in tabelle molto complesse o irregolari.

Per illustrare questo esempio ho modificato la tabella.

Combien de voitures sont garées dans mon garage?
Dati tecniciCatégorie
déplacementAlimentazione
Opel1.2GPLCorsa
Citroen1.1Benzinac2

Chiaramente questo metodo diventa complicato piuttosto in fretta, meglio usare l’attributo scope quando possibile.

Gruppi di righe: thead, tfoot et tbody

Le righe della tabella possono essere raggruppate in intestazioni (thead), pié di pagina (tfoot) e uno o più corpi (tbody). Ovviamente ogni gruppo di righe deve contenere una o più righe della tabella.

Se una tabella contiene una instestazione (thead), deve apparire prima delle sezioni footer (tfoot) e body (tbody). Se decidiamo di non usare l’intestazione o il footer l’elemento tbody il est pas obligatoire (ma neanche vietato, quindi lo usiamo a piacimento). La struttura della tabella con gruppi di righe somiglierà a questa:

<tableau>
   <thead>
      <tr></tr>
      … righe relative all'header
   </thead>
   <tfoot>
      <tr></tr>
      … righe relative al footer
   </tfoot>
   <tbody>
      <tr></tr>
      … righe relative al body
   </tbody>
   <tbody>
      <tr></tr>
      … righe relative al body della seconda tabella
   </tbody>
   … altre sezioni body se necessarie
</tableau>

Raggruppare le righe può essere vantaggioso per diverse ragioni:

  • semplifica applicare gli stili (CSS) delle sezioni thead, tfoot et tbody in modo indipendente, senza aggiungere classi o altro,
  • quando lanciamo la stampa di tabelle particolarmente lunghe alcuni browser (ad esempio quelli basati su gecko) ripetono l’informazione contenuta in thead et tfoot su ogni pagina stampata, rendendone più semplice la lettura,
  • separare le sezioni “entête” et “footer” dal body della tabella rende possibile per i browser di visualizzare lo scrolling del solo body.

Quali benefici

Può sembrare un lavoraccio creare delle tabelle accessibili in HTML, e in effetti per le tabelle complesse lo è. A volte è impossibile poterle creare a mano. Per le tabelle più semplici, comunque usare le celle di intestazione con l’attributo scope è più veloce e semplice.

Pare ovvio che chi utilizza tecnologie assistive come ad esempio gli screen reader ottengano un beneficio assoluto dalle tabelle ottimizzate per l’accessibilità. Provare a dare un senso a una tabella di dati grande e complessa semplicemente ascoltando una voce sintetizzata può essere molto difficile o addirittura impossibile. Semplificare e renderle accessibili è un dovere.

Meno ovvio è il beneficio ottenuto dal designer e dall’utente medio, ma una tabella accessibile è piena di markup a cui poter applicare stili CSS. Una tabella accattivante e ben visualizzata può rendere la tabella più semplice da leggere per tutti.

Questo articolo è apparso per la prima volta in inglese nel 2004 ed è abbastanza impressionante il fatto che sia ancora attuale nonostante i suoi 14 ans.

Pas assez?


TheJoe

Je garde ce blog comme un hobby par 2009. Je suis passionné de graphisme, la technologie, logiciel Open Source. Parmi mes articles ne sera pas difficile de trouver de la musique, et quelques réflexions personnelles, mais je préfère la ligne directe du blog principalement à la technologie. Pour plus d'informations me contacter.

Laisser un commentaire

Votre adresse email ne sera pas publiée. les champs requis sont indiqués *

Ce site utilise Akismet pour réduire le spam. Découvrez comment vos données de commentaire est traité.