Les tableaux, et les données tabulées

Souvent associés, à tort, à la mise en page HTML, les tableaux sont des éléments essentiels à la structuration de données tabulées (calendrier, feuilles de données, présentation de résultats, etc…). Il est vrai qu’il est fortement déconseillé d’utiliser les tableaux n’ayant pour objectif qu’une quelconque mise en page, mais lorsqu’il s’agit de données, les tableaux sont là, et nous permettent bien des choses. Prenons quelques instants pour en explorer les capacités, et leur mode d’emploi.

À la base de cette structure

Tout commence par une balise <table> qui va contenir l’ensemble du tableau… Cette balise peux posséder cinq attributs dont il est important de s’affranchir, surtout si vous souhaitez n’employer que des CSS pour gérer la mise en forme. Notez cependant qu’un seul pourra rester tel quel en tant qu’attribut (summary), il est donc conseillé de reléguer les quatre autres au niveau des feuilles de styles CSS. Il ne sont donc mentionné ici qu’à titre informatif et en décrire le rôle.

<table width="200" border="1" cellspacing="3" cellpadding="2" summary="résumé">

• width et border, qui, comme leur nom l’indique, définissent respectivement la largeur et la bordure à appliquer au tableau, mais encore une fois, il est préférable de prendre en compte ces notions au niveau des CSS
• cellspacing, qui n’est plus supporté en HTML5, et qui indique l’espacement à utiliser entre chaque cellules du tableau. Rapprochez vous de son homologue CSS, en le complétant par une information d’écrasement

  border-spacing:10px;
  border-collapse: separate; // ou collapse

• cellpadding prend en charge l’espace intérieur de la cellule, également non supporté depuis HTML5, mais qui est facilement remplaçable par un simple padding en CSS
• et enfin summary qui sera le seul attribut à devant rester en complément de la balise, et, qui permet de rapidement décrire le contenu du tableau, et ce, principalement à destination des lecteurs d’écran.

Ensuite, à l’intérieur de la balise, nous pouvons distinguer cinq nœuds de premier niveau ;

• Le titre, ou légende, du tableau utilisant une balise <caption>
• L’éventuelle définition des colonnes ainsi que leur groupement <colgroup>, <col>
• L’ensemble des rangées d’entête du tableau représenté par la balise <thead>
• La masse du corps du tableau contenu par la balise <tbody> et contenant toutes les rangées de contenu
• Le pied de tableau, souvent placé avant le groupe précédent, (ceci pour des question de latence lors du téléchargement lorsque les tableaux sont relativement volumineux), <tfoot>. Ce pied peut, à l’instar de l’entête, contenir plusieurs rangées, et se replacera automatiquement de manière correcte dans l’ordre d’affichage.

<table>
    <caption></caption>
    <colgroup>
        <col />
        <col />
    </colgroup>
    <col />
    <thead><!-- contenu entête --></thead>
    <tfoot><!-- contenu pied de tableau --></tfoot>
    <tbody><!-- contenu corps du tableau --></tbody>
</table>

Un tableau c’est une matrice

Comme à la classique bataille navale, un tableau c’est avant tout une grille composée de une ou plusieurs rangées (horizontales) et d’une ou plusieurs colonnes (verticales). S’il est vrai que vu de l’extérieur cette grille parait logique et simple, une fois dans le code cela est un peu moins évident à déceler, surtout, comme nous le verrons plus tard, quand certaines cellules se fusionnent entre elles.

Donc pour représenter les rangées nous employons des balises <tr></tr>, et tous les enfants de premiers niveaux que ces balises vont contenir sont des colonnes. Pour l’instant nous dirons que ces enfants sont des balises de type <td></td>. Par exemple un tableau de deux rangées sur trois colonnes se représente de la manière suivante :

<table>
    <tr>
        <td>Rangée 1 Colonne 1</td>
        <td>Rangée 1 Colonne 2</td>
        <td>Rangée 1 Colonne 3</td>
    </tr>
    <tr>
        <td>Rangée 2 Colonne 1</td>
        <td>Rangée 2 Colonne 2</td>
        <td>Rangée 2 Colonne 3</td>
    </tr>
</table>

Groupement par colonne ou rangées

Il est possible de grouper d’une part les colonnes, et ce nous le faisons à la demande et de la manière qui nous convient, en associant des balises <colgroup> avec des balises <col>. Les balises <colgroup> sont facultatives et permettent uniquement de regrouper un certain nombre de balises <col> entre elles, soit en les englobant, soit en usant de l’attribut span="". Les balise <col> sont des balises auto-fermantes qui représentent indépendamment chaque colonnes dans l’ordre de leur utilisation.

En ce qui concerne les rangées, leur groupement est un peu plus fermé, dans le sens où il n’existe que trois groupes possibles <thead>, <tfoot> et <tbody>. Chacun de ces groupes étant facultatifs, peuvent contenir zéro ou plusieurs rangés (<tr>).

Il est donc possible en usant de ces groupes horizontaux, et/ou, verticaux de cibler les groupes de cellules que l’on souhaite atteindre avec, par exemple, des feuilles de styles CSS.

<table>
    <colgroup class="groupe-colonne">
        <col />
        <col class="colonne"/>
    </colgroup>
    <col />
    <thead><!-- contenu entête --></thead>
    <tfoot><!-- contenu pied de tableau --></tfoot>
    <tbody><!-- contenu corps du tableau --></tbody>
</table>

.groupe-colonne {
    /* styles de ce groupe vertical*/
}
.colonne {
    /* styles de ce groupe vertical*/
}
tfoot {
    /* styles de ce groupe horizontal*/
}

Rangées d’entête, corps et pied du tableau

Quelque soit le niveau, qu’il s’agissent de l’entête, du corps ou du pied de tableau, vont s’égrainer autant de rangées que nécessaire. Les rangées sont représentées par le jeu de balises <tr></tr>. Les colonnes seront en fait les enfants de ces rangées, sous formes de cellules, et se repartiront sur deux types de cellules : entête <th>, ou classique <td>.

Bien que par défaut, les navigateurs les distinguent visuellement (gras et centré pour les premières, et normal et ferré à gauche pour les seconde), il est certain que les CSS pourront venir apporter une distinction visuelle plus précise entre chaque type de cellules.

Une balise <th>, par rapport à une balise <td>, distingue donc la nature d’entête d’une cellule. Afin de pouvoir préciser pour les lecteurs d’écran si cette entête correspond à l’entête d’une rangée, ou à celle d’une colonne, il existe l’attribut scope qui définit le sens d’orientation de l’entête (cet attribut n’est pas présent sur les cellules de type <td>). Quatre valeurs sont alors disponibles : col, row, colgroup et rowgroup. Si les deux premières parlent d’elles-même, la troisième équivaut à l’appartenance d’un groupe de colonnes <colgroup> définit en amont du tableau, et la dernière à un groupe de rangées s’étendant naturellement dans les limites d’un <thead>, <tbody> ou <tfoot>.

<table>
    <tr>
        <th scope="col">Tête col 1</th>
        <td>Contenu 1</td>
        <td>Contenu 2</td>
    </tr>
    <tr>
        <th scope="row">Tête col 2</th>
        <td>Contenu 3</td>
        <td>Contenu 4</td>
    </tr>
</table>

Organisation entre cellules

Il est possible de fusionner les cellules, que cela soit horizontalement, verticalement ou dans les deux sens. Afin de pouvoir indiquer cela dans la structuration HTML, il existe deux attributs, colspan et rowspan qui permettent de préciser l’étendue de cette fusion (nombre entier précisant le nombre de cellules concernées par la fusion). Cela ne rend pas forcément le code HTML facilement lisible, mais le rendu visuel et les lecteurs d’écran auront suffisamment d’informations pour s’y retrouver.

Prenons un exemple, un tableau de quatre rangées contenant quatre colonnes réparties entre diverses cellules d’entête et de contenus. Nous voyons que nous avons bien quatre séries de <tr>, représentant les quatre rangées, mais aucune ne contient le même nombre d’enfants, 3 pour la première, 4 pour la seconde et 2 pour la troisième et enfin 1 pour la dernière.

<tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">Tête col 1</th>
    <th scope="col" colspan="2">Tête col 2</th>
</tr>
<tr>
    <th scope="row">Tête row 1</th>
    <td rowspan="3">Contenu 1</td>
    <td>Contenu 2</td>
    <td>Contenu 3</td>
</tr>
<tr>
    <th scope="row">Tête row 2</th>
    <td colspan="2" rowspan="2">Contenu 4</td>
</tr>
<tr>
    <th scope="row">Tête row 3</th>
</tr>

On ne revient pas sur les attributs scope (row et col), qui précisent dans quel sens les balises <th> appliquent leurs entêtes (rangées ou colonnes).

Analyse du tableau précédent

À y regarder de plus près, dans la première rangée, nous voyons que la troisième cellule contient un attribut colspan de valeur 2… donc les deux dernières cellules de la rangée seront fusionnées horizontalement.

Dans la seconde rangée, les quatre cellules sont présentes, mais nous voyons que la seconde cellule contient un attribut rowspan de valeur 3, qui donc de par cette fusion va retirer une cellule dans les deux rangées qui suivent (verticalement).

Dans la troisième rangées, la seconde cellule manque car elle vient d’être happée par la fusion verticale précédente, et la troisième cellule se fusionne à la fois horizontalement avec la cellule qui la suit et verticalement avec les deux cellules de la rangée du dessous (attribut colspan et rowspan, tout deux de valeur 2).

Enfin la quatrième rangée ne contient que sa première cellule, du fait que la troisième a été fusionnée verticalement avec la seconde colonne et les deux dernières cellules avec la rangée du dessus.

Prenons un exemple qui résume et emploi les diverses possibilités

Complétons cet article avec l’exemple d’un tableau de résultats météorologiques relativement complet. Le plus simple pour en observer le code, reste d’utiliser l’inspecteur d’éléments du navigateur, plutôt que d’encombrer l’article avec un nombre de lignes assez conséquent ;

Il est vrai que beaucoup d’informations de ce tableau peuvent être mieux interprétées en les associant avec les CSS qui les accompagnent. Afin de simplifier la lecture du code HTML et des feuilles de styles CSS associées, vous pouvez télécharger ces deux documents afin de les isoler et d’en simplifier leur lecture.