Le langage HTML/Tableaux

Un livre de Wikilivres.
Sauter à la navigation Sauter à la recherche


Avant toute chose, il est nécessaire de rappeler que l'utilisation de tableaux doit se limiter au classement et à la présentation des données. Ce n'est donc pas un outil de mise en page même s'il est souvent employé, par erreur, à cet effet. Car par sa rigueur voire sa rigidité, il empêche et complexifie, à l'usage, la mise en page d'un site internet.
En revanche, pour la présentation de données statistiques par exemple, il ne possède aucune concurrence.

Balises de bases[modifier | modifier le wikicode]

La déclaration d'un tableau se fait grâce à la balise table ;

  • la balise tr (table row) permet de définir une ligne, une rangée dans un tableau ; cette balise encadre les balises td de cellules ;
  • la balise td (table data) permet de définir une cellule de donnée dans une ligne ; elle sera contenue obligatoirement dans la balise tr ;
  • la balise th (table header) permet de définir des cellules comme étant des entêtes de lignes ou de colonnes ; généralement, le texte sera mis en emphase forte suivant les styles par défaut du navigateur ou de l'utilisateur ;
  • la balise caption (« légende ») permet de donner un titre au tableau.
Exemple élémentaire
<table border="1" >

   <caption>Table simple</caption>

   <tr>             <!-- ligne 1 -->
      <th> a1 </th> <!-- case 1 -->
      <th> a2 </th> <!-- case 2 -->
   </tr>

   <tr>             <!-- ligne 2 -->
      <td> b1 </td> <!-- case 1 -->
      <td> b2 </td> <!-- case 2 -->
   </tr>

</table>
donne
'
Table simple
a1 a2
b1 b2

Attributs de la balise table[modifier | modifier le wikicode]

Comme toutes les balises, la balise table peut avoir des attributs. On peut bien sûr utiliser les attributs habituels (id, class, lang, xml:lang, title…).

Attributs de mise en forme[modifier | modifier le wikicode]

Parmi les attributs spécifiques, nous avons des attributs de mise en forme :

  • border : permet de définir si la table a des traits (bordure de cases) ou pas, et quelle est leur épaisseur en pixels :
    border="0" indique que la table n'a pas de traits, border="1" indique qu'elle a des traits de un pixel de large…
  • width : permet d'indiquer la largeur totale du tableau, en pixels (nombre entier seul) pourcentage de la page totale (par exemple "30%") ;
  • rules : si l'on a une bordure (attribut border ayant une valeur non nulle), on peut choisir quels sont les traits intérieurs qui sont tracés :
    • all (valeur par défaut si border est non nul) : tous les traits sont tracés ;
    • rows : les lignes sont séparées par des traits, mais pas les colonnes ;
    • cols : les colonnes sont séparées par des traits, mais pas les lignes ;
    • none : aucun trait intérieur n'est tracé ;
  • frames ou frame (sans s) : si l'on a une bordure (attribut border ayant une valeur non nulle), on peut choisir quels sont les traits du cadre du tableau qui sont tracés :
    • border (valeur par défaut si border est non nul) : tous les traits sont tracés ;
    • hsides : seuls les traits horizontaux sont tracés (haut et bas) ; above : seul le trait en haut est tracé ; below : seul le trait en bas est tracé ;
    • vsides : seuls les traits verticaux sont tracés (gauche et droite) ; lhs : seul le trait à gauche est tracé (left hand side) ; rhs : seul le trait à droite est tracé (right hand side) ;
  • void : aucun trait de contour n'est tracé.
Exemple
<table
  lang="en"
  title="Statistics for 2000"
  border="1"
  rules="all"
  frames="border"
  width="30%">

  <caption>Statistics for 2000</caption>
  …
</table>

Notons que ces attributs de mise en forme peuvent être remplacés par du CSS.

Attribut d'accessibilité[modifier | modifier le wikicode]

Le plus grand problème des tableaux est l'accessibilité aux malvoyants. L'attribut summary permet de fournir une explication longue du tableau ; son contenu ne sera pas affiché par les navigateurs graphiques, mais interprété par les navigateurs en Braille ou les lecteurs vocaux.

Attributs des balises tr, th et td[modifier | modifier le wikicode]

  • align : indique l'alignement horizontal : left (aligné à gauche), center (centré), right (aligné à droite) ou justify (justifié) ;
  • valign : indique l'alignement vertical : top (aligné en haut), middle (centré) ou bottom (aligné en bas).

Balises de groupement[modifier | modifier le wikicode]

