Tableau en Html

Les tableaux sont énormément utilisés pour la mise en page d'une page web, même si ce n'est pas leur fonction première. En effet, les tableaux sont destinés à présenter des données sous forme classée.

Un tableau est entouré des balises <table> et </table>
Les entêtes de chaque colonne sont marqués par les balises <th>Entête</th>
Une ligne est entourée des balises <tr>Ligne</tr>
Une cellule est entourée des balises <td>Cellule</td>

Titre d'un tableau :

Le titre du tableau se note entouré de balises <caption>Titre du tableau</caption>

La balise <caption> peut être en haut du tableau : <caption align="top">Titre en haut du tableau</caption> mais aussi en bas :

<caption align="bottom">Titre en bas du tableau</caption>

Alignement d'un tableau et de ses éléments :

Pour aligner un tableau et le contenu des cellules, nous disposons de deux attributs qui peuvent prendre chacun plusieurs valeurs :

align pour l'alignement horizontal et valign pour l'alignement vertical. Voici maintenant les différentes valeurs possibles :

* align="left" (par défaut) : Les données sont alignées à gauche de la cellule (<td></td>) ou de toutes les cellules (<th></th> et <tr></tr>).

* align="right" : Les données sont placées à droite de la cellule ou de toutes les cellules.

* align="center" : Les données sont centrées dans la cellule ou dans toutes les cellules.

* 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 placées en haut de la cellule ou de toutes les cellules

* valign="bottom" : Les données sont placées en bas de la cellule ou de toutes les cellules.

* valign="baseline" : Les données des cellules s'alignent sur une ligne commune (seulement pour <th></th> ou <tr></tr>)

Exemple d'un tableau centré mettant en jeu les alignements et dont toutes les cellules auront le texte aligné à droite (<tr align="right">):

<table align="center">
<caption align="top">Titre du tableau</caption>
<tr align="right">
<td valign="top">Cellule 1 dont le contenu est aligné verticalement au centre</td>
<td valign="bottom">Cellule 2 dont le contenu est aligné en bas</td>
</tr>
</table>

Fusion de lignes et de colonnes :

Le fusionnement de lignes et de colonnes est réalisé avec l'attribut colspan et rowspan :
Cellules fusionnées sur la même colonne

Cellules fusionnées sur la même ligne

Code HTML de ce tableau :

<table>
<tr>
<td></td>
<td rowspan="2">Cellules fusionnées sur la même colonne</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2">Cellules fusionnées sur la même ligne</td>
</tr>
</table>

Attributs des tableaux : mise en page, arrière plan et espacement :

* width : Largeur du tableau ou d'une cellule en pixels ou en pourcentage (de la fenêtre visible du navigateur). Ex : <td width="100%"></td>

* height : Hauteur du tableau ou d'une cellule en pixels ou en pourcentage (de la fenêtre visible du navigateur).

* border : Taille en pixels de la bordure du tableau (0=invisible)

* cellpadding : Spécifie l'espace en pixels entre la bordure et le contenu de la cellule du tableau

* cellspacing : Espace en pixels entre les cellules du tableau.

* bgcolor : Spécifie la couleur d'arrière plan d'une cellule.

* bordercolor : Couleur de la bordure du tableau.

* bordercolorlight : Couleurs de la bordure du tableau aux points les plus éclairés.

* bordercolordark : Couleur de l'ombre de la bordure.

* background : URL de l'image à afficher en arrière plan.

Exemple d'un tableau avec des attributs de mise en page :



Et voici le code HTML de ce tableau :

<table border="5" cellpadding="0" cellspacing="0" width="400" bordercolor="#6487DB" bordercolorlight="#99CCFF" bordercolordark="#000000">
<tr>
<td bgcolor="#F0F0F0"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>