Bordures de tableau HTML
Les tableaux HTML peuvent avoir des bordures de styles et de formes différents.
Comment ajouter une bordure
Lorsque vous ajoutez une bordure à un tableau, vous ajoutez également des bordures autour de chaque cellule du tableau :
Pour ajouter une bordure, utilisez la border
propriété CSS sur les
éléments table
, th
et
td
:
Exemple
table, th, td
{
border: 1px solid black;
}
Bordures de tableau réduites
border-collapse
Pour éviter d'avoir des bordures doubles comme dans l'exemple ci-dessus, définissez la propriété CSS sur collapse
.
Cela fera s'effondrer les bordures en une seule bordure :
Exemple
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Style des bordures de tableau
Si vous définissez une couleur d'arrière-plan pour chaque cellule et donnez à la bordure une couleur blanche (la même que l'arrière-plan du document), vous obtenez 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 ronde
Avec la border-radius
propriété, les bordures ont des coins arrondis :
Exemple
table, th, td {
border: 1px solid
black;
border-radius: 10px;
}
Ignorez la bordure autour du tableau en table
omettant le sélecteur CSS :
Exemple
th, td {
border: 1px solid
black;
border-radius: 10px;
}
Bordures de tableau en pointillés
Avec la border-style
propriété, 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 la bordure
Avec la border-color
propriété, vous pouvez définir la couleur de la bordure.
Exemple
th, td {
border-color: #96D4D4;
}