HyperText Markup Language (HTML)
Les Tableaux
Tracer un tableau et inserer un element
En réalité, en HTML, on ne trace pas les tableaux (on ne peut pas utiliser les traits dans Bloc-notes). En HTML, on utlilise la balise
<TABLE> dans laquelle on se sert de
<TR> pour déterminer une rangée et de
<TD> pour déterminer une cellule.
Exemple
<TABLE border=1>
<TR> <!-- Première rangée -->
<TD>Cellule 1-Rangée 1</TD>
<TD>Cellule 2-Rangée 1</TD>
<TD>Cellule 3-Rangée 1</TD>
</TR> <!-- Fin première rangée -->
<TR> <!-- Deuxième rangée -->
<TD>Cellule 1-Rangée 2</TD>
<TD>Cellule 2-Rangée 2</TD>
<TD>Cellule 3-Rangée 2</TD>
</TR> <!-- Fin deuxième rangée -->
</TABLE> <!-- Fin tableau -->
Et voici ce que ça donne:
| Cellule 1-Rangée 1 |
Cellule 2-Rangée 1 |
Cellule 3-Rangée 1 |
| Cellule 1-Rangée 2 |
Cellule 2-Rangée 2 |
Cellule 3-Rangée 2 |
Couleur background
Il est possible de définir une couleur d'arrière-plan des tableaux. Pour cela, on ajoute à la balise
<TABLE> l'attribut
BGCOLOR="cornflowerblue" (si c'est la couleur qu'on désire pour tout le tableau). On va donc écrire:
<TABLE BGCOLOR="cornflowerblue" BORDER=1>
Si on veut donner une couleur à une seul rangée, on va plutôt ajouter l'attribut
BGCOLOR dans la balise
<TR>. On va donc écrire:
<TABLE border=1>
<TR BGCOLOR="cornflowerblue">
Pour une seule cellule, l'attribut sera ajouté à la balise
<TD>.
Exemple
| Cellule 1 |
Cellule 2 |
Cellule 3 |
| Cellule 1 |
Cellule 2 |
Cellule 3 |
Couleur de Bordure
Pour changer la couleur de bordure on ajoute l'attribut
BORDERCOLOR="cornflowerblue" à la balise
<TABLE>
Exemple
| Cellule 1 |
Cellule 2 |
Cellule 3 |
| Cellule 1 |
Cellule 2 |
Cellule 3 |
Cellspacing et cellpadding
On peut définir l'espacement entre les bordures et les cellules avec les attributs
CELLSPACING (Espace entre les traits de la bordure) et
CELLPADDING (Espace entre les cellules)
Cellspacing=0
Cellpadding=6 |
|
| Cellule 1 |
Cellule 2 |
Cellule 3 |
| Cellule 1 |
Cellule 2 |
Cellule 3 |
|
| |
Cellspacing=6 cellpadding=0 |
|
| Cellule 1 |
Cellule 2 |
Cellule 3 |
| Cellule 1 |
Cellule 2 |
Cellule 3 |
|