La balise <TABLE> définit un tableau et nécessite une balise de fin </TABLE>.
Pour créer un tableau, nous avons besoin de 4 balises principales :
- La balise <TABLE> qui dit au navigateur de créer un tableau.
- La balise <TH> qui va donner l'en-tête d'une colonne ou plusieurs.
- La balise <TR> qui va créer une ligne dans le tableau.
- La balise <TD> qui va créer une colonne dans le tableau.
En tapant les balises <TR> et <TD> vous allez créer les cellules pour le tableau.
N'oubliez pas que les balises doivent obligatoirement être fermées pour la structure du tableau.
Mais la police du texte (couleur) que vous attriburez à un tableau, devra être redéfinit dans chaque cellule (même dans les cas où 2 cellules seraient identiques).
Chaque balises d'un tableau peuvent avoir des attributs spécifiques à eux-même qui modifie l'alignement, la couleur, la taille etc. Ces attributs vous sont très importants pour donner une personnalité à votre tableau.
Voici les 5 attributs les plus utilisés et qui sont compatibles avec toutes les balises :
| BORDER : |
Donne une bordure au cadre. |
| BORDERCOLOR : |
Donne une couleur à la bordure. |
| WIDTH : |
Formate la largeur des cellules du tableau, en pixels ou en pourcentage de la fenêtre du navigateur. |
| HEIGHT : |
Donne la hauteur du tableau ou d'une cellule, en pixels ou en pourcentage de la fenêtre du navigateur. |
| BGCOLOR : |
Spécifie la couleur d'une cellule. |
La balise <TABLE>
Nécessite un marqueur de fin : </TABLE>
Ce code s'écrit : <TABLE>.....</TABLE>
Voici ces attributs :
| CELLSPACING : |
Formate l'espacement horizontal |
| CELLPADDING : |
Formate l'espacement vertical |
Exemples de quelques attributs :
La balise <TR>
Nécessite un marqueur de
fin : </TR>
Ce code s'écrit : <TR>.....</TR>
Voici ces attributs :
| ALIGN=LEFT : |
Les données sont alignées à gauche de la cellule |
| ALIGN=RIGHT : |
Les données sont alignées à droite de la cellule |
| ALIGN=CENTER : |
Les données sont centrées à l'intérieur de la cellule |
| VALIGN=MIDDLE : |
Les données sont centrées verticalement à l'intérieur de la cellule |
| VALIGN=TOP : |
Les données sont en haut de la cellule |
| VALIGN=BOTTOM : |
Les données sont situées en bas de la cellule |
| VALIGN=BASELINE : |
Toutes les données des cellules sont alignées sur une ligne commune |
La balise <TD>
Nécessite un marqueur de
fin : </TD>
Ce code s'écrit : <TD>.....</TD>
Voici ces attributs :
| ALIGN= : |
Formate alignement horizontal (il possède les mêmes attributs d'alignement que pour la balise TR) |
| VALIGN= : |
Formate alignement vertival (il possède les mêmes attributs d'alignement que pour la balise TR) |
| NOWSRAP= : |
Pour ne pas couper une ligne dans la cellule |
| COLSPAN= : |
Ajoute une ligne sur la largeur du tableau |
| ROWSPAN= : |
Ajoute une colonne sur la hauteur du tableau |
La balise <TH>
Nécessite un marqueur de
fin : </TH>
Ce code s'écrit : <TH>.....</TH>
Voici ces attributs :
| ALIGN= |
formate alignement horizontal (il possède les mêmes attributs d'alignement que pour la balise TR) |
| VALIGN= |
formate alignement vertival (il possède les mêmes attributs d'alignement que pour la balise TR) |
| NOWSRAP= |
pour ne pas couper une ligne dans la cellule |
| COLSPAN= |
ajoute une ligne sur la largeur du tableau |
| ROWSPAN= |
ajoute une colonne sur la hauteur du tableau |
Voici quelques exemples de tableaux :
Tableau avec bordures et couleurs :
| Cellule 1 |
Cellule 2 |
Cellule 3 |
| Cellule 4 |
Cellule 5 |
Cellule 6 |
| Cellule 7 |
Cellule 8 |
Cellule 9 |
Voici le code ce tableau :
<table border=2 bordercolor="blue" bordercolordark="green" width=300 height=150>
<tr>
<td>Cellule 1</td>
<td bgcolor="yellow">Cellule 2</td>
<td>Cellule 3</td>
</tr>
<tr>
<td>Cellule 4</td>
<td bgcolor="pink">Cellule 5</td>
<td>Cellule 6</td>
</tr>
<tr>
<td>Cellule 7</td>
<td bgcolor="green">Cellule 8</td>
<td>Cellule 9</td>
</tr>
</table>
Tableau avec emplacement de textes :
| cellule 1 | cellule 2 |
cellule 3 |
| cellule 4 | cellule 5 |
cellule 6 |
Voici le code de ce tableau :
<table width=300 height=150 border=1 bordercolor=black>
<tr>
<td ALIGN=left> cellule 1 </td>
<td ALIGN=middle>cellule 2</td>
<td ALIGN=right>cellule 3</td>
</tr>
<tr>
<td VALIGN=BOTTOM>cellule 4</td>
<td VALIGN=middle>cellule 5</td>
<td VALIGN=TOP>cellule 6</td></tr>
</table>
|
