HTML Bordures de Table
Les tables HTML peuvent avoir des bordures de différents styles et formes.
Comment Ajouter une Bordure
Pour ajouter une bordure, utilisez la propriété CSS border sur les éléments table , th et td :
Exemple
table, th, td {
border: 1px solid black;
} Bordures de Table Effondrées
Pour éviter d'avoir des bordures doubles comme dans l'exemple ci-dessus, définissez la propriété CSS border-collapse sur collapse .
Cela fera en sorte que les bordures s'effondrent en une seule bordure :
Exemple
table, th, td {
border: 1px solid black;
border-collapse: collapse;
} Style des Bordures de Table
Si vous définissez une couleur de fond pour chaque cellule et donnez à la bordure une couleur blanche (la même que celle de l'arrière-plan du document), vous aurez l'impression d'une bordure invisible :
Exemple
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
} Bordures de Table Arrondies
Avec la propriété border-radius , les bordures obtiennent des coins arrondis :
Exemple
table, th, td {
border: 1px solid black;
border-radius: 10px;
} Omettez la bordure autour de la table en excluant table du sélecteur CSS :
Exemple
th, td {
border: 1px solid black;
border-radius: 10px;
} Bordures de Table en Pointillés
Avec la propriété border-style , vous pouvez définir l'apparence de la bordure.
Les valeurs suivantes sont autorisées :
-
dotted -
dashed -
solid -
double -
groove -
ridge -
inset -
outset -
none -
hidden
Exemple
th, td {
border-style: dotted;
} Couleur de Bordure
Avec la propriété border-color , vous pouvez définir la couleur de la bordure.
Exemple
th, td {
border-color: #96D4D4;
}