CSS Tableau
L'utilisation de CSS peut rendre les tableaux HTML plus beaux.
| Entreprise | Contact | Pays |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Allemagne |
| Berglunds snabbköp | Christina Berglund | Suède |
| Centro comercial Moctezuma | Francisco Chang | Mexique |
| Ernst Handel | Roland Mendel | Autriche |
| Island Trading | Helen Bennett | Royaume-Uni |
| Königlich Essen | Philip Cramer | Allemagne |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italie |
| North/South | Simon Crowther | Royaume-Uni |
| Paris spécialités | Marie Bertrand | France |
| The Big Cheese | Liz Nixon | États-Unis |
| Vaffeljernet | Palle Ibsen | Danemark |
Bordures de tableau
Pour spécifier les bordures de tableau CSS, utilisez la propriété border.
L'exemple suivant spécifie une bordure noire pour les éléments Th et TD d'un tableau :
Notez que le tableau dans l'exemple ci-dessus a des bordures doubles. C'est parce que le tableau et les éléments th/td ont des bordures séparées.
Pour afficher une seule bordure pour un tableau, utilisez la propriété border-collapse.
Fusionner les bordures
La propriété border-collapse définit si les bordures du tableau sont fusionnées en une seule bordure ou séparées :
Exemple
Essayez-le vous-même »
Largeur et hauteur du tableau
Les propriétés width et height définissent la largeur et la hauteur d'un tableau.
L'exemple suivant définit un tableau avec une largeur de 100% et des éléments th d'une hauteur de 50 pixels :
Alignement du texte du tableau
Propriétés d'alignement du texte et d'alignement vertical dans les tableaux.
La propriété text-align définit l'alignement horizontal, left, right ou center :
La propriété d'alignement vertical définit l'alignement vertical, comme top, bottom ou middle :
Padding des tableaux
Pour contrôler l'espacement entre la bordure et le contenu d'un tableau, utilisez la propriété padding sur les éléments td et th :
Couleurs des tableaux
L'exemple suivant spécifie la couleur de la bordure, ainsi que la couleur du texte et de l'arrière-plan des éléments th :
Exemple
Essayez-le vous-même »
Plus d’exemples
Créer un tableau personnalisé
Cet exemple montre comment créer un tableau personnalisé.
Définir la position de la légende du tableau
Cet exemple montre comment positionner une légende de tableau.