Comment changer la couleur des bordures d'un tableau HTML ?

Réponses rédigées par Antoine
Dernière mise à jour : 2021-01-03 16:01:04
Thèmes : html - css - couleur - tableau
Question

Comment puis-je changer la couleur des bordures d'un tableau en HTML ?

Réponse

Pour changer la couleur des bordures d'un tableau HTML, vous pouvez utiliser la propriété CSS border-color. Les couleurs peuvent être exprimées avec :

  • Des mots clés (white, black, red ...).
  • Des valeurs exprimées en hexadécimal RGB.
  • Des valeurs exprimées en RGBA.
  • Des couleurs HSL ou Système.

Les couleurs des bordures d'un tableau peuvent être appliquées au tableau <table>, aux entêtes <th>, ou aux cellules <td>, et également aux balises <thead>, <tbody> et <tfoot> si elles sont présentes.

Remarque : Vous noterez dans l'exemple ci-après la propriété CSS border, qui permet de définir en même temps l'épaisseur, le type et la couleur des bordures.

<!DOCTYPE HTML>  
<html>
<head>
<title>Comment changer la couleur des bordures d'un tableau HTML ?</title>  
</head> 
<body>
<style>
table {
border-style: solid;
border-width: 3px;
border-color: green;
}
th {
border-style: solid;
border-width: 3px;
border-color: #DDD;
}
td {
border: 3px dotted red;
}
</style>
<table>
<th colspan="2">Entête du tableau</th>
        <tr>
            <td>Colonne 1</td>
            <td>Colonne 2</td>
        </tr>
</table>
</body> 
</html>

Vous trouverez d'avantage d'informations sur la propriété CSS border-color via cette page du site de Mozilla.