Informatique


Les tableaux

Aller à

Les tableaux HTML

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 :

  • <thead>
  • <tfoot>
  • <tbody>
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.


Quiz

Clique-moi pour générer un questionnaire !