<table...> </table...> : Cette balise encapsule un tableau.
Le tableau est certainement un des éléments les plus important et des plus utilisé dans le cadre des mises en page des documents.
Ci-dessous, voyez un exemple de tableau constitué de 2 rangées de 2 cellules. |
Ex :
<table border="1">
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>
|
Résultat :
| cellule 1 | cellule 2 | | cellule 3 | cellule 4 |
|
| <tr...> </tr...> : Cette balise délimite les rangées et encapsule les cellules (colonnes). |
| <td...> </td...> : Cette balise délimite les cellules et encapsule le contenu de celle-ci. |
align="..." : Aligne le tableau dans l'espace où il se trouve.
Pour "tr" et "td", c'est au contenu que l'attribut s'adresse.
Les valeurs admises sont "left" (par défaut), "center", "right" |
background="..." :
Affecte une image de fond.
Applicable à "table", "tr" et "td". |
Ex :
<table border="1"
background="images-doc/papier-peint.jpg">
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>
|
Résultat :
| cellule 1 | cellule 2 | | cellule 3 | cellule 4 |
|
bgcolor="..." :
Affecte une couleur au fond.
Applicable à "table", "tr" et "td".
Dans l'exemple ci-dessous, la couleur rouge a été affectée au tableau et le jaune à la cellule 1. |
Ex :
<table bgcolor="red">
<tr>
<td bgcolor="yellow">cellule 1</td>
<td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>
|
Résultat :
| cellule 1 | cellule 2 | | cellule 3 | cellule 4 |
|
| border="..." : Defini l'épaisseur des bordures et la valeur est exprimée en pixels. Une valeur de "0" suprime les bordures. |
cellpadding="..." :
Crée un espace entre la bordure et le contenu des cellules. |
Ex :
<table border="1" cellpadding="10">
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>
|
Résultat :
| cellule 1 | cellule 2 | | cellule 3 | cellule 4 |
|
cellspacing="..." :
Crée un espace entre les cellules.
Dans l'exemple ci-dessous, le tableau a une hauteur de 150 et 20% de cette hauteur (soit 30 pixels) a été affecté à la première rangée |
Ex :
<table border="1" cellspacing="10">
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>
|
Résultat :
| cellule 1 | cellule 2 | | cellule 3 | cellule 4 |
|
colspan="..." :
Fusionne des cellules horizontalement.
Ne s'applicable qu'à "td". |
Ex :
<table border="1">
<tr>
<td colspan="2">cellule 1 et cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>
|
Résultat :
| cellule 1 et cellule 2 | | cellule 3 | cellule 4 |
|
height="..." :
Force la hauteur.
S'exprime en pixels ou en pourcentage.
Applicable à "table", "tr" et "td".
Dans l'exemple ci-dessous, le tableau a une hauteur de 150 et 20% de cette hauteur (soit 30 pixels) a été affecté à la première rangée. |
Ex :
<table border="1" height="150">
<tr height="20%">
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>
|
Résultat :
| cellule 1 | cellule 2 | | cellule 3 | cellule 4 |
|
hspace="..." :
Réserve un espace à droite et à gauche du tableau
S'exprime en pixels.
Ne fonctionne qu'avec  . |
Ex :
<table border="1" hspace="15">
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>
|
Résultat :
| cellule 1 | cellule 2 | | cellule 3 | cellule 4 |
|
rowspan="..." :
Fusionne des cellules verticalement.
Ne s'applicable qu'à "td". |
Ex :
<table border="1">
<tr>
<td rowspan="2">cellule 1
<br>cellule 3</td>
<td>cellule 2</td>
</tr>
<tr>
<td>cellule 4</td>
</tr>
</table>
|
Résultat :
cellule 1
cellule 3 | cellule 2 | | cellule 4 |
|
valign="..." :
Aligne le tableau dans l'espace où il se trouve.
Pour "tr" et "td", c'est au contenu que l'attribut s'adresse.
Les valeurs admises sont "left" (par défaut), "center", "right". |
Ex :
<table border="1" vspace="15">
<tr>
<td valign="top">cellule 1</td>
</tr>
<tr>
<td valign="middle">cellule 2</td>
</tr>
<tr>
<td valign="bottom">cellule 3</td>
</tr>
<tr>
<td valign="baseline">cellule 4</td>
</tr>
</table>
|
Résultat :
| cellule 1 | | cellule 2 | | cellule 3 | | cellule 4 |
|
vspace="..." :
Réserve un espace au-dessus et en-dessous du tableau
S'exprime en pixels.
Ne fonctionne qu'avec . |
Ex :
Text au-dessus<table border="1" vspace="15">
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>Text en-dessous
|
Résultat :
Text au-dessus| cellule 1 | cellule 2 | | cellule 3 | cellule 4 |
Text en-dessous |
width="..." :
Force la largeur.
S'exprime en pixels ou en pourcentage.
Applicable à "table", "tr" et "td".
Dans l'exemple ci-dessous, le tableau a une largeur de 210 et 40% de cette largeur (soit 84 pixels) a été affecté à la première colonne. |
Ex :
<table border="1" width="210">
<tr>
<td width="40%">cellule 1</td>
<td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>
|
Résultat :
| cellule 1 | cellule 2 | | cellule 3 | cellule 4 |
|
Compatibilité :  |
Apprenez Les Bases De l'HTML En Moins de 24 Heures
