XHTML > Les tableaux

Définition

L'objectif des tableaux est de présenter des données structurées en lignes et colonnes (données tabulaires), comme dans un tableur tel qu'OpenOffice Calc ou Microsoft Excell.

Bien que de nombreux développeurs ont utilisés (et utilisent encore) les tableaux pour structurer la mise en page, les balises <div> sont à préférer d'un point de vue sémantique mais aussi pour éviter de complexifier et d'alourdir le code XHTML de la page.

Avant tout, un peu de style...

Par défaut les tableaux XHTML n'ont pas de bordure. Pour des raisons esthétiques, la présente page embarque quelques instructions CSS pour rendre les tableaux plus beaux et plus lisibles :

td, th {
 /* Cellules : bordure noire, fine, d'épaisseur 1px */
 border: 1px solid black; 
 /* Un peu d'espace entre les bordures et le contenu */
 padding: 4px;
}

table {
 /* Pas d'espace entre les cellules (bordures collées) */
  border-collapse: collapse; 
}

Un tableau <table> très simple : 3 lignes <tr> et 2 colonnes <td>

<table>
     <tr>
          <td>Projet site Internet</td>
          <td>10 000 €</td>
     </tr>
     <tr>
          <td>Projet application IPhone / Androïd</td>
          <td>20 000 €</td>
     </tr>
     <tr>
          <td>Projet application </td>
          <td>12 000 €</td>
     </tr>
</table>

Ajout d'un titre au tableau: <caption>

<table>
     <caption>Projets Web CNAM</caption>
     <tr>
          <td>Projet site Internet</td>
          <td>10 000 €</td>
     </tr>
     <tr>
          <td>Projet application IPhone</td>
          <td>14 000 €</td>
     </tr>
     <tr>
          <td>Projet application Androïd</td>
          <td>12 000 €</td>
     </tr>
</table>

Précisons le rôle de chaque colonne avec des cellules d'entête: <th>

<table>
     <caption>Projets Web CNAM</caption>
     <tr>
          <th>Nom du projet</th>
          <th>Budget</th>
     </tr>
     <tr>
          <td>Site Internet</td>
          <td>10 000 €</td>
     </tr>
     <tr>
          <td>Application IPhone</td>
          <td>14 000 €</td>
     </tr>
     <tr>
          <td>Application Androïd</td>
          <td>12 000 €</td>
     </tr>
</table>

Fusion de deux cellules sur une même colonne: l'attribut <rowspan>

<table>
     <caption>Projets Web CNAM</caption>
     <tr>
          <th>Nom du projet</th>
          <th>Budget</th>
     </tr>
     <tr>
          <td>Site Internet</td>
          <td>10 000 €</td>
     </tr>
     <tr>
          <td>Application IPhone</td>
          
          <td rowspan="2">26 000 €</td>
     </tr>
     <tr>
          <td>Application Androïd</td>
     </tr>
</table>

Fusion de deux cellules sur une même ligne: l'attribut <colspan>

<table>
     <caption>Projets Web CNAM</caption>
     <tr>
          <th>Nom du projet</th>
          <th>Budget</th>
     </tr>
     <tr>
          <td>Site Internet</td>
          <td>10 000 €</td>
     </tr>
     <tr>
          <td>Application IPhone</td>
          <td rowspan="2">26 000 €</td>
     </tr>
     <tr>
          <td>Application Androïd</td>
     </tr>
     <tr>
          
          <td colspan="2"> <strong>Total : 36 000 €</strong></td>
     </tr>
</table>

Cas des grands tableaux : organiser avec <thead> puis <tfoot> puis <tbody>

<table>
    <caption>Projets Web CNAM</caption>
    <thead> <!-- En-tête du tableau -->
       <tr>
            <th>Nom du projet</th>
            <th>Budget</th>
       </tr>
     </thead>    
     <tfoot> <!-- Pied du tableau -->
       <tr>
            <th>Nom du projet</th>
            <th>Budget</th>
       </tr>
     </tfoot>
     <tbody> <!-- Corps du tableau -->
       <tr>
            <td>Projet site Internet</td>
            <td>10 000 €</td>
       </tr>
       <tr>
            <td>Projet application IPhone</td>
            <td>14 000 €</td>
       </tr>
       <tr>
            <td>Projet application Androïd</td>
            <td>12 000 €</td>
       </tr>
     </tbody>
</table>

Place à la pratique :

Exercices :

Coder les trois exemples suivants :