Les balises de groupement permettent comme leur nom l'indique de grouper des cellules entre elles suivant leur nature. Il est possible de créer des groupes de lignes ou de colonnes. La définition correcte de ces groupes permet entre autres une définition plus aisée des styles, comme par exemple séparer les groupes par des traits.

Séparation des groupes[modifier | modifier le wikicode]

Si l'on a défini une bordure (attribut border ayant une valeur non nulle), on peut choisir de ne pas séparer les cellules du tableau par des traits, mais uniquement les groupes de lignes ou de colonnes. Pour cela, on indique l'attribut rules="groups" dans la balise d'ouverture table :

<table border="1" rules="groups">
  …
</table>

Lignes[modifier | modifier le wikicode]

La balise thead (table header) permet de grouper les lignes d'entête. Elle est généralement utilisée avec la balise th.

La balise tbody (table body) permet de grouper les lignes du « corps », c'est-à-dire de la partie principale du tableau.

La balise tfoot (table footer) permet, à l'instar des deux précédentes, de grouper les lignes du pied de tableau. Elle est par exemple utilisée lorsque, dans le cas d'un tableau très long, les titres sont reproduits à la fin dans le but d'obtenir une meilleur lisibilité.

Exemple
<table border="1" frame="void" rules="all">

  <thead>
     <tr>
        <th> a1 </th>
        <th> a2 </th>
     </tr>
  </thead>

  <tfoot>
     <tr>
        <td> a1 </td>
        <td> a2 </td>
     </tr>
  </tfoot>

  <tbody>
     <tr>
        <td> b1 </td>
        <td> b2 </td>
     </tr>
     <tr>
        <td> c1 </td>
        <td> c2 </td>
     </tr>
  </tbody>

</table>
ce qui donne
'
a1 a2
b1 b2
c1 c2
a1 a2

Colonnes[modifier | modifier le wikicode]

Les balises col et colgroup permettent de définir un groupe de colonnes dans le but d'appliquer un style ou une taille précise à une ou plusieurs colonnes.

Le principal attribut de colgroup est span, qui indique le nombre de colonnes faisant partie du groupe. S'il est absent, la valeur par défaut est "1".

On peut utiliser tous les attributs spécifiques à td, ils s'appliqueront alors à toutes les colonnes du groupe.

Exemple
<table border="1" rules="groups">

  <colgroup span="2" width="40" align="left" />
  <colgroup span="2" width="10" align="center" />

  <tr>
    <th> a </th> <th> b </th> <th> c </th> <th> d </th> 
  </tr>
  <tr>
    <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> 
  </tr>

</table>
donne
'
a b
1 2
c d
3 4

Au lieu de l'attribut span, on peut utiliser des éléments col pour désigner chaque colonne ; cela permet d'individualiser les attributs pour chaque colonne.

Exemple
<table border="1" rules="groups">

  <colgroup align="left">
    <col width="20" />
    <col width="40" />
  </colgroup>
  <colgroup span="2" align="center" width="10" />

  <tr>
    <th> a </th> <th> b </th> <th> c </th> <th> d </th> 
  </tr>
  <tr>
    <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> 
  </tr>

</table>
donne
'
a b
1 2
c d
3 4

La balise col peut contenir un attribut span, c'est-à-dire qu'elle peut désigner plusieurs colonnes. Les mêmes attributs s'appliquent alors à ces colonnes, mais cela ne constitue pas un groupe au sens du HTML ; notamment, l'attribut rules="groups" de la balise table n'agit qu'entre les éléments colgroup et pas entre les éléments col.

Fusionner des cellules[modifier | modifier le wikicode]

Il est possible de fusionner des cellules entre elles en utilisant des attributs de la balise td.

La fusion de plusieurs cellules d'une même ligne, c'est-à-dire de plusieurs colonnes, se fait grâce à l'option colspan et la fusion de plusieurs cellules appartenant à une même colonne, c'est-à-dire de plusieurs lignes, avec l'option rowspan. Ces deux attributs prennent la valeur correspondant aux nombres de cellules que l'on souhaite fusionner.

Exemple
pour fusionner trois cellules d'une colonne :
<table>
    <tr>
        <td colspan="3">triple cellule</td>
    </tr>
    <tr>
        <td>cellule simple</td>
        <td>deuxième cellule simple</td>
        <td>troisième cellule simple</td>
    </tr>
</table>
Et voilà le résultat :
'
triple cellule
cellule simple deuxième cellule simple troisième cellule simple

Note
Il ne faut pas confondre <td colspan=…> avec <col span=…>. Dans le premier cas, on a une fusion, c'est-à-dire que l'on a une seule et unique cellule ; dans le deuxième cas, on a simplement plusieurs colonnes distinctes qui partagent des attributs communs.

