Valid XHTML 1.0 Transitional CSS Valide !

5-1 Tableaux

4 balises pour les tableaux :

Exemple :

Ligne 1 Ligne n°1 - Cellule n°1 Ligne n°1 - Cellule n°2
Ligne 2 Ligne n°2 - Cellule n°1 Ligne n°2 - Cellule n°2

Parametrer le tableau : les attributs pour table

La bordure : border="chiffre" (NB: si border="0" on le voit plus)
Ligne 1 Ligne n°1 - Cellule n°1 Ligne n°1 - Cellule n°2
Ligne 2 Ligne n°2 - Cellule n°1 Ligne n°2 - Cellule n°2

L'espace entre les cellules : cellspacing="chiffre"
Ligne n°1 - Cellule n°1 Ligne n°1 - Cellule n°2
Ligne n°2 - Cellule n°1 Ligne n°2 - Cellule n°2

L’espacement entre le contenu d’une cellule et sa bordure : cellpadding="chiffre"
Ligne n°1 - Cellule n°1 Ligne n°1 - Cellule n°2
Ligne n°2 - Cellule n°1 Ligne n°2 - Cellule n°2

Plus rare :
La hauteur du tableau : height="valeur" où la valeur est soit en % (100%) ou en pixel (100)
La largeur du tableau : width="valeur" où la valeur est soit en % (100%) ou en pixel (100)

Parametrer les cellules : les attributs de td

Couleur de fond : bgcolor="nom de couleur ou code hexadecimal"

La hauteur de la cellule : height="valeur" où la valeur est soit en % (100%) ou en pixel (100). NB : la somme des hauteurs des lignes doit être égale à la hauteur du tableau, sauf si la hauteur du tableau n'a pas été définie et dans un tableau simple (sans fusion de colonnes) toutes les cellules de la même ligne doivent avoir la même hauteur.

La largeur de la cellule : width="valeur" où la valeur est soit en % (100%) ou en pixel (100). NB : la somme des longueurs des colonnes doit être égale à la longueur du tableau, sauf si la longueur du tableau n'a pas été définie.

En règle générale, le % est rarement utilisé, aussi bien pour la hauteur que pour la largueur, car il reste très aléatoire. En effet, tout dépend de la taille de la fenêtre et de la résolution de l’écran du visiteur.

Exo 5-1 Tableau : défintion hauteur et largeur et aussi bordure

Exo 5-2 Tableau : 2 colonnes, du texte et des images

L’alignement vertical est aussi largement utilisé (valign). Par défaut, le contenu est centré. Les valeurs possibles TOP | MIDDLE | CENTER | BOTTOM | BASELINE


Fusionner les cellules

Nous allons fusionner des cellules du tableaux ci-dessous soit en horizontal soit en vertical.
1 2 3
4 5 6
7 8 9

Fusions horizontales ou de cellules d'une même ligne : attribut colspan pour td, colspan="nb de colonne"
1+2 3
4 5 6
7+8+9

Fusions verticales ou de cellules d'une même colonnes: attribut rowspan pour td, rowspan="nb de colonne"
1
+
4
2 3
+
6
+
9
5
7 8

NB : dans les cas de fusion, il faut penser à ne pas écrire, rédiger les cellules "absordées". Pour bien comprendre, regarder le code source.

Exo 5-4 Tableau : fusions de cellules

Exo 5-3 Tableau : mise en forme par feuille de style, un site : Propriétés css pour tableaux par developpez.com


Cliquer ici pour retourner à la page d'accueil