INFORMATIONS

Les Bases du xHTML Auteur : wizad Modifie le : 21/11/2006 à 13h33
Retour
Chapitre: Précédent | Suivant

Chapitre 7 : Tableaux

Les tableaux sont décrits par l'élément <table>. C'est l'un des chapitres les plus complexes du XHTML : les possibilités sont très nombreuses.

Un tableau simple

<table> définit l'ensemble du tableau. À l'intérieur, il faut décrire les lignes du tableau et ses cellules. L'élément <tr> décrit les lignes, et <td> les cellules. On déclare dans l'ordre <table>, puis <tr> et enfin <td>.

Code source html/xhtml :
  1. <tr><td> Cellule 1 </td><td> Cellule 2 </td></tr>
  2. <tr><td> Cellule 3 </td><td> Cellule 4 </td></tr>
  3. <tr><td> Cellule 5 </td><td> Cellule 6 </td></tr>
  4. </table>
Parsé en 0.032s par GeSHi 1.0.7.13

Un tableau plus évolué

On peut déjà commencer par donner un titre à ce tableau, grâce à l'élément <caption>. Le titre du tableau se place au début du tableau, avant la première ligne (avant le premier <tr>) mais dans le tableau tout de même (donc après la déclaration de <table>).

On veut également différencier des méta-cellules, qui donnent des informations sur le contenu des cellules de données, des cellules de données à proprement parler. Les cellules de données, c'est bien sûr <td>, et les méta-cellules, c'est l'élément <th> (le H étant pour header, en-tête) qui s'en charge.

On peut aussi, pour rendre le tableau un peu plus esthétique, et plus lisible (6 cellules ça va, mais quand vous en aurez 42...), lui donner une bordure. On utilise pour cela l'attribut border à qui on spécifie une épaisseur en nombre de pixels. Généralement, border=1 suffit amplement à ce que vous voulez faire (délimiter mieux les cellules).

Code source html/xhtml :
  1. <table border=1>
  2. <caption>Ceci est un tableau</caption>
  3.     <th> Colonne gauche </th>
  4.     <th> Colonne droite</th></tr>
  5.     <td> Cellule 1 </td>
  6.     <td> Cellule 2</td>
  7. </tr>
  8.     <td> Cellule 3 </td>
  9.     <td> Cellule 4</td>
  10. </tr>
  11.     <td> Cellule 5 </td>
  12.     <td> Cellule 6</td>
  13. </tr>
  14. </table>
Parsé en 0.046s par GeSHi 1.0.7.13