Introduction La structure du document META tags Formatage de texte Les listes Les tableaux Les liens hypertextes Les images Les formulaires Les caractères spéciaux Les couleurs Passer au XHTML Transférer les pages Le référencement La CNIL

Voila un point important de ce cours. En effet les tableaux vont permettent de mieux structurer les informations que si elles étaient dans des listes. L'avantage du tableau par rapport aux listes est qu'il est possible de faire autant de ligne et de colonnes qu'on veut, d'imbriquer plusieurs cellules ou encore de structurer toute une page web en plaçant en plaçant ces différents composants dans des cellules bien définies.

Certaines personnes trouvent que cette l'utilisation des tableaux pour structurer la page est du grand n'importe quoi. Moi je pense qu'au contraire, cela nous simplifie la vie. Ce site n'est structuré qu'avec des tableaux et des feuilles de styles (voir cours sur le CSS) et je trouve que ça donne un très joli résultat.

En revanche l'utilisation des tableaux requière une certaine discipline car si on ne respecte pas le principe d'imbrication hiérarchique (voir intro), cela peut donner des résultats catastrophiques, j'en ai fait les frais pour ce site, preuve que même si on a l'habitude de faire sites une erreur est vite arrivée. Il faut également respecter les principes qu'on nous apprend en communication. C'est-à-dire qu'un tableau comporte automatiquement un titre (sauf dans le cas où il sert de structure pour le site en entier, encore que la bannière peut faire office de titre comme ici) et que les en-tête de colonnes et de lignes sont mises en avant.

Le tableau est le seul conteneur qui peut contenir d'autres conteneurs. Il est donc possible d'imbriquer les tableaux

• Un tableau est encadré par les balises <table> et </table>
• Son titre est encadré par les balises <caption> et </caption>
• Une ligne du tableau est encadrée par les balises <tr> et </tr>
• Un en-tête du tableau est encadrée par les balises <th> et </th>. Un en-tête peut être assimilé à un début de colonne. Une ligne peut contenir une colonne jamais l'inverse.
• Une données du tableau est encadrée par les balises <td> et </td>. Une donnée peut être assimilé à un fragment de colonne. Une ligne peut contenir une colonne jamais l'inverse.

<table border="1">
  <caption>>Un exemple</caption>
  <tr>
    <th>&nbsp ;</th>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <th>1</th>
    <td>Une cellule</td>
    <td>Une deuxième</td>
    <td>Une troisième</td>
  </tr>
  <tr>
    <th>2</th>
    <td>4<sup>ème</sup></td>
    <td>5<sup>ème</sup></td>
    <td>6<sup>ème</sup></td>
  </tr>
</table>

Notez que si vous mettez un alignement sur une ligne vous ne pourrez pas changer cet alignement pour la cellule qui est de dedans. Il est est de même pour le réglage de hauteur.

Petite démonstration des colspan rowspan :
<table border="1">
  <caption>Exemple avec colspan et rowspan</caption>
  <tr>
    <th>&nbsp ;</th>
    <th colspan="2">A sur 2 colonnes</th>
    <th>B</th>
  </tr>
  <tr>
     <th rowspan="2">1 sur 2 lignes</th>
     <td>Une cellule</td>
     <td>Une deuxième</td>
    <td>Une troisième</td>
  </tr>
  <tr>
    <td>4ème</td>
    <td>5ème</td>
    <td>6ème</td>
  </tr>
</table>