Si dans le passé les tableaux étaient utilisés pour définir des grilles de mise en page, leur usage est désormais réservé à l'affichage de données présentées spécifiquement dans une structure tabulaire (données statistiques, tableaux de produits, grilles de tarifs, etc).
Propriétés de base
Rappel sur les tableaux
Dans sa forme la plus simple, un tableau est une élément table qui contient des lignes (éléments tr) composées de cellules (éléments td).
Comme on le voit en affichant l'exemple, par défaut un tableau a
peu de mise en forme particulière.
Un tableau est un élément de type bloc un peu particulier car il ne
prend pas nécessairement toute la largeur de son conteneur, mais
uniquement la largeur qui lui est nécessaire pour afficher le
contenu de ces cellules.
Le contenu des cellules est quant à lui aligné verticalement et les
cellules sont éloignées les unes des autres par un espace de 2
pixels
D'autres éléments HTML permettent d'introduire plus de sémantique dans la description d'un tableau :
- caption définit le titre du tableau,
- thead regroupe les cellules d'en-tête (une ou plusieurs lignes),
- th définit une cellule d'en-tête,
- tbody regroupe les cellules du corps du tableau (une ou plusieurs lignes),
- tfoot regroupe les cellules du corps du tableau (une ou plusieurs lignes).
On voit que les éléments th ont par défaut une mise en forme particulière : leur contenu est centré dans la cellule et en gras.
Bordure et espacement des cellules
La propriété border permet de définir la taille, la couleur et le style des bordures des cellules.
Pour supprimer l'espace entre les celules il pourrait sembler
naturel de donner la valeur 0 à la propriété border-spacing,
mais on n'obtiendra pas l'effet escompté car l'espace sera bien
supprimé, mais le résultat sera des bordures côte à côte.
Ce qu'il faut faire c'est fusionner les bordures avec la propriété
border-collapse
à la valeur collapse (et non separate, la
valeur par défaut).
Cette propriété est à appliqué à l'élément table.
Nous pouvons ajouter des marges internes avec la propriété padding pour que le contenu d'une cellule ne soit pas collé à sa bordure.
Pour les cellules contenant des nombres, l'alignement à droite est recommandé.
Dimensions
Par défaut un tableau prend ni plus ni moins que la largeur et la
hauteur minimum nécessaires pour afficher le contenu de ces
cellules.
Si le contenu est moins grand que le conteneur du tableau, le
tableau ne prendra pas 100% du conteneur.
Si le contenu est trop grand pour être affiché dans la largeur du
conteneur, le contenu sera réparti sur plusieurs lignes dans les
cellules. Si il ne tient toujours pas, le tableau aura une largeur
plus grande que son conteneur et en dépassera.
On peut bien sûr fixer la largeur d'un tableau avec la propriété width
et la hauteur avec la propriété height
en unités absolues ou en pourcentage.
Le contenu sera adapté pour tenir compte de ces dimensions, soit
par l'agrandissement des dimensions des cellules, soit par du
contenu de cellule répartis sur plusieurs lignes.
On peut donner les dimensions des cellules toujours avec les
propriétés width
et height
en unités absolues ou en pourcentage.
Toutes les cellules d'une même colonne auront la même largeur et
toutes les cellules d'une même ligne auront la même hauteur ( sauf
bien sûr si on fusionne des cellules avec les attributs colspan
ou rowspan - voir tutoriel HTML ▸ Groupements
▸ Tableaux).
Dans nos hangars
Complétez le code HTML et le code CSS pour obtenir le tableau ci-dessous.
Le tableau est centré horizontalement dans la page et la police utilisée pour le tableau est Verdana ou Helvetica ou sans-serif, à la taille de 15 pixels.
La taille de la police pour le titre est de 18 pixels et le texte est en gras.
La largeur des cellules est de 80 pixels et elles ont une bordure
rouge de 1 pixel. La marge interne verticale est de 5 pixels et la
marge interne horizontale de 10 pixels.
Les chiffres dans les cellules sont alignés à droite.
Toutes les images se trouvent dans le répertoire ../exemple/img/
et s'appelle dans l'ordre v8.png, v3.png
et v5.png.
Modifiez la solution pour gérer un effet de survol de la souris.
A son passage au dessus des images on affiche un agrandissement
( |
|
|
|
Mise en forme
Couleur/image de fond
Pour mettre une couleur de fond (ou une image de fond ou un
dégradé) on utilise comme d'habitude la propriété background
qui est applicable à tous les éléments constitutifs d'un tableau (table,
tr, td,
caption,
thead,
th, tbody
et tfoot).
La couleur finalement visible tient compte de l'imbrication des
éléments : c'est la couleur donnée à l'élément le plus profond dans
l'imbrication qui est visible.
Zébrage
Pour les tableaux qui ont de nombreuses colonnes et/ou de nombreuses lignes, on peut améliorer la lisibilité en changeant de couleur pour les lignes paires et les lignes impaires. Avec le selecteur CSS3 de pseudo-classe :nth-of-type(n) c'est on ne peut plus simple.
Survol des lignes
Pour augmenter encore la lisibilité, il est très facile de gèrer le survol des lignes pour mettre en évidence les informations contenues dans une rangée. On utilisera bien sûr la pseudo-classe hover en la faisant porter sur les éléments tr du corps du tableau (ou du tableau entier).
Dans nos hangars : le retour
A partir du code HTML ci-après, complétez le code CSS pour obtenir le tableau ci-dessous.
Le tableau est centré horizontalement dans la page et la police utilisée pour le tableau est Verdana ou Helvetica ou sans-serif, à la taille de 15 pixels et de couleur blanche.
La taille de la police pour le titre est de 40 pixels et le texte
est en gras. Le titre a des marges verticales de 16px. L'effet néon
sur le texte est fait avec des ombres sans décalage : une ombre de
4 pixels couleur #FFF, une ombre de 4 pixels couleur #FFFF33,
une ombre de 6 pixels couleur #FFDD33, une ombre de 11
pixels couleur #FF8800 et une ombre de 18 pixels
couleur #FF2200.
Les cellules d'en-tête et de pied ont une ombre sans décalage de 4
pixels, avec 1 pixel de renfort et de couleur #FF8800.
Pour que le contour des cellules soit bien visibles, leur bord ne
doit pas être fusionné.
La largeur des cellules est de 80 pixels. La marge interne
verticale est de 5 pixels et la marge interne horizontale de 10
pixels.
Les chiffres dans les cellules sont alignés à droite.
Quand la souris survol une ligne du corps du tableau, l'affichage de la figure suivante doit être réalisé.
Les cellules sont entourée par la même ombre que les cellules
d'en-tête et de pied, sauf pour la couleur qui est #ddc067.
la couleur de fond des cellules devient #111 et le
curseur de la souris change pour la forme pointer.
Modifiez la solution pour gérer l'affichage d'informations complémentaires quand la souris survole les lignes du corps du tableau.
Quand la souris survole une ligne on affiche les prix de location et de vente d'un vaisseau.
| Ligne | Location | Vente |
| 1 | 1 000 € / h | 60 000 € |
| 2 | 2 500 € / h | 149 999 € |
| 3 | 5 000 € / h | 200 000 € |
Les textes sont affichés avec la police Consolas ou monaco ou monospace, en taille 13 pixels et dans une couleur composée de rouge 237, vert 211 et bleu 1. Les textes sont centrés horizontalement et placés tout en bas de la cellule.
Quand la souris survole la 1ère cellule d'une ligne on affiche dans un tableau des informations sur le vaiseau.
Les informations sur un vaiseau sont présentées dans un tableau de 3 lignes et 2 colonnes.
| Ligne 1 | Ligne 2 | Ligne 3 | |
| Nom | Droid Gunship | X-Wing | naboo N-1 |
| Vitesse | 14 200 km/h | 1 000 km/h | 1 100 km/h |
| Equipage | Aucun | 1 pilote | 1 pilote |
Le tableau d'informations occupe tout l'espace de la cellule et a un fond noir transparent à 50%. Les textes sont affichés avec la police Consolas ou monaco ou monospace, en taille 13 pixels. Dans la 1ère colonne, les textes sont en blancs et alignés à droite. Dans la 2ème colonne ils sont alignés à gauche et leur couleur est composée de rouge 237, vert 211 et bleu 1.