La fusion des cellules d'une colonne est un peu plus complexe, en raison de la construction linéaire des tableaux. En effet, lorsqu'une cellule occupe plusieurs lignes, elle est définie dans la première ligne et pas dans les lignes suivantes ; celles-ci contiennents donc un élément td de moins.

Exemple
<table>
    <tr>
<!-- La première cellule des trois prochaines lignes seront fusionnées avec la suivante -->
        <td rowspan="3">cellule 1</td>
        <td>cellule simple</td>
        <td>cellule simple</td>
        <td>cellule simple</td>
    </tr>
    <tr>
<!-- La première cellule de cette ligne étant fusionnée avec la précédente,
elle ne doit pas être définie -->
        <td>cellule simple</td>
        <td>cellule simple</td>
        <td>cellule simple</td>
    </tr>
    <tr>
<!-- La première cellule de cette ligne étant fusionnée avec la précédente,
elle ne doit pas être définie -->
        <td>cellule simple</td>
        <td>cellule simple</td>
        <td>cellule simple</td>
    </tr>
</table>
ce qui donne
'
cellule 1 cellule simple cellule simple cellule simple
cellule simple cellule simple cellule simple
cellule simple cellule simple cellule simple

Accessibilité aux malvoyants[modifier | modifier le wikicode]

Nous avons déjà vu ci-dessus comment mettre une description de la table à l'attention des malvoyants.

L'autre problème est celui de la lecture de la table. En effet, la table est lue linéairement, ligne par ligne et colonne par colonne. Ainsi, il est difficile de faire le lien entre le contenu d'une cellule et les en-têtes qui s'y rattachent (nom de la ligne et de la colonne), alors que c'est ce lien qui distingue la table d'une simple liste.

Pour contourner ce problème, on met un identifiant à chaque en-tête avec l'attribut id, et pour chaque cellule on indique l'identifiant des en-têtes qui s'y rattachent avec l'attribut headers.

Exemple
 <table
   border="1"
   summary="La table indique, pour chaque mois de l'année,
     la longueur de ce mois
     en jours et en heures" >
 
   <caption> Longueur des mois </caption>
 
   <tr>
      <td> </td>
      <th id="col2"> Janvier </th>
      <th id="col3"> Février </th>
      <th id="col4"> Mars </th>
   </tr>
 
   <tr>
      <th> Durée en jours </th>
      <td headers="col2"> 31 </td>
      <th headers="col3"> 28 ou 29 </td>
      <th headers="col4"> 31 </td>
   </tr>
 
   <tr>
      <th> Durée en heures </th>
      <td headers="col2"> 744 </td>
      <td headers="col3"> 672 ou 696 </td>
      <td headers="col4"> 744 </td>
   </tr>
 
 </table>

Notons que l'en-tête peut aussi bien se trouver sur la première colonne de la ligne, mais cela ne pose en général pas de problème : puisque les données suivent l'en-tête, on associe facilement l'en-tête aux données, l'utilisation de id et headers est superflue.

S'il n'y a pas d'ambiguïté, et notamment pas de fusion de cellule, on peut utiliser l'attribut scope dans la balise.

Dans le cas d'un en-tête de colonne, on utilisera scope="col" et pour un en-tête de ligne, on utilisera scope="row" dans la balise td de la première cellule.

Si la personne veut lire directement le contenu d'une cellule, alors la ligne n'est plus lue en entier, on perd l'information de l'en-tête de ligne. Il peut donc être intéressant d'utiliser scope="col" et scope="row" conjointement.

th, on ne définit alors pas d'identifiant :

 <table
   border="1"
   summary="La table indique, pour chaque mois de l'année,
     la longueur de ce mois
     en jours et en heures" >
 
   <caption> Longueur des mois </caption>
 
   <tr>
      <td> </td>
      <th scope="col"> Janvier </th>
      <th scope="col"> Février </th>
      <th scope="col"> Mars </th>
   </tr>
 
   <tr>
      <th scope="row" abbr="jours"> Durée en jours </th>
      <td> 31 </td>
      <td> 28 ou 29 </td>
      <td> 31 </td>
   </tr>
 
   <tr>
      <th scope="row" abbr="heures"> Durée en heures </th>
      <td> 744 </td>
      <td> 672 ou 696 </td>
      <td> 744 </td>
   </tr>
 
 </table>

L'attribut abbr utilisé ci-dessus permet de raccourcir le texte lu par la suite.

Voir aussi[modifier | modifier le wikicode]