Lecon 10 : Les tables

Les tables servent pour l'affichage de donnees tabulaires , c'est-a-dire des informations presentees logiquement en rangees et en colonnes.

Est-ce difficile ?

Dresser des tables en HTML peut sembler complique au premier abord mais en restant calme et en regardant ou on met les pieds, c'est en realite strictement une affaire de logique, comme toute chose en HTML.

Exemple 1 :


<table>
  <tr>
    <td>Cellule 1</td>

    <td>Cellule 2</td>
  </tr>
  <tr>
    <td>Cellule 3</td>
    <td>Cellule 4</td>

  </tr>
</table>

Ce qui donne dans le navigateur :

Cellule 1	Cellule 2
Cellule 3	Cellule 4

Quelle est la difference entre `<tr>` et `<td>` ?

Comme vous pouvez le voir dans l'exemple precedent, il s'agit probablement de l'exemple HTML le plus complique fourni jusqu'ici. Decomposons-le et expliquons les differentes balises :

On utilise 3 elements differents pour inserer des tables :

La balise ouvrante <table> et la balise fermante </table> marquent le debut et la fin de la table. Logique.
La balise <tr> tient pour table row (N.d.T. rangee de table), et commence et termine les rangees dans le sens horizontal. Encore logique.
La balise <td> est l'abreviation de table data (N.d.T. donnees de table). Elle marque le debut et la fin de chaque cellule dans les rangees de la table. Tout simple et logique.

Voici l'explication de l'exemple 1 : la table commence avec la balise <table>, suivie d'une balise <tr> indiquant le debut d'une nouvelle rangee. Dans cette rangee, deux cellules sont inserees : <td>Cellule 1</td> et <td>Cellule 2</td>. La rangee se termine par une balise </tr>, et une nouvelle rangee <tr> commence juste apres. Cette nouvelle rangee contient egalement deux cellules. La table se termine par une balise </table>.

Pour que les choses soient claires, les rangees sont des lignes horizontales de cellules et les colonnes des lignes verticales de cellules :

Cellule 1	Cellule 2
Cellule 3	Cellule 4

Cellule 1 et Cellule 2 forment une rangee, Cellule 1 et Cellule 3 une colonne.

Dans l'exemple precedent, la table a deux rangees et deux colonnes. Toutefois, une table peut avoir un nombre illimite de rangees et colonnes.

Exemple 2 :


<table>
  <tr>
    <td>Cellule 1</td>

    <td>Cellule 2</td>
    <td>Cellule 3</td>
    <td>Cellule 4</td>

  </tr>
  <tr>
    <td>Cellule 5</td>
    <td>Cellule 6</td>

    <td>Cellule 7</td>
    <td>Cellule 8</td>
  </tr>
  <tr>

    <td>Cellule 9</td>
    <td>Cellule 10</td>
    <td>Cellule 11</td>

    <td>Cellule 12</td>
  </tr>
</table>

Dans le navigateur, cela donne :

Cellule 1	Cellule 2	Cellule 3	Cellule 4
Cellule 5	Cellule 6	Cellule 7	Cellule 8
Cellule 9	Cellule 10	Cellule 11	Cellule 12

Y a t-il des attributs ?

Bien sur qu'il y en a. Par exemple, l'attribut border sert a indiquer l'epaisseur de la bordure autour de la table :

Exemple 3 :


<table border="1">
  <tr>
    <td>Cellule 1</td>

    <td>Cellule 2</td>
  </tr>
  <tr>
    <td>Cellule 3</td>

    <td>Cellule 4</td>
  </tr>
</table>

Ce qui donne dans le navigateur :

Cellule 1	Cellule 2
Cellule 3	Cellule 4

L'epaisseur de la bordure s'exprime en pixels (cf. lecon 9).

Comme pour les images, on peut egalement fixer la largeur d'une table en pixels, ou autrement en pourcentage de l'ecran :

Exemple 4 :


<table border="1" width="30%">

Cet exemple affichera une table dont la largeur est 30 % celle de l'ecran dans le navigateur. Essayez par vous-meme.

Plus d'attributs ?

Il y a des tas d'attributs pour les tables. En voici deux :

align : indique l'alignement horizontal du contenu dans toute la table, dans une rangee ou dans une seule cellule. Par exemple, les valeurs "left" (a gauche), "center" (au centre) ou "right" (a droite).
valign : indique l'alignement vertical du contenu dans une cellule. Par exemple, les valeurs "top" (en haut), "middle" (au milieu) ou "bottom" (en bas).

Exemple 5 :


<td align="right" valign="top">Cellule 1</td>

Que puis-je inserer dans mes tables ?

En theorie, on peut inserer n'importe quoi dans les tables : du texte, des liens et des images ... TOUJOURS EST-IL que les tables sont faites pour presenter des donnees tabulaires (c'est-a-dire, des donnees dont la presentation en rangees et en colonnes revet un sens), donc abstenez-vous d'y placer des choses simplement au motif que vous voulez les mettre l'une a cote de l'autre.

Aux premiers temps d'Internet, c'est-a-dire quelques annees en arriere, les tables servaient souvent pour la mise en page. Mais si vous voulez controler la presentation du texte et des images, il existe une solution beaucoup plus futee pour y parvenir (indice : CSS). Plus a ce sujet tout a l'heure.