des centaines d'astuces pour vous faciliter le quotidien


LES TABLEAUX HTLM

LES TABLEAUX HTLM

 

                  

 

LES TABLEAUX HTLM

 

 

 

 : Cette  balise  encapsule un tableau.
Le tableau est certainement un des éléments les plus important et des plus utilisé dans le cadre des mises en page des documents.

Ci-desous, voyez un exemple de tableau constitué de 2 rangées de 2 cellules.

Ex :

				
cellule 1 cellule 2
cellule 3 cellule 4
Résultat :
cellule 1 cellule 2
cellule 3 cellule 4
 : Cette balise délimite les rangées et encapsule les cellules (colonnes).
 : Cette balise délimite les cellules et encapsule le contenu de celle-ci.
align="..." : Aligne le tableau dans l'espace où il se trouve.
Pour "tr" et "td", c'est au contenu que l'attribut s'adresse.
Les valeurs admises sont "left" (par défaut), "center", "right"
background="..." : 
Affecte une image de fond.
Applicable à "table", "tr" et "td".
Ex :

				
cellule 1 cellule 2
cellule 3 cellule 4
Résultat :
cellule 1 cellule 2
cellule 3 cellule 4

bgcolor="..." : 
Affecte une couleur  au fond.
Applicable à "table", "tr" et "td".
Dans l'exemple ci-dessous,la couleur rouge a été affectée au tableau et le jaune à la cullule

 1.

Ex :

				
cellule 1 cellule 2
cellule 3 cellule 4
Résultat :
cellule 1 cellule 2
cellule 3 cellule 4
border="..." : Defini l'épaisseur des bordures et la valeur est exprimée en pixels. Une valeur de "0" suprime les bordures.
cellpadding="..." : 
Crée un espace entre la bordure et le contenu des cellules.
Ex :

				
cellule 1 cellule 2
cellule 3 cellule 4
Résultat :
cellule 1 cellule 2
cellule 3 cellule 4
cellspacing="..." : 
Crée un espace entre les cellules.
Dans l'exemple ci-dessous, le tableau a une hauteur de 150 et 20% de cette hauteur (soit 30 pixels) a été affecté à la première rangée
Ex :

				
cellule 1 cellule 2
cellule 3 cellule 4
Résultat :
cellule 1 cellule 2
cellule 3 cellule 4
colspan="..." : 
Fusionne des cellules horizontalement.
Ne s'applicable qu'à "td".
Ex :

				
cellule 1 et cellule 2
cellule 3 cellule 4
Résultat :
cellule 1 et cellule 2
cellule 3 cellule 4
height="..." : 
Force la hauteur.
S'exprime en pixels ou en pourcentage.
Applicable à "table", "tr" et "td".
Dans l'exemple ci-dessous, le tableau a une hauteur de 150 et 20% de cette hauteur (soit 30 pixels) a été affecté à la première rangée.
Ex :

				
cellule 1 cellule 2
cellule 3 cellule 4
Résultat :
cellule 1 cellule 2
cellule 3 cellule 4
hspace="..." : 
Réserve un espace à droite et à gauche du tableau
S'exprime en pixels.
Ne fonctionne qu'avec Firefox.
Ex :

				
cellule 1 cellule 2
cellule 3 cellule 4
Résultat :
cellule 1 cellule 2
cellule 3 cellule 4
rowspan="..." : 
Fusionne des cellules verticalement.
Ne s'applicable qu'à "td".
Ex :

				
cellule 1
cellule 3
cellule 2
cellule 4
Résultat :
cellule 1
cellule 3
cellule 2
cellule 4
valign="..." : 
Aligne le tableau dans l'espace où il se trouve.
Pour "tr" et "td", c'est au contenu que l'attribut s'adresse.
Les valeurs admises sont "left" (par défaut), "center", "right".
Ex :

				
cellule 1
cellule 2
cellule 3
cellule 4
Résultat :
cellule 1
cellule 2
cellule 3
cellule 4
vspace="..." : 
Réserve un espace au-dessus et en-dessous du tableau
S'exprime en pixels.
Ne fonctionne qu'avec Firefox.
Ex :
Text au-dessus
cellule 1 cellule 2
cellule 3 cellule 4
Text en-dessous
Résultat :
Text au-dessus
cellule 1 cellule 2
cellule 3 cellule 4
Text en-dessous
width="..." : 
Force la largeur.
S'exprime en pixels ou en pourcentage.
Applicable à "table", "tr" et "td".
Dans l'exemple ci-dessous, le tableau a une largeur de 210 et 40% de cette largeur (soit 84 pixels) a été affecté à la première colonne.
Ex :

				
cellule 1 cellule 2
cellule 3 cellule 4
Résultat :
cellule 1 cellule 2
cellule 3 cellule 4
Compatibilité : IE Firefox