all html : Le portail des webmaster

Article publié le mardi 16 mars 2004 par ALL HTML.
Cet article est classé dans les catégories « HTML »

Présentation des tableaux

La balise <table> permet d'insérer un tableau et c'est l'une des balises les plus utilisées (elle est devenue officielle avec la version 3.2 du HTML). En effet, les tableaux permettent une meilleure présentation des informations, nombreux sont les sites qui utilisent les tableaux pour obtenir une mise en page de type "journal".

Création des tableaux

La création des tableaux se passe autour de 4 balises :
- <table> : Définit au navigateur la création d'un tableau
- <th> : Définit l'en-tête de chaque colonne
- <tr> : Définit une ligne
- <td> : Définit une cellule

A noter que la balise <caption> qui affiche le titre du tableau possède 2 attributs :
- top : Titre placé au-dessus du tableau (par défaut)
- bottom : Titre placé en dessous du tableau

Bien entendu, toutes ces balises doivent êtres fermées pour indiquer la fin du tableau, d'une colonne ou d'une cellule.

Note : Si vous voulez définir une police de caractère pour le tableau, vous êtes obligé d'en définir pour chaque cellule même si elle est identique, exemple ci-dessous.

<td><font face="arial" size=1>Cellule 1</font></td>

Exemple d'un tableau avec son code source :

<table border="1"><caption><span class="texte"><b> Légende du tableau</b></span></caption><tbody><tr><th><span class="texte">Colonne 1</span></th><th><span class="texte">Colonne 2</span></th></tr><tr><td><span class="texte">Cellule 1</span></td><td><span class="texte">Cellule 2</span></td></tr><tr><td><span class="texte">Cellule 3</span></td> <td><span class="texte">Cellule 4</span></td></tr></tbody></table>
<table border=1> <caption>Légende du tableau</caption> <tr> <th>Colonne 1</th> <th>Colonne 2</th> </tr> <tr> <td>Cellule 1</td> <td>Cellule 2</td> </tr> <tr> <td>Cellule 3</td> <td>Cellule 4</td> </tr> </table>

Aligner les éléments du tableau

L'alignement des données s'obtient en jonglant avec les attributs align pour l'alignement horizontal et valign pour l'alignement vertical. Ces attributs ont plusieurs valeurs :
- align=left : (par défaut) Les données sont alignées à gauche de la cellule (pour td) ou de toutes les cellules (pour th ou tr)
- align=right : Les données sont alignées à droite de la cellule (pour td) ou de toutes les cellules (pour th ou tr)
- align=center : Les données sont centrées à l'intérieur de la cellule (pour td) ou de toutes les cellules (pour th ou tr)
- valign=middle : (défaut) Les données sont centrées verticalement à l'intérieur de la cellule (pour td) ou de toutes les cellules (pour th ou tr)
- valign=top : Les données sont en haut de la cellule (pour td) ou de toutes les cellules (pour th ou tr)
- valign=bottom : Les données sont en bas de la cellule (pour td) ou de toutes les cellules (pour th ou tr)
- valign=baseline : Toutes les données des cellules sont alignées sur une ligne commune (uniquement pour th ou tr)


Exemple d'un tableau où les cellules sont alignées différemment :

<br><br><table border="1" width="400"><caption><span class="texte"><b> Légende du tableau</b></span> </caption><tbody><tr><th align="right"><span class="texte">Colonne 1 alignée à droite</span></th> <th align="center"><span class="texte">Colonne 2 centrée</span></th> </tr><tr><td align="left" valign="top"><span class="texte">Cellule 1 alignée à gauche<br>et en haut</span></td> <td align="center" valign="bottom"><br><span class="texte">Cellule 2<br>centrée et en bas<br><br></span></td> </tr><tr valign="baseline"><td><span class="texte">Cellule 3 basée sur la ligne</span></td> <td><span class="texte">Cellule 4 basée sur la ligne</span></td> </tr></tbody></table>

<table border=1 width=400> <caption>Légende du tableau</caption> <tr> <th align=right>Colonne 1 alignée à droite</th> <th align=center>Colonne 2 centrée</th> </tr> <tr> <td align=left valign=top>Cellule 1 alignée à gauche et en haut</td> <td align=center valign=bottom>Cellule 2 centrée et en bas</td> </tr> <tr valign=baseline> <td>Cellule 3 basée sur la ligne</td> <td>Cellule 4 basée sur la ligne</td> </tr> </table>

Fusionner les lignes et colonnes

Les lignes et colonnes peuvent êtres fusionnées, afin d'obtenir des cellules plus ou moins grandes et accueillir des données. Ce fusionnement est réalisé avec l'attribut rowspan et colspan.
- Pour fusionner 2 cellules adjacentes sur une ligne, colspan est requis (pour th ou td)
- Pour fusionner 2 cellules adjacentes sur une colonne, ROWSPAN est requis (pour th ou td)

Exemple d'un tableau avec des fusions :

<br><br><table border="1"><tbody><tr><td><span class="texte">Cellule 1</span></td><td colspan="2"><span class="texte">2 cellules fusionnées (sur la même ligne)</span></td></tr><tr><td><span class="texte">Cellule 2</span></td><td><span class="texte">Cellule 3</span></td><td rowspan="2"><span class="texte">2 cellules fusionnées (sur la même colonne)</span></td></tr><tr><td><span class="texte">Cellule 4</span></td><td><span class="texte">Cellule 5</span></td></tr></tbody></table>
<table border=1> <tr> <td>Cellule 1</td> <td colspan=2>2 cellules fusionnées (sur la même ligne)</td> </tr> <tr> <td>Cellule 2</td> <td>Cellule 3</td> <td rowspan=2>2 cellules fusionnées (sur la même colonne)</td> </tr> <tr> <td>Cellule 4</td> <td>Cellule 5</td> </tr> </table>

Arrière plan, mise en page, espacement

En principe, la hauteur et la largeur d'une cellule s'adaptent automatiquement aux données (texte ou image). Néanmoins, vous pouvez définir une hauteur et une largeur pour un tableau ou une cellule ; l'espacement des cellules et la taille de la bordure peuvent être aussi paramétrés.

Attributs de mise en page et d'espacement (valable pour <table>, <td> ou <th>) :
- width : Spécifie la largeur du tableau ou d'une cellule, en pixels ou en pourcentage de la fenêtre du navigateur
- height : Spécifie la hauteur du tableau ou d'une cellule, en pixels ou en pourcentage de la fenêtre du navigateur
- border : Spécifie la taille en pixels (par défaut 1) de la bordure du tableau
- cellpadding : Spécifie l'espace en pixels entre la bordure et le contenu de la cellule du tableau
- cellspacing : Spécifie l'espace en pixels entre les cellules du tableau
- bgcolor : Spécifie la couleur d'une cellule
- bordercolor : Spécifie la couleur de la bordure du tableau
- bordercolorlight : Spécifie la couleur aux points culminants de la bordure du tableau (effet 3d)
- bordercolordark : Spécifie la couleur de l'ombre de la bordure du tableau (effet 3d)
- background : Spécifie l'URL de l'image à afficher comme image d'arrière plan du tableau (I.Explorer seulement)

A noter que pour la balise <td> l'attribut nowrap permet d'éviter les retours à la ligne (inutile si vous avez défini votre tableau en pixels).

Exemple d'un tableau avec certains de ces attributs :

</b><br><br><table bordercolordark="aqua" border="2" bordercolor="blue" height="150" width="300"><tbody><tr><td bgcolor="pink"><span class="texte">Cellule 1</span></td><td><span class="texte">Cellule 2</span></td><td><span class="texte">Cellule 3</span></td></tr><tr><td><span class="texte">Cellule 4</span></td><td bgcolor="yellow"><span class="texte">Cellule 5</span></td><td><span class="texte">Cellule 6</span></td></tr><tr><td><span class="texte">Cellule 7</span></td><td><span class="texte">Cellule 8</span></td><td bgcolor="maroon"><span class="texte">Cellule 9</span></td></tr></tbody></table><br>

<table border=2 bordercolor="blue" bordercolordark="aqua" width=300 height=150> <tr> <td bgcolor="pink">Cellule 1</td> <td>Cellule 2</td> <td>Cellule 3</td> </tr> <tr> <td>Cellule 4</td> <td bgcolor="yellow">Cellule 5</td> <td>Cellule 6</td> </tr> <tr> <td>Cellule 7</td> <td>Cellule 8</td> <td bgcolor="maroon">Cellule 9</td> </tr> </table>

Les attributs rules et frame (HTML 4.0)

Ces attributs sont valables uniquement pour la balise <table> et sont reconnus par les navigateurs de dernière génération qui savent exploiter le HTML 4.0 .

L'attribut frame :
Il fonctionne seulement si border est présent dans la balise <table> et signale les côtés d'un cadre à afficher. Voici la liste des valeurs qu'il peut supporter :
- above : Affiche les bordures externes du haut du tableau seulement
- below : Affiche les bordures externes du bas du tableau seulement
- border : Affiche les bordures sur tous les côtés du tableau
- box : Affiche une boîte autour du tableau
- insides : Affiche les bordures sur le dessus et le dessous du tableau seulement
- hsides : Affiche les bordures externes du côté horizontal du tableau (haut et bas)
- lhs : Affiche les bordures externes du côté gauche du tableau seulement
- rhs : Affiche les bordures externes du côté droit du tableau seulement
- void : Permet de retirer toutes les bordures externes du tableau
- vsides : Affiche les bordures externes des côtés droit et gauche du tableau


L'attribut rules :
Il fonctionne seulement si l'attribut border est présent dans la balise <table>. Il permet de spécifier des règles supplémentaires à l'intérieur du tableau. Les valeurs acceptées sont les suivantes :
- none : Pour retirer toutes les bordures internes du tableau
- groups : Affiche une bordure horizontale entre les sections
- rows : Affiche une bordure horizontale entre toutes les lignes du tableau
- cols : Affiche une bordure horizontale entre toutes les colonnes du tableau
- all : Affiche des bordures dans le tableau


A noter que ces deux attributs doivent aussi être utilisés avec les balises :
-thead : Définissant l'en-tête du tableau
- tbody : Définissant le corps du tableau
- tfoot : Définissant le pied de page du tableau


Exemple d'un tableau utilisant ces attributs :

<br><br><table border="2" frame="hsides" rules="cols" width="200"><thead></thead><colgroup span="3" align="left" valign="top"></colgroup><tbody><tr><td><span class="texte"><b>Ligne 1 </b></span></td><td><span class="texte">Cellule 1</span></td><td><span class="texte">Cellule 2</span></td></tr><tr><td><span class="texte"><b>Ligne 2 </b></span></td><td><span class="texte">Cellule 3</span></td><td><span class="texte">Cellule 4</span></table>

<table border=2 width=200 frame=hsides rules=cols> <thead> <colgroup span=3 align=left valign=top> </thead> <tbody> <tr> <td>Ligne 1 </td> <td>Cellule 1</td> <td>Cellule 2</td> </tr> <tr> <td>Ligne 2 </td> <td>Cellule 3</td> <td>Cellule 4</td> </tr> </tbody> </table>