CSS Tables
Les tableaux HTML peuvent être considérablement améliorés avec CSS :
| 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 |
Bordures de tableau CSS
La propriété CSS border est utilisée pour spécifier la largeur, le style et la couleur des bordures de tableau.
La propriété border est une propriété abrégée pour :
-
border-width- définit la largeur de la bordure -
border-style- définit le style de la bordure (obligatoire) -
border-color- définit la couleur de la bordure
L'exemple ci-dessous spécifie une bordure solide de 1px pour les éléments <table>, <th> et <td> :
| Prénom | Nom |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
Exemple
table, th, td {
border: 1px solid;
} Couleur de bordure de tableau CSS
L'exemple ci-dessous spécifie une bordure solide verte de 1px pour les éléments <table>, <th> et <td> :
| Prénom | Nom |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
Exemple
table, th, td {
border: 1px solid green;
} Pourquoi des bordures doubles ?
Remarquez que les tableaux dans les exemples ci-dessus ont des bordures doubles. Cela est dû au fait que les éléments <table>, <th> et <td> ont des bordures séparées.
Pour supprimer les bordures doubles, jetez un œil à l'exemple ci-dessous.
Bordures de tableau CSS en collapse
La propriété CSS border-collapse définit si les bordures de tableau doivent se regrouper en une seule bordure ou être séparées comme dans le HTML standard.
Cette propriété peut avoir l'une des valeurs suivantes :
-
separate- Valeur par défaut. Les bordures sont séparées ; chaque cellule affichera ses propres bordures -
collapse- Les bordures sont regroupées en une seule bordure lorsque cela est possible
Le tableau suivant a des bordures regroupées :
| Prénom | Nom |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
Exemple
Utilisation de la propriété border-collapse :
table {
border-collapse: collapse;
} Rembourrage de tableau CSS
Pour contrôler l'espace entre la bordure et le contenu dans un tableau, utilisez la propriété padding sur les éléments <td> et <th> :
| Prénom | Nom | Économies |
|---|---|---|
| Peter | Griffin | 100 $ |
| Lois | Griffin | 150 $ |
| Joe | Swanson | 300 $ |
Exemple
th, td {
padding: 10px;
} Espacement des bordures CSS
La propriété CSS border-spacing définit la distance entre les bordures des cellules adjacentes.
Remarque : Cette propriété ne fonctionne que lorsque border-collapse est défini sur "separate".
Le tableau suivant a un espacement de bordure de 15px :
| Prénom | Nom |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
Exemple
Utilisation de la propriété border-spacing :
table {
border-collapse: separate;
border-spacing: 15px;
} Bordures extérieures de tableau CSS
Si vous souhaitez simplement une bordure autour du tableau (et non à l'intérieur), vous devez spécifier la propriété border uniquement pour l'élément <table> :
| Prénom | Nom |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
Exemple
table {
border: 1px solid;
}