Utilisation des tableaux
Jadis les tableaux constituaient l'armature principale d'une page Web, toutes les pages
étaient structurées avec des tableaux.
Le développement des CSS a petit à petit grignoté leur position dominante mais pas au point
de les remiser à la cave comme certains sites essayent de nous le faire croire.
Les tableaux doivent être utilisés avec discernement, non plus comme la base de structuration d'une page mais comme un outil bien pratique pour présenter des données.
Ils restent une valeur sûr en matière de mise en page, s'en passer est une lourde erreur...
Un simple tableau
Structure d'un simple tableau :
- <table> et </table> délimitent le tableau
- <caption> et </caption> délimitent le titre du tableau
- <tr> et </tr> (table row) délimitent une ligne, aucune information n'y est intégrée directement
- <th> et </th> (table heading) délimitent une cellule d'en-tête, pour l'en-tête des colonnes, le texte est mis en gras et centré
- <td> et </td> (table data) délimitent une cellule sur la ligne
- Le tableau doit être rectangle, chaque ligne contient le même nombre de cellules
Démo
<table border=1>
<caption>Les variables globales en php</caption>
<tr>
<th>Tableaux associatifs</th>
<th>Description</th>
</tr>
<tr>
<td>$_GET</td>
<td>Pour récupérer les variables passées par url ou par la méthode GET d'un formulaire.</td>
</tr>
<tr>
<td>$_POST</td>
<td>Pour récupérer les variables passées par la méthode POST d'un formulaire.</td>
</tr>
<tr>
<td>$_FILES</td>
<td>Pour récupérer les variables de fichiers envoyées par formulaire.</td>
</tr>
<tr>
<td>$_COOKIE</td>
<td>Pour récupérer les cookies.</td>
</tr>
<tr>
<td>$_SESSION</td>
<td>Pour récupérer les variables de session.</td>
</tr>
<tr>
<td>$_REQUEST</td>
<td>Pour récupérer les variables passées par n'importe quel mécanisme d'entrée.</td>
</tr>
</table>
Fusionner les cellules sur les colonnes
colspan permet de fusionner horizontalement.
Démo
<table border=1>
<caption>Histoire</caption>
<tr>
<th>L'antiquité</th>
<th>Le moyen-âge</th>
<th>Les temps modernes</th>
<th>L'époque contemporaine</th>
</tr>
<tr>
<td>De l'apparition de l'écritre à la chutte de l'Empire romain (476) .</td>
<td>De 476 à la prise de Constantinomple à la découverte de l'Amérique (1492)</td>
<td>De 1492 à la Révolution française (1789)</td>
<td>De 1789 à nos jours</td>
</tr>
<tr>
<td colspan=4>© ttsi</td>
</tr>
</table>
Fusionner les cellules sur les lignes
rowspan permet de fusionner verticalement.
Démo
<table border=1>
<caption>Histoire</caption>
<tr>
<td rowspan=5>Les<br>Rois<br> de France</td>
<th>Mérovingiens</th>
<th>Carolingiens</th>
<th>Capétiens</th>
</tr>
<tr>
<td>Clovis Ier</td>
<td>Pépin le Bref</td>
<td>Hugues Capet</td>
</tr>
<tr>
<td>Clodomir</td>
<td>Carloman Ier</td>
<td>Robert II</td>
</tr>
<tr>
<td>Thierry Ier</td>
<td>Charle Ier le Grand</td>
<td>Henry Ier</td>
</tr>
<tr>
<td>etc.</td>
<td>etc.</td>
<td>etc.</td>
</tr>
</table>
Fusionner les lignes et les colonnes
L'utilisation conjointe de colspan et rowspan permet de fusionner horizontalement et verticalement.
Démo
<table border=1>
<caption>La Galerie des Offices, oeuvres principales</caption>
<tr>
<th>Origine</th>
<th>Duecento</th>
<th>Trecento</th>
<th>Trecento</th>
</tr>
<tr>
<td>La galerie des Offices est probablement le plus vieux musée de conception moderne.<br>
Ouvert au public en 1765, il était possible de le visiter sur demande et accompagné d'un guide
dès 1591.
</td>
<td colspan=3 rowspan=2>Ouverture du site prévue pour février prochain</td>
</tr>
<tr>
<td>Le noyau principal de ses richissimes collections inclus des oeuvres qui vont du XIIIe
au XVIIe siècle.<br>
Da Vinci, Botticelli, Masaccio, les plus grands artistes de la Renaissance y sont présents.
</td>
</tr>
<tr>
<tr>
<td colspan=4>© ttsi</td>
</tr>
</table>
Les grands tableaux
Pour les gros tableaux vous pouvez éventuellement utiliser les balise <thead>, <tbody> et <tfoot>.
Celles-ci vous permettront d'avoir plus de possibilités
de mise en page CSS.
C'est un peu déroutant mais il est conseillé d'écrire les balises dans l'ordre suivant :
Dans le code, on renseigne donc d'abord la partie du haut, ensuite la partie du bas, et enfin la partie principale.
Le navigateur se chargera d'afficher chaque élément au bon endroit. On constatera également que souvent le pied du tableau est utilisé pour rappeler son en-tête.
Démo
<table border=1>
<caption>Passagers du vol 377</caption>
<thead> <!-- En-tête du tableau -->
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
</thead>
<tfoot> <!-- Pied de tableau -->
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
</tfoot>
<tbody> <!-- Corps du tableau -->
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>États-Unis</td>
</tr>
<tr>
<td>François</td>
<td>43 ans</td>
<td>France</td>
</tr>
<tr>
<td>Martine</td>
<td>34 ans</td>
<td>France</td>
</tr>
<tr>
<td>Jonathan</td>
<td>13 ans</td>
<td>Australie</td>
</tr>
<tr>
<td>Xu</td>
<td>19 ans</td>
<td>Chine</td>
</tr>
</tbody>
</table>
Construire un tableau
Un tableau doit rester rectangle, c'est à dire qu'il comporte le même nombre de cellules sur toutes les lignes.
Donc:
- commencer par réaliser le tableau sans fusionner de cellules
- compter le nombre de cellules sur chaque ligne
- prendre comme base la ligne contenant le plus de cellules
- fusionner en donnant comme valeur à colspan et rowspan le nombre de cellules fusionnées
Quiz
Clique-moi pour générer un questionnaire !