Comment Ajouter une Bordure à un Tableau HTML
Pour ajouter une bordure à un <table> HTML, tout d’abord, on doit créer un tableau. En HTML, vous pouvez créer des tableaux en utilisant la balise <table> tag en conjonction avec les balises <tr>, <td> et <th> .
Créer une Bordure Pour un Tableau HTML
Après avoir créé un tableau HTML, vous devez lui ajouter une bordure, car les bordures ne sont pas ajoutées par défaut. Voyons un exemple de tableau sans bordure pour voir la différence:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<table>
<tr>
<th>Personne</th>
<th>Age</th>
</tr>
<tr>
<td>Marie</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>L'élément <table> a un attribut border qui n'est pas utilisé en HTML5. Nous vous recommandons donc d'utiliser la propriété CSS border pour ajouter une bordure à vos tables. Pour ajouter une bordure à votre tableau, vous devez définir le <style> de votre tableau.
N'oubliez pas d'ajouter également des bordures pour que les balises <th> et <td> aient un tableau complet. Définissez également la propriété border-collapse (si vous ne définissez pas le border-collapse, il utilisera border-collapse: separate par défaut).
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
table,
th,
td {
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>Comment changer le style de bordure d'un tableau HTML à l'aide de CSS
Vous pouvez attribuer un style à votre tableau à l'aide de la propriété CSS abrégée border ou des propriétés CSS border-width, border-style, border-color, séparément. Voir l'exemple pour avoir le résultat visible de ces propriétés:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
table {
border-style: ridge;
border-width: 150px;
border-color: #8ebf42;
background-color: #d9d9d9;
}
th {
border: 5px solid #095484;
}
td {
border: 20px groove #1c87c9;
}
</style>
</head>
<body>
<table>
<tr>
<th>Personne</th>
<th>Age</th>
</tr>
<tr>
<td>Marie</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>Si vous ne souhaitez pas que la bordure fasse tout le tour de la table (ou si vous souhaitez des bordures différentes de chaque côté de la table), vous pouvez utiliser l'une des propriétés suivantes: border-top, border-right, border-bottom, et border-left. Voyons un exemple avec la bordure inférieure:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
table {
border-collapse: collapse;
}
td,
th {
padding: 10px;
border-bottom: 2px solid #8ebf42;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Personne</th>
<th>Age</th>
</tr>
<tr>
<td>Marie</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>Comment avoir des bordures arrondies
Vous pouvez également avoir des bordures arrondies en utilisant la propriété CSS border-radius. N'oubliez pas que vous devez supprimer la propriété border-collapse pour que cela fonctionne correctement. Voyons un exemple où tous les éléments de la table sont arrondis:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
table,
td,
th {
padding: 10px;
border: 2px solid #1c87c9;
border-radius: 5px;
background-color: #e5e5e5;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Personne</th>
<th>Age</th>
</tr>
<tr>
<td>Marie</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>Comment ajouter une bordure aux éléments <p>, <h2> ou <div>
De même manière, vous pouvez ajouter une bordure à d’autres éléments HTML. Voyons un exemple de comment ajouter une bordure aux éléments <p>, <h2> et <div>.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
h2,
div,
p {
padding: 10px;
}
h2 {
border: 3px double #1c87c9;
background-color: #d9d9d9;
}
div {
border-left: 5px solid #1c87c9;
background-color: #cccccc;
}
p {
border: 10px groove #8ebf42;
}
</style>
</head>
<body>
<h2>Exemple de bordure</h2>
<div>Div exemple pour la propriété border.</div>
<p>Paragraphe avec bordures.</p>
</body>
</html>Si vous souhaitez créer une bordure arrondie sur des paragraphes, suivez cet exemple pour savoir comment procéder. Déterminez également combien il est nécessaire de définir la valeur de la propriété border-radius pour obtenir la résultat souhaitée.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
p {
padding: 10px;
}
p.normal {
border: 2px solid #1c87c9;
}
p.round1 {
border: 2px solid #1c87c9;
border-radius: 5px;
}
p.round2 {
border: 2px solid #1c87c9;
border-radius: 8px;
}
p.round3 {
border: 2px solid #1c87c9;
border-radius: 12px;
}
</style>
</head>
<body>
<h2>Rounded borders</h2>
<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>
</body>
</html>