Les Tableaux
Création d'un tableau en XHTML
La première réflexion à avoir quand on va créer un tableau c'est de savoir ce qu'on va mettre dedans. Ensuite, il faut s'interroger sur les relations entre les données contenues dans le tableau. C'est ainsi qu'on peut lui trouver un titre, mettre en valeur tel ou tel contenu. Il y a 4 sortes de balises à connaitre pour faire des tableaux en XHTML.
- La balise table : La première balise à connaître pour créer un tableau en XHTML c'est la balise <table>< /table>. Elle délimite la partie code du tableau lui-même.
- La balise tr : Après avoir spécifié la balise table, on définit la structure du tableau. C'est-à-dire qu'il faut savoir comment seront structurées les lignes et les cellules du tableau. Les balises < tr></tr> permettent de définir une ligne.
- La balise td : En termes de balise, les cellules sont emboîtées dans les lignes. Un bloc de balise < tr></tr> contient un ou plusieurs blocs de balise <td></td>.Ces derniers correspondent à des cellules.
- La balise th : La balise th quant à elle, permet d'organiser le contenu du tableau. Son usage devient très courant surtout qu'elle permet d'appliquer facilement les styles CSS aux tableaux. On l'utilise juste après la balise table.
L'exemple suivant nous montre donc ce que peut être un tableau à la base.
Aperçu :
| titre cellule1 | titre cellule2 |
|---|---|
| ligne1 cellule1 | ligne1 cellule2 |
| ligne2 cellule1 | ligne2 cellule2 |
Code XHTML :
<table> <tr> <th>titre cellule1</th> <th> titre cellule2</th> </tr> <tr> <td>ligne1 cellule1</td> <td> ligne1 cellule2</td> </tr> <tr> <td>ligne2 cellule1</td> <td> ligne2 cellule2</td> </tr> </table>
Ce tableau contient donc 3 lignes et 2 cellules. Sur la première ligne se trouvent les titres de chaque cellule.
Fusionner les colonnes d'un tableau
Pour fusionner plusieurs colonnes, on utilise l'attribut colspan. On lui donne une valeur numérique selon le nombre de colonnes à fusionner. Dans l'exemple précédent, essayons par exemple de fusionner les deux colonnes de la deuxième ligne.
Aperçu :
| titre cellule1 | titre cellule2 |
|---|---|
| ligne 1 cellule 1 et cellule2 fusionnées | |
| ligne2 cellule1 | ligne2 cellule2 |
Code XHTML :
<table> <tr> <th>titre cellule1</th> <th> titre cellule2</th> </tr> <tr> <td colspan="2">ligne 1 cellule 1 et cellule2 fusionnées</td> </tr> <tr> <td>ligne2 cellule1</td> <td> ligne2 cellule2</td> </tr> </table>
Fusion de ligne
En appliquant rowspan à une balise td, on a les mêmes résultats sur les lignes. Comme colspan, on lui assigne une valeur numérique.
Aperçu :
| titre cellule1 | titre cellule2 |
|---|---|
| cellule1 ligne1 et 2 fusionnées | ligne1 cellule2 |
| ligne2 cellule2 |
Code XHTML :
<table> <tr> <th>titre cellule1</th> <th> titre cellule2</th> </tr> <tr> <td rowspan="2">cellule1 ligne1 et 2 fusionnées </td> <td> ligne1 cellule2</td> </tr> <tr> <td> ligne2 cellule2</td> </tr> </table>
Un tableau compartimenté
Compartimenter un tableau consiste à le diviser en 3 parties bien distinctes. Lorsque le tableau est très grand, il est intéressant de le découper en compartiments. Trois zones différentes du tableau sont définies chacune par la balise associée :
- L'en-tête : C'est la partie haute du tableau, elle se définit avec les balises <thead></thead>
- Le corps : C'est la partie centrale du tableau, elle se définit avec les balises <tbody></tbody>
- Le pied du tableau : C'est la partie basse du tableau, il se définit avec les balises <tfoot></tfoot>
Généralement, l'entête contient les titres de chaque cellule. L'entête sera donc la partie où il y a les th. La partie tbody est le corps du tableau lui-même. Il correspond au contenu. Dans le pied du tableau, on met des remarques, ou l'auteur, ou la source.
Certains se servent aussi de tfoot pour y placer des repères, en répétant tout simplement ce qu'il y a dans thead par exemple. La norme W3C exige qu'on mette la balise tfoot avant tbody dans le code si on veut que notre page soit valide.
Légende d'un tableau
L'attribut caption permet de mettre une légende ou un titre sur le tableau. Il doit décrire en quelques mots ce que contient le tableau.
Avec toutes ces nouvelles notions sur le tableau, en voici encore un autre exemple avec un tableau plus élaboré.
Aperçu :
| Nom | Mathématiques | Sciences naturelles | Physique | ||||||
|---|---|---|---|---|---|---|---|---|---|
| Examen | Devoir | Moyenne | Examen | Devoir | Moyenne | Examen | Devoir | Moyenne | |
| Résultats publiés le 01/09/2008 | |||||||||
| Assan Tessan | 10 | 14 | 12 | 12 | 18 | 15 | 13 | 11 | 12 |
| Bernard Chateau | 8 | 10 | 9 | 8 | 9 | 8,5 | 13 | 6 | 9,5 |
| Helmut Shröder | 12 | 18 | 15 | 8 | 9 | 8,5 | 13 | 6 | 9,5 |
| Willy Jons | 13 | 6 | 9,5 | 8 | 9 | 8,5 | 8 | 10 | 9 |
Code XHTML :
<table> <caption>Notes des élèves de la classe de sixième</caption> <thead> <tr> <th rowspan="2">Nom</th> <th colspan="3" abbr="math">Mathématiques</th> <th colspan="3" abbr="sn">Sciences naturelles</th> <th colspan="3" abbr="phys">Physique </th> </tr> <tr> <th>Examen</th> <th>Devoir</th> <th>Moyenne</th> <th>Examen</th> <th>Devoir</th> <th>Moyenne</th> <th>Examen</th> <th>Devoir</th> <th>Moyenne</th> </tr> </thead> <tfoot> <tr> <th colspan="10">Résultats publiés le 01/09/2008</th> </tr> </tfoot> <tbody> <tr> <td>Assan Tessan</td> <td>10</td> <td>14</td> <td>12</td> <td>12</td> <td>18</td> <td>15</td> <td>13</td> <td>11</td> <td>12</td> </tr> <tr> <td>Bernard Chateau</td> <td>8</td> <td>10</td> <td>9</td> <td>8</td> <td>9</td> <td>8,5</td> <td>13</td> <td>6</td> <td>9,5</td> </tr> <tr> <td>Helmut Shröder</td> <td>12</td> <td>18</td> <td>15</td> <td>8</td> <td>9</td> <td>8,5</td> <td>13</td> <td>6</td> <td>9,5</td> </tr> <tr> <td>Willy Jons</td> <td>13</td> <td>6</td> <td>9,5</td> <td>8</td> <td>9</td> <td>8,5</td> <td>8</td> <td>10</td> <td>9</td> </tr> </tbody> </table>
Tableaux XHTML et Accessibilité
L'accessibilité est un des principes fondamentaux de XHTML. Rendre la page accessible à tout le monde, même aux personnes malvoyantes est l'un de ses objectifs. EnXHTML, il y a de nombreuses balises pour l'accessibilité des tableaux. Il y a notamment celles très utilisées en CSS, dont on parlera dans le tutoriel CSS. Mais dans ce chapitre on va surtout parler de deux notions: summary et abbr
summary
La balise table peut avoir un attribut qui s'appelle summary. Le rôle de cet attribut est pareil à celui de la balise caption sauf qu'il permet une description plus longue. Ceci est fait pour que les personne malvoyantes accèdent à une description du contenu. Il n'est donc pas affiché par les navigateurs habituels. On l'insère dans la balise table comme suit
<table summary="Notes des élèves de la classe de sixième du collège de France pour l'année scolaire 2008-2009">
L'attribut abbr
L'attribut abbr quant à lui est un attribut de la balise h. Il permet de définir un titre plus court. Toujours pour les navigateurs des malvoyants, l'objectif est d'éviter la répétition d'un titre de colonne trop long à chaque ligne.
Aperçu :
| Mathématiques ... | Sciences naturelles ... | Physique ... |
|---|
Code XHTML :
<tr> <table> <th abbr="math">Mathématiques... </th> <th abbr="sn">Sciences naturelles... </th> <th abbr="phys">Physique... </th> </tr> </table>
