Créer des tableaux (2)
Maintenant que nous savons comment créer un simple tableau, nous allons découvrir les principaux attributs que nous pouvons utiliser.
|
<HTML>
<HEAD> <TITLE>Les tableaux</TITLE> </HEAD> <BODY> Tableaux avec des fonds de couleurs et alignements du contenu : <TABLE border=2 bgcolor="#000000" cellpadding=5 cellspacing=3 align="center"> <TR> <TD width=100 height=100 bgcolor="#CCCCCC" valign="top" align="left">#CCCCCC</TD> <TD width=100 height=100 bgcolor="#FFFFFF" align="right" valign="top">#FFFFFF</TD> </TR> <TR> <TD width=100 height=100 bgcolor="#FF0000" align="left" valign="middle">#FF0000</TD> <TD width=100 height=100 bgcolor="#0099FF" align="right" valign="middle">#0000FF</TD> </TR> <TR> <TD width=100 height=100 bgcolor="#FFFFCC" valign="bottom" align="right">#FFFFCC</TD> <TD width=100 height=100 bgcolor="#008000" valign="bottom" align="left">#008000</TD> </TR> </TABLE> <BR><BR> Fusion de celulles (colonnes) : <TABLE border=1 width=400 align="center" cellspacing=0 cellpadding=2> <TR> <TD width="25%">Celulle 1</TD> <TD width="25%">Celulle 2</TD> <TD width="25%">Celulle 3</TD> <TD width="25%">Celulle 4</TD> </TR> <TR> <TD colspan=4 align="center">Celulle fusionnée sur 4 colonnes</TD> </TR> </TABLE> <BR><BR> Fusion de celulles (lignes) : <TABLE width=400 align="center" cellspacing=0 cellpadding=2> <TR> <TD width="50%" bgcolor="#FFFF00">Celulle 1</TD> <TD width="50%" bgcolor="#CCFFFF">Celulle 2</TD> <TD rowspan=2 bgcolor="#333333"><CENTER><FONT color="#FFFFFF">Fusion de 2 lignes</FONT></CENTER></TD> </TR> <TR> <TD width="50%" bgcolor="#CCCCCC">Celulle 3</TD> <TD width="50%" bgcolor="#999999">Celulle 4</TD> </TR> </TABLE> </BODY> </HTML> |
Ce qui donnera une page dont le contenu sera comme ceci :
Tableaux avec des fonds de couleurs et alignements du contenu :
| #CCCCCC | #FFFFFF |
| #FF0000 | #0000FF |
| #FFFFCC | #008000 |
Fusion de celulles (colonnes) :
| Celulle 1 | Celulle 2 | Celulle 3 | Celulle 4 |
| Celulle fusionnée sur 4 colonnes | |||
Fusion de celulles (lignes) :
| Celulle 1 | Celulle 2 | |
| Celulle 3 | Celulle 4 |
Vous pouvez maintenant enregistrer votre page et visualiser le résultat dans votre navigateur.
Explications des nouveaux attributs utilisées :
- "bgcolor" permet de donner un fond de couleur à un tableau ou à une celulle. Comme toujours la couleur peut être précisée soit par som nom (en anglais) soit par son code Hexa (le blanc soit #FFFFFF est la couleur par défaut).
- "width" permet de préciser la largeur d'un tableau ou d'une celulle. La largeur peut être donnée en pixel ou en pourcentage.
- "height" permet de donner la hauteur d'une celulle. Il n'est pas possible de préciser la hauteur d'un tableau. Attention, si vous donnez une certaine hauteur X à une celulle et que vous placez par exemple une image dont la hauteur est plus grande, la celulle s'adaptera à la taille de l'image en "oubliant" son attribut hauteur ! (idem en largeur).
- "cellpadding" définit l'espace en pixel entre le bord d'une celulle et son contenu. (1 par défaut).
- "cellspacing" définit l'espace entre les celulles du tableau. (1 par défaut).
- "colspan" permet de faire fusionner des celulles d'une même ligne. Il faut y préciser le nombre de celulles à fusionner.
- "rowspan" permet de faire fusionner des cellules d'un même colonne. Il faut y préciser le nombre de celulles.
- "align" précise l'alignement sur un axe horizontal du tableau ou du contenu de la celulle. (valeur possible : "left" par défaut, "right", "center").
- "valign" précise l'alignement du contenu des celulles sur un axe vertical. (valeur possible : "middle", "bottom", "top").
Petits plus :
- Vous pouvez mettre une image comme fond d'un tableau à la palce d'une simple couleur (comme pour la balise BODY) avec l'attribut background. Mais cet attribut ne sera accepté que par Internet Explorer, les autres n'afficheront pas l'image !
- Il est également possible ce changer la couleur de la bordure autour du tableau avec l'attribut "bordercolor" (par exemple bordercolor="#000000"). Mais encore une fois, cet attribut n'est compatible qu'avec IE !
| Précédent : Créer des tableaux(1) | Suivant : Les formulaires (1) |
| Retour au sommaire | |
