Le tableau HTML, créé à l'aide de la balise <table>, permet d'afficher des informations en lignes et en colonnes.
Notez que la grille CSS permet également de placer les informations en lignes et en colonnes. Chaque technique a son utilité.
L'avantage du tableau HTML, c'est qu'il déterminera automatiquement la largeur optimale pour chacune des colonnes du tableau en fonction des informations qui y sont affichées.
Un tableau HTML est délimité par les balises <table> et </table>.
Entre ces balises, on définira une série de lignes délimitées par <tr> et </tr> (tr signifie Table Row).
Pour chaque ligne, on définira des cellules. Les cellules d'en-tête sont délimitées par <th> et </th> (th signifie Table Header).
Les cellules de données sont délimitées par <td> et </td> (td signifie Table Data).
<table>
<tr>
<th>Titre a</th>
<th>Titre b</th>
<th>Titre c</th>
<th>Titre d</th>
</tr>
<tr>
<td>Donnée 1a</td>
<td>Donnée 1b</td>
<td>Donnée 1c</td>
<td>Donnée 1d</td>
</tr>
<tr>
<td>Donnée 2a</td>
<td>Donnée 2b</td>
<td>Donnée 2c</td>
<td>Donnée 2d</td>
</tr>
</table>
Avec les styles en place sur cette page Web, le code HTML précédent donne ceci :
| Titre a | Titre b | Titre c | Titre d |
|---|---|---|---|
| Donnée 1a | Donnée 1b | Donnée 1c | Donnée 1d |
| Donnée 2a | Donnée 2b | Donnée 2c | Donnée 2d |
Sans CSS, l'apparence d'un tableau est plutôt fade.
Voici quelques exemples de mise en forme.
table {
border-collapse: collapse;
}
th {
padding: 10px 14px;
text-align: left;
color: #6b7280;
border-bottom: 2px solid #d1d5db;
}
td {
padding: 10px 14px;
border-bottom: 1px solid #f3f4f6;
}
table {
border-collapse: collapse;
border: 2px solid #e5e7eb;
}
th {
padding: 10px 14px;
text-align: left;
font-weight: 500;
color: #fff;
background-color: #aab0b6;
border-bottom: 1px solid #e5e7eb;
border-right: 1px solid #e5e7eb;
}
td {
padding: 10px 14px;
border-bottom: 1px solid #e5e7eb;
border-right: 1px solid #e5e7eb;
}
tr:nth-child(even) td {
background-color: #eaedf1;
}
table {
border-collapse: collapse;
}
thead {
border-bottom: 3px solid #2C2C2A;
}
th {
padding: 13px 16px;
text-align: left;
letter-spacing: 0.08em;
text-transform: uppercase;
border-right: 2px solid #e5e7eb;
}
th:last-child {
border-right: none;
}
th:nth-child(1) {
background: #CECBF6; color: #26215C;
}
th:nth-child(2) {
background: #9FE1CB; color: #04342C;
}
th:nth-child(3) {
background: #FAC775; color: #412402;
}
th:nth-child(4) {
background: #F4C0D1; color: #4B1528;
}
td {
padding: 11px 16px;
border-right: 2px solid #e5e7eb;
border-bottom: 2px solid #e5e7eb;
}
td:last-child {
border-right: none;
}
tr:last-child td {
border-bottom: none;
}
td:nth-child(1) {
background: #EEEDFE; color: #3C3489;
}
td:nth-child(2) {
background: #E1F5EE; color: #085041;
}
td:nth-child(3) {
background: #FAEEDA; color: #633806;
}
td:nth-child(4) {
background: #FBEAF0; color: #72243E;
}
Afin d'aider l'usager à mieux repérer les lignes, il est possible de modifier l'apparence des cellules sur le hover.
Ici, j'ai choisi de foncer la couleur de la ligne entière.
tr:hover td {
filter: brightness(0.92);
}
▼Publicité
