Les tableaux HTML
L'utilisation des tableaux dans une page HTML est une bonne façon de gérer l'espace sur une page HTML ! Les tableaux permettent de diviser la page en zones et de remplir ces zones avec des objets (textes, images, couleurs), permettant un contrôle amélioré de la position de ceux-ci.
Ces tables peuvent avoir un fond et des bords visibles ou non.
Les balises :
<TABLE> et </TABLE> : pour définir un tableau
<TR> et </TR> : pour définir une rangée
<TH> et </TH> : pour les cellules de haut de colonne (facultatif)
<TD> et </TD> : pour une cellule
Exemple de tableau :
Ces tables peuvent avoir un fond et des bords visibles ou non.
Les balises :
<TABLE> et </TABLE> : pour définir un tableau
<TR> et </TR> : pour définir une rangée
<TH> et </TH> : pour les cellules de haut de colonne (facultatif)
<TD> et </TD> : pour une cellule
Exemple de tableau :
Cellule 1 |
Cellule 2 |
Le code source de cet exemple :
<TABLE BORDER=2 CELLPADDING=2 WIDTH=460 > (définit le bord, la marge et la largeur du tableau en pixel)
<TR>
<TD WIDTH="70%" BGCOLOR="#CCCC99"> (définit la largeur et la couleur cellule 1)
<P>Cellule 1</P>
</TD>
<TD WIDTH="30%" BGCOLOR="#CCCCCC"> (définit la largeur et la couleur cellule 2)
<P>Cellule 2</P>
</TD>
</TR>
</TABLE>
Quelques attributs de tableaux :
<table bgcolor="couleur"> Mettre un fond de couleur
<table width="50%"> Occupation en % de la page, également en pixels
<table border="1"> Taille des bords (0=pas de bords)
border color="couleur" couleur des bordures
cellpadding="2" Marge intérieure des cellules
cellspacing="3" Espacement entre les cellules
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 les attributs : 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 :
<TABLE BORDER=2 CELLPADDING=2 WIDTH=460 > (définit le bord, la marge et la largeur du tableau en pixel)
<TR>
<TD WIDTH="70%" BGCOLOR="#CCCC99"> (définit la largeur et la couleur cellule 1)
<P>Cellule 1</P>
</TD>
<TD WIDTH="30%" BGCOLOR="#CCCCCC"> (définit la largeur et la couleur cellule 2)
<P>Cellule 2</P>
</TD>
</TR>
</TABLE>
Quelques attributs de tableaux :
<table bgcolor="couleur"> Mettre un fond de couleur
<table width="50%"> Occupation en % de la page, également en pixels
<table border="1"> Taille des bords (0=pas de bords)
border color="couleur" couleur des bordures
cellpadding="2" Marge intérieure des cellules
cellspacing="3" Espacement entre les cellules
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 les attributs : 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 :
Cellule 1 | 2 cellules fusionnées (sur la même ligne) | |
Cellule 2 | Cellule 3 | 2 cellules fusionnées (sur la même colonne) |
Cellule 4 | Cellule 5 |
Le code source de cet exemple :
<B><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>
<B><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>
EXERCICE : Réalisation d'une page web selon un modèle précis : -> exemple.html