|
|
|
|
La
notion de table, ou tableau, est un élément important
dans la conception de pages en html. Il permet toutes sortes de positionnement
et d'imbrication des éléments d'un document. En outre
la possibilité de colorier la table, la ligne ou simplement
la cellule d'une table permet tant de fantaisies ... |
| |
|
|
Tables :
Une table ( un tableau ) est un cadre rectangulaire composé
de lignes et de colonnes (minimum 1 ligne et 1 colonne). Le schéma
ci-dessus représente une petite table (130 pixels de largeur)
de 2 colonnes sur 2 lignes.
Pour créer
une table, rien de compliqué, il suffit de l'indiquer par
la balise html <table>. Sa balise fermante est bien sûr
: </table>. Entre les deux balises indiquer les lignes une
à une, délimitées par les balises <tr>
et </tr>, et entre ses dernières disposer les cellules
(colonnes) délimitées par les balises <td> et
</td>, comme ceci :
<table>
<tr>
<td>Ici le contenu de la cellule 1</td>
<td>Ici le contenu de la cellule 2</td>
etc...
</tr>
<tr>
Ici les cellules (et leur contenu) de la deuxième ligne
</tr>
etc...
</table>
|
| |
|
Exemples
:
|
|
<table>
<tr>
<td>Je suis la cellule 1 / ligne 1</td>
<td>Je suis la cellule 2 / ligne 1</td>
<td>Je suis la cellule 3 / ligne 1</td>
</tr>
<tr>
<td>Je suis la cellule 1 / ligne 2</td>
<td>Je suis la cellule 2 / ligne 2</td>
<td>Je suis la cellule 3 / ligne 2</td>
</tr>
</table> |
| Je suis la cellule
1 / ligne 1 |
Je suis la cellule
2 / ligne 1 |
Je suis la cellule
3 / ligne 1 |
| Je suis la cellule
1 / ligne 2 |
Je suis la cellule
2 / ligne 2 |
Je suis la cellule
3 / ligne 2 |
La balise <table>
peut avoir des attributs, comme :
- border : l'épaisseur de la bordur, 0 = pas de bordure .
- bgcolor : la couleur du fond de la tabble en hexadécimal
.
Exemple: <table border="0" bgcolor="#CCCCFF">,
donne ceci :
| Je suis la cellule
1 / ligne 1 |
Je suis la cellule
2 / ligne 1 |
Je suis la cellule
3 / ligne 1 |
| Je suis la cellule
1 / ligne 2 |
Je suis la cellule
2 / ligne 2 |
Je suis la cellule
3 / ligne 2 |
|
| |
|
| Attributs
de la balise <table> |
Effet
|
width
height
border
cellspacing
cellpadding
bgcolor
background
|
Largeur
de la table en pixels ou poucentage
Hauteur de la table en pixels ou poucentage
Epaisseur de la bordure ( "0" = pas de bordure )
Espacement entre les cellules ( par défaut 2 pixels )
Marge intérieure des cellules ( par défaut 2 pixels
)
Couleur d'arrière plan de la table
Image d'arrière plan pour la table |
| |
|
| Attributs
des cellules <td> |
Effet
|
width
height
bgcolor
align
valign
colspan
|
Largeur
de la cellule en pixels ou pourcentage
hauteur de la cellule en pixels ou pourcentage
Couleur d'arrière plan de la cellule
Alignement horizontal du contenu de la cellule ( left, center ou right
)
Alignement vertical du contenu de la cellule ( top, middle ou bottom
)
Nombre de colonnes sur lesquelles s'étend la cellule ( par
défaut "1" ) |
Ces
attributs ne représentent que les plus importants et les plus
fréquemment utilisés, il en existe d'autres que nous
détaillerons dans un prochain document.
Dans le document suivant "Résolutions
écrans et pages html", vous trouverez plus d'exemples
sur l'utilisation des tables. |
| |
|
|
