CSS modernes pour styliser vos tableaux HTML

L’ajout d’un tableau à votre site web est un moyen utile de présenter clairement de grandes quantités d’informations. Les tableaux permettent également une utilisation efficace de l’espace et facilitent la lecture et la comparaison de données complexes.

Vous pouvez concevoir des tableaux plus attrayants visuellement à l’aide de CSS. Cela permet également d’améliorer l’expérience globale de l’utilisateur sur votre site web.

Conception moderne de lignes et de colonnes simples

Vous pouvez ajouter un tableau simple avec des lignes et des colonnes uniques, sans cellules fusionnées. Le style du tableau permet également de rendre votre page Web attrayante pour l’utilisateur. Outre le style de tableau, il existe d’autres effets HTML et mises en page CSS sympas que vous pouvez ajouter à votre site web.

Vous pouvez consulter le code de cet exercice dans son dépôt GitHub.

Dans un nouveau fichier HTML, ajoutez la structure de base du code HTML :

 <!DOCTYPE html>
<html>
  <head>
    <title>My Simple Table</title>
  </head>
  <body>
 
  </body>
</html>

À l’intérieur du corps, ajoutez des balises de tableau :

 <table>
        
</table>

L’élément HTML table doit contenir ligne de tableau balises pour chaque ligne du tableau. La ligne supérieure est généralement utilisée pour les titres. Utiliser en-tête de tableau Balises HTML pour représenter chaque colonne du tableau :
```
 <tr>
  <th>Header 1</th>
  <th>Header 2</th>
  <th>Header 3</th>
</tr> 
```

Ajoutez des lignes supplémentaires sous la ligne d’en-tête. Utiliser données du tableau Balises HTML pour ajouter des données dans chaque cellule du tableau :

 <tr>
  <td>Row 1, Column 1</td>
  <td>Row 1, Column 2</td>
  <td>Row 1, Column 3</td>
</tr>
<tr>
  <td>Row 2, Column 1</td>
  <td>Row 2, Column 2</td>
  <td>Row 2, Column 3</td>
</tr>
<tr>
  <td>Row 3, Column 1</td>
  <td>Row 3, Column 2</td>
  <td>Row 3, Column 3</td>
</tr>
<tr>
  <td>Row 4, Column 1</td>
  <td>Row 4, Column 2</td>
  <td>Row 4, Column 3</td>
</tr>
<tr>
  <td>Row 5, Column 1</td>
  <td>Row 5, Column 2</td>
  <td>Row 5, Column 3</td>
</tr>

Ajoutez une balise de style à l’intérieur de la balise head. Ajoutez un style général au tableau, tel que des ombres, des coins arrondis, des polices et des marges :

 <style>
  table {
    border-collapse: collapse;
    width: 100%;
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-align: left;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    margin: auto;
    margin-top: 50px;
    margin-bottom: 50px;
  } 
</style>

Donnez un style à l’en-tête du tableau pour lui donner une couleur d’arrière-plan et un texte aligné :

 table th {
  background-color: #ff9800;
  color: #fff;
  font-weight: bold;
  padding: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #ccc;
}

Styliser les lignes du tableau pour alterner entre les couleurs grise et blanche, et ajouter un effet au survol de la ligne :

 table tr:nth-child(even) td {
  background-color: #f2f2f2;
}

table tr:hover td {
  background-color: #ffedcc;
}

Styliser les données à l’intérieur des cellules du tableau :

 table td {
  background-color: #fff;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  font-weight: bold;
}

Ouvrez votre fichier HTML pour visualiser le tableau dans un navigateur web :

Conception d’un tableau cellulaire à lignes multiples

Certains tableaux comportent des colonnes dont les lignes sont fusionnées pour former une cellule à plusieurs lignes.

Supprimez toutes les lignes du tableau actuel, en ne conservant que la ligne supérieure avec les titres :

 <table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
</table>

Créez une cellule à lignes multiples à l’aide de l’attribut rowspan. Cette cellule s’étendra sur le nombre de lignes spécifié.

 <!-- Section 1 -->
<tr>
  <td rowspan="2">Multi-line cell</td>
  <td>Row 1, Column 2</td>
  <td>Row 1, Column 3</td>
</tr>
<tr>
  <td>Row 2, Column 2</td>
  <td>Row 2, Column 3</td>
</tr>

Lors de l’ajout d’une autre ligne multicellulaire avec une valeur d’interligne différente, il faut ajouter le nombre correspondant de lignes du tableau Balises HTML. Cela correspond à la hauteur ou au nombre de lignes que la cellule couvre. Par exemple, si une cellule a un empan de 3 lignes, vous devrez ajouter trois lignes aux autres colonnes pour aligner le tableau correctement.
```
 
<tr>
  <td rowspan="3">Multi-line cell</td>
  <td>Row 3, Column 2</td>
  <td>Row 3, Column 3</td>
</tr>
<tr>
  <td>Row 4, Column 2</td>
  <td>Row 4, Column 3</td>
</tr>
<tr>
  <td>Row 5, Column 2</td>
  <td>Row 5, Column 3</td>
</tr> 
```
Ouvrez votre fichier HTML pour visualiser le tableau dans un navigateur web :

Conception d’un tableau à rangées fusionnées

À l’instar des cellules à lignes multiples, les tableaux peuvent également comporter des lignes qui fusionnent sur plusieurs colonnes.

Supprimez toutes les lignes du tableau actuel, en ne conservant que la ligne supérieure avec les titres :

 <table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
</table>

Ajoutez d’autres lignes au tableau. Utilisez l’attribut colspan pour fusionner l’une des lignes sur 3 colonnes :

 <!-- Section 1 -->
<tr>
  <td style="background-color: #ffedcc" colspan="3">Q1</td>
</tr>
<tr>
  <td>Row 2, Column 1</td>
  <td>Row 2, Column 2</td>
  <td>Row 2, Column 3</td>
</tr>
<tr>
  <td>Row 3, Column 1</td>
  <td>Row 3, Column 2</td>
  <td>Row 3, Column 3</td>
</tr>
<tr>
  <td>Row 4, Column 1</td>
  <td>Row 4, Column 2</td>
  <td>Row 4, Column 3</td>
</tr>

Ajoutez une autre ligne fusionnée pour séparer les sections du tableau :

 <!-- Section 2 -->
<tr>
  <td style="background-color: #ffedcc" colspan="3">Q2</td>
</tr>
<tr>
  <td>Row 6, Column 1</td>
  <td>Row 6, Column 2</td>
  <td>Row 6, Column 3</td>
</tr>
<tr>
  <td>Row 7, Column 1</td>
  <td>Row 7, Column 2</td>
  <td>Row 7, Column 3</td>
</tr>
<tr>
  <td>Row 8, Column 1</td>
  <td>Row 8, Column 2</td>
  <td>Row 8, Column 3</td>
</tr>

Ouvrez votre fichier HTML pour visualiser le tableau dans un navigateur web :

Utilisez des tableaux attrayants pour tirer le meilleur parti de vos données

Les tableaux HTML sont un excellent moyen d’afficher des données structurées sur votre site web. Vous pouvez les styliser à l’aide de CSS pour améliorer leur apparence par défaut. Toutefois, veillez à ne pas vous laisser emporter et à ne pas utiliser les tableaux pour la mise en page – pour des raisons d’accessibilité, réservez-les strictement aux données.

La création et la mise à jour de tableaux de grande taille peuvent être laborieuses, en particulier si vous utilisez des colonnes et des lignes qui s’étendent. Vous pouvez écrire votre propre code pour générer le balisage ou tirer parti de syntaxes plus conviviales comme Markdown.

Lire Comment créer un bouton d'abonnement animé dans DaVinci Resolve