Cours / Tutorials - Les tableaux en XHTML

Les tableaux en XHTML

Nous allons donc passer aux tableaux, qui sont un petit peu plus compliqués. Je crois que c'est ce qu'il y a de plus compliqué en Xhtml d'ailleurs. C'est parti…

Note : un tableau sert UNIQUEMENT à la même chose que sur une feuille de papier : présenter les prix des légumes, les résultats d'un moteur de recherche... Ils ne doivent donc pas servir à autre chose, comme la mise en page, pratique que l'on voit encore trop souvent (y compris sur des sites "pro").

Un tableau est contenu dans une balise <table> qui se ferme évidemment </table>. Chaque ligne commence par <tr> et chaque colonne dans cette ligne par <td>. Ces balises doivent bien entendues être fermées. Il faut donc une petite gymnastique intellectuelle pour présenter un tableau.

Exemple :
<table>                    On commence le tableau
   <tr>                      On ouvre la première ligne
      <td>                  On ouvre la première case de cette première ligne
         Pommes
      </td>                 On ferme la case
      <td>                  La deuxième case
         Fraises 
      </td>                 On ferme la deuxième case
   </tr>                     On ferme la première ligne. Ce sera donc un tableau avec juste deux colonnes
   <tr>                      On commence une deuxième ligne
      <td>                  On ouvre la première case de cette deuxième ligne
         3 euros
      </td>
      <td>
         3.5 euros
      </td>
   </tr>
</table>                   Une fois toutes les lignes terminées, on ferme le tableau

Exercice : créer une page qui présente les distances entre Paris, Marseille, Nice et Lyon (l'exemple ci-dessous n'utilise pas de tableau)

                   Paris         Marseille          Nice       Lyon
Paris              X
Marseille                          X
Nice                                                     X
Lyon                                                                   X

C'était donc votre premier tableau. La démarche est la même quelque soit la taille du tableau. Si vous voulez si colonnes, il vous faudra 6 <td></td> par ligne <tr>. Si vous voulez 20 lignes, il vous faudra 20 <tr></tr> contenant autant de <td> qu'il y a de colonnes. Vous voyez, en fait, dès que vous aurez pris le coup, ce ne sera pas si compliqué… Mais toujours fastidieux, du moins, en xhtml/css (vivement le dynamique !)



<< Cours précédent       Sommaire des cours XHTML       Suite >>