HTML

Manipuler les Tables HTML

Manipuler les Tables HTML - Ou comment metre en forme vos documents.

Ajouté au HTML depuis la version 3, un tableau HTML permet de disposer de façon organisée et alignée des éléments sur une page Web. Constitué de cellules ordonnées en lignes et en colonnes, le tableau est sans doute la balise HTML la plus utilisée mais aussi la plus complexe à saisir. Utiliser à plusieurs sauces, elle permet de créer un simple tableau de données mais aussi de carrément structurer une page Web. Noter que depuis le XHTML les tableaux HTML utilisés pour la structure ont été remplacés par le CSS. Mais il reste toute fois très largement utilisé.

Noter que le tableau HTML ne peut en principe être imbriqué dans un bloc comme le paragraphe. Cette situation cause beaucoup de problèmes car un tableau devrait au contraire faire partie d’un paragraphe au même titre que les images. La W3C a donc fait ses devoirs et promet un support beaucoup plus adapté à cette balise. Ainsi le futur le XHTML 2.0 permettra les tableaux HTML imbriqués dans un paragraphe. Le XHTML 2.0 sera d’ailleurs le premier langage HTML véritablement adapté au Web pour la diffusion de contenu riche. Il était temps!

Le navigateur doit lire deux fois chaque tableau d’une page Web afin de structurer les fusions de cellules par exemple. Cette façon de faire cause parfois une lenteur de lecture si les imbrications de tableau sont nombreuses. Une bonne raison d’utiliser les calques (div) au lieu des tableaux pour structurer la page. Un autre bon conseil est de séparer en tableau indépendant la page Web. L’en-tête dans un tableau, le corps dans un second tableau indépendant. Cette façon de faire évite d’avoir à attendre tout le contenu de la page avant l’affichage et ainsi afficher l’en-tête avant le corps du documents.

1. La déclaration du tableau.
La déclaration permet de fixer la largeur (width) ainsi que la marge (cellpadding) du tableau. La largeur par défaut devrait être à 100% et la marge à 0. C’est aussi dans la déclaration que le style global du tableau se précise. Par défaut la classe «TableauBleu» permet d’ajouter une bordure bleue autour du tableau et de chacune des cellules.

<table width="100%" cellspacing="0" cellpadding="0">

2. Titre du tableau.
La balise caption permet de donner un titre au tableau. Noter que le titre ne fait pas partie du tableau en tant que tel. Il est affiché en haut ou en bas du tableau. Bien que très peu utilisé, il n’en reste pas moins que cette balise permet d’identifier rapidement le tableau par des navigateurs texte par exemple.

<caption>Titre du tableau</caption>

3. Les lignes du tableau.
Avant de pouvoir définir nos cellules il faut déclarer les lignes. Une ligne (tr) contient un nombre x de cellules. Si une ligne compte 3 cellules, aucune autre ligne ne pourra avoir plus de 3 cellules. En ajoutant une cellule sur une ligne, vous devez obligatoirement ajouter une cellule sur chacune des lignes du tableau.

<tr><td>première ligne qui contient une cellule</td></tr>
<tr><td>nouvelle ligne qui contient une cellule</td></tr>

4. Les colonnes de chaque ligne appellé cellule.
Une cellule (td ou th) est l’espace qu’occupera le contenu. Il doit être imbriqué dans une ligne (tr). Sauf exception, chaque ligne doit compter le même nombre de cellules. C’est dans la déclaration d’une cellule qu’il est possible de définir la «class» et le style de la cellule. Par défaut le style d’une cellule est aligné à gauche avec un fond blanc.

<tr><td>Cellule 1</td><td>>Cellule 2</td></tr>

5. L’en-tête du tableau.
L’en-tête est une cellule comme les autres à la différence qu’il se déclare par la balise (th) et qu’il permet un style spécifique. Par défaut le style d’une cellule d’en-tête est aligné au centre avec un fond bleu foncé.

<tr><th>En-tête colonne 1</th></tr>

6. Fusions de plusieurs cellules sur une ligne.
Si une ligne ne peut contenir plus de cellules que les autres lignes, elle peut néanmoins en avoir moins (colspan). La chose est possible en combinant deux ou plusieurs cellules ensemble. Par exemple un tableau à deux colonnes ou chaque ligne comprend 2 cellules sauf la dernière qui aura une seule cellule occupant l’espace de deux cellule.

  <tr><td>Colonne 1</td><td>Colonne 2</td></tr>
  <tr><td colspan="2">Occupe deux cellules</td></tr>

7. Fusions de plusieurs cellules sur une colonne.
Un peu plus complexe à figurer, le principe est exactement le même à la différence que les cellules se scindent de façon vertical.

  <tr><td rowspan="2">Colonne 1 sur deux ligne</td><td>Colonne 2 première ligne</td></tr>
  <tr><td>Colonne 2, deuxième ligne</td></tr>

8. Aviter le saut de ligne à l’intérieur d’une cellule.
La propriété «nowrap» est une petite particularité qui peut s’avérer fort utile. Elle permet de forcer la ligne à s’afficher sur une seule ligne sans saut de ligne.

<th nowrap>Le contenu sera toujours affiché sans saut de ligne</th>

9. balises thead, tbody et tfoot.
Ces balises permettent d’identifier les principales sections du tableau.

<table>
  <thead>
    <tr><td>En-tête</td></tr>
  </thead>
  <tfoot>
    <tr><td>pied de page</td></tr>
  </tfoot>
  <tbody>
    <tr><td>Peemière ligne</td></tr>
    <tr><td>Deuxième ligne</td></tr>
    <tr><td>Troisième ligne</td></tr>
  </tbody>
</table>

10. Exemple complet.

<table width="100%" cellspacing="0" cellpadding="3" class="TableauBleu">
  <tr><th>En-tête colonne 1</th><th nowrap>En-tête colonne 2 sans saut de ligne</th></tr>
  <tr><td>Colonne 1</td><td>Colonne 2</td></tr>
  <tr><td>Colonne 1</td><td>Colonne 2</td></tr>
  <tr><td colspan="2">Deux colonnes scindées</td></tr>
</table>

L’erreur la plus fréquente avec un tableau est d’essayer de faire la structure complète en un seul morceau (un seul tableau). N’hésitez pas à utiliser plusieurs tableaux, et à les imbriquer des tableau à l’intérieur d’une cellule. La lecture et la gestion en seront grandement simplifié. Pour plus d’information sur les tableaux HTML, voir les spécifications de la W3C "Les tables dans les documents HTML".

Utiliser le CSS pour donner du style à vos tableaux : Colorer vos tableaux en CSS avec bordure.