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, la mise en page se fait avec 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. Vous pouvez afficher la légende au-dessus ou au-dessous de la table, 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>La voiture dans mon 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>Les machines de mon 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>La voiture dans mon 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>La voiture dans mon 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 Il définit une cellule d'en-tête et fournit des informations d'en-tête d'une colonne ou d'une rangée:

  • col: tête de la colonne
  • row: en-tête de la rangée

Ajout scope avec la valeur avec les en-têtes de la première ligne, nous allons indiquer que ce sont les en-têtes pour les cellules ci-dessous.

A l'inverse en utilisant row Nous noterons que les en-têtes se rapportent aux cellules de la ligne correspondante (droit).

l'attribut scope aussi il prend en charge deux autres valeurs:

  • colgroup: les en-têtes pour le groupe de colonnes qui contient
  • rowgroup: les en-têtes pour le groupe de lignes qui contient

Pour les groupes de colonnes que vous utilisez l'élément colgroup, tandis que pour les groupes de lignes peuvent utiliser thead, tfoot et tbody (nous verrons).

Une autre technique pour lier les données d'une cellule avec l'en-tête approprié est attribuable à chacun un en-tête id univoques, puis ajoutez l'attribut header à tout donné. Cet attribut contient une liste séparée de l'espace de id de chaque cellule d'en-tête qui applique les données de cette cellule. Cette technique est plus compliquée et ne doit être utilisé quand il y a des données qui devrait être liée à plus de deux cellules d'en-tête, lorsque l'attribut scope Il ne suffit pas, comme dans les tableaux très complexes ou irréguliers.

Pour illustrer cet exemple, je changé la table.

Combien de voitures sont garées dans mon garage?
caractéristiquesCatégorie
déplacementpuissance
Opel1.2GPLCorsa
Citroen1.1essencec2

Il est clair que cette méthode se complique assez rapidement, Il vaut mieux utiliser l'attribut scope lorsque cela est possible.

Les groupes de lignes: thead, tfoot et tbody

Les lignes de la table peuvent être regroupés en-têtes (thead), Pie page di (tfoot) et un ou plusieurs organes (tbody). Il est évident que chaque groupe de lignes doit contenir une ou plusieurs lignes de la table.

Si une table contient une instestazione (thead), doit se présenter devant les sections de bas de page (tfoot) corps e (tbody). Si nous décidons de ne pas utiliser l'élément d'en-tête ou le pied de pagetbody il est pas obligatoire (mais pas interdite, nous utilisons donc à volonté). La structure de la table avec des groupes ressemblent lignes de ce:

<tableau>
   <thead>
      <tr></tr>
      ... RIGHE all'header relatif
   </thead>
   <tfoot>
      <tr></tr>
      ... lignes relatives au pied de page
   </tfoot>
   <tbody>
      <tr></tr>
      ... lignes relatives au corps
   </tbody>
   <tbody>
      <tr></tr>
      ... lignes relatives au corps de la deuxième table
   </tbody>
   ... d'autres sections du corps si nécessaire
</tableau>

Le regroupement des lignes peut être avantageux pour plusieurs raisons:

  • appliquer des styles simplifie (CSS) sections thead, tfoot et tbody indépendamment, sans ajouter de classes ou d'autres,
  • lors du lancement de la libération des tables particulièrement longs certains navigateurs (par exemple ceux basés sur gecko) répéter les informations contenues dans thead et tfoot sur chaque page imprimée, procure une lecture,
  • des sections séparées “entête” et “footer” le corps de la table permet aux navigateurs pour afficher le défilement le seul corps.

Quels sont les avantages

Il peut sembler beaucoup de travail pour créer des tables accessibles au format HTML, et même pour les tables complexes, il est. Parfois, il est impossible qu'ils peuvent être créés à la main. Pour les tables simples, toujours utiliser les cellules d'en-tête avec l'attribut scope il est plus rapide et plus facile.

Il semble évident que ceux qui utilisent les technologies d'assistance telles que les lecteurs d'écran obtenir un avantage absolu de tables optimisé pour l'accessibilité. Essayez de comprendre un tableau de données importantes et complexes simplement en écoutant une voix synthétisée peut être très difficile, voire impossible. Pour simplifier et de les rendre accessibles est un devoir.

Moins évidente est l'avantage obtenu par le concepteur et l'utilisateur moyen, mais une table accessible est le balisage complet auquel appliquer des styles CSS. Une table attrayante et bien affichée peut rendre le tableau plus facile à lire pour tout le monde.

cet article Il est apparu pour la première fois en anglais 2004 et il est assez impressionnant qui est toujours d'actualité malgré son 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.

0 commentaires

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é.