CSS Tables
L'apparence d'un tableau HTML peut être grandement améliorée avec CSS :
| Société | Contact | Pays |
|---|---|---|
| La mangeoire d'Alfred | Marie Anders | Allemagne |
| Supermarché de Berglund | Christina Berglund | la Suède |
| Centre commercial Montezuma | Francisco Chang | Mexique |
| commerce sérieux | Roland Mendel | L'Autriche |
| Commerce insulaire | Hélène Bennett | Royaume-Uni |
| Nourriture royale | Philippe Cramer | Allemagne |
| Caves Bacchus qui rit | Yoshi Tannamuri | Canada |
| Entrepôts de nourriture rassemblés | Giovanni Rovelli | Italie |
Bordures de tableau
Pour spécifier les bordures de tableau en CSS, utilisez la borderpropriété.
L'exemple ci-dessous spécifie une bordure noire pour les éléments <table>, <th> et <td> :
Exemple
table, th, td {
border: 1px solid black;
}
Tableau pleine largeur
Le tableau ci-dessus peut sembler petit dans certains cas. Si vous avez besoin d'un tableau qui doit s'étendre sur tout l'écran (pleine largeur), ajoutez width: 100%à l'élément <table> :
Exemple
table {
width: 100%;
}
Doubles bordures
Notez que le tableau dans les exemples ci-dessus a des bordures doubles. En effet, le tableau et les éléments <th> et <td> ont des bordures distinctes.
Pour supprimer les doubles bordures, regardez l'exemple ci-dessous.
Réduire les bordures du tableau
La border-collapsepropriété définit si les bordures du tableau doivent être réduites en une seule bordure :
Exemple
table
{
border-collapse: collapse;
}
Si vous souhaitez uniquement une bordure autour du tableau, spécifiez uniquement la borderpropriété pour <table> :
Exemple
table
{
border: 1px solid black;
}