HTML Bordures de tableau
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 propriété CSS border sur la table, th et td :
Bordures de tableau réduites
Pour éviter d'avoir des bordures doubles comme dans l'exemple ci-dessus, définissez la propriété CSS border-collapse sur collapse.
Les bordures seront alors réduites à une seule :
Bordures de table de styles
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;
}
Try it Yourself »
Bordures de table ronde
Avec la propriété border-radius, les bordures ont des coins arrondis :
Ignorez la bordure autour du tableau en laissant de côté table du sélecteur CSS :
Bordures de tableau en pointillés
Avec la propriété border-style, vous pouvez définir l'apparence de la bordure.
Les valeurs suivantes sont autorisées :
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
Couleur de la bordure
Avec la propriété border-color, vous pouvez définir la couleur de la bordure.
