Création de site internet : Créer son site internet
les tableaux
Les tableaux vont permettre d'afficher des données de manière rationnelle. Ils peuvent quelquefois être utilisés pour la mise en page, mais nous allons voir avec les feuilles de styles que l'utilisation des frames et des tableaux peut quelque fois être évitée. En effet, se servir d'un tableau pour une mise en page peut rendre la maintenance difficile.
Un tableau est constitué de lignes et de colonnes définies entre les balises <TABLE>et </TABLE>.
Propriétés de la balise <TABLE>:
Cellpadding : marge supplémentaire à l'intérieur de chacune des cellules (en pixels)
Cellspacing : espacement des cellules (en pixels)
Border : ajoute ou non une bordure (valeurs possibles : 0 si pas de bordure ou plus pour définir l'épaisseur de la bordure)
Chaque ligne se définit par les balises <TR> et </TR> entre lesquelles on doit insérer les colonnes au moyen des balises <TD> et </TD>. Ces dernières possèdent les propriétés NOWRAP pour interdire le retour à la ligne du texte dans une cellule ainsi que COLSPAN et ROWSPAN pour fusionner des colonnes ou des lignes.
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td width="50%" align="center" valign="middle" nowrap>
en haut, vers la gauche
</td>
<td width="50%" align="center" valign="middle" nowrap>
en haut, vers la droite
</td>
</tr>
<tr>
<td width="50%" align="center" valign="middle" nowrap>
en bas, vers la gauche
</td>
<td width="50%" align="center" valign="middle" nowrap>
en bas, vers la droite
</td>
</tr>
</table>
en haut, vers la gauche
en haut, vers la droite
en bas, vers la gauche
en bas, vers la droite
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="center" valign="middle" rowspan="2" nowrap>
embrassement des lignes
</td>
<td width="50%" align="center" valign="middle" nowrap>
en haut, vers la droite
</td>
</tr>
<tr>
<td width="50%" align="center" valign="middle" nowrap>
en bas, vers la droite
</td>
</tr>
</table>
embrassement
des lignes
en haut, vers la droite
en bas, vers la droite
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="center" valign="middle" colspan="2" nowrap>
embrassement des colonnes
</td></tr>
<tr>
<td width="50%" align="center" valign="middle" nowrap>
en bas, vers la gauche
</td>
<td width="50%" align="center" valign="middle" nowrap>
en bas, vers la droite
</td>
</tr>
</table>
embrassement
des colonnes
en bas, vers la gauche
en bas, vers la droite
Les propriétés communes à toutes ces balises sont :
Width : largeur, en pourcentage ou en pixels
Height : hauteur, en pourcentage ou en pixel
Align : alignement horizontal, valeurs possibles : left, center, right
Valign : alignement vertical, valeurs possibles : top, middle, bottom
Bgcolor : couleur de fond
Background : emplacement et nom du fichier source de l'image de fond
Bordercolor : couleur de la bordure
BorderColorLight : couleur de la bordure intérieure
BorderColorDark : couleur de la bordure extérieure