Le langage HTML/Tableaux

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

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`

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

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

Avertissement !

La mise en forme devrait être séparée de la structure : la mise en forme devrait être faite en CSS, tandis que le HTML définit la structure du contenu. Ces attributs de mise en forme sont donc très peu utilisés en pratique, et ne sont pas recommandés. Ils continuent à être supportés par les navigateurs, mais pourraient ne plus l'être dans une prochaine version de HTML.

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

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`

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

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

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

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é. Elle peut servir également pour la présentation d'une somme ou d'un résumé des colonnes en bas du tableau.

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

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

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

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

(anglais) Tables in HTML documents, spécifications du W3C pour le HTML 4.01

Balises de bases

Attributs de la balise table

Attributs de mise en forme

Attribut d'accessibilité

Attributs des balises tr, th et td

Balises de groupement

Séparation des groupes

Lignes

Colonnes

Fusionner des cellules

Accessibilité aux malvoyants

Voir aussi

Attributs de la balise `table`

Attributs des balises `tr`, `th` et `td`