Premiers pas avec les tableaux HTML —

Les tableaux HTML sont destinés à afficher des données tabulaires sur une page Web. Ils sont parfaits pour afficher des informations de manière organisée et peuvent être stylisés avec CSS pour correspondre à l’apparence de notre site Web. Dans ce didacticiel, nous aborderons les bases de la création de tableaux HTML et de l’ajout de styles pour les rendre réactifs et adaptés aux mobiles.

Création d’un tableau HTML

Pour créer un tableau HTML, nous devons utiliser le <table> étiqueter. À l’intérieur de <table> balise, nous devons en créer une ou plusieurs <tr> balises, qui définissent chaque ligne du tableau. A l’intérieur de chaque <tr> tag, nous pouvons en créer un ou plusieurs <td> balises, qui définissent les cellules du tableau. Voici un exemple de tableau HTML de base :

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

Cela créera un tableau avec deux lignes et trois colonnes, chaque cellule affichant son contenu.

Voir le stylo
Un tableau HTML de base par SitePoint (@SitePoint)
sur CodePen.

Ajout de lignes et de colonnes

Pour ajouter de nouvelles lignes au tableau, il suffit de créer un nouveau <tr> étiqueter. Pour ajouter de nouvelles cellules au tableau, nous pouvons créer un nouveau <td> tag à l’intérieur d’un existant <tr> étiqueter. Voici un exemple de tableau avec quatre lignes et trois colonnes :

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
  <tr>
    <td>Cell 7</td>
    <td>Cell 8</td>
    <td>Cell 9</td>
  </tr>
  <tr>
    <td>Cell 10</td>
    <td>Cell 11</td>
    <td>Cell 12</td>
  </tr>
</table>

Cela créera un tableau avec quatre lignes et trois colonnes.

Styliser les tableaux HTML

Les tableaux HTML peuvent être stylisés à l’aide de CSS pour modifier leur apparence. Certaines des propriétés CSS les plus couramment utilisées pour styliser les tableaux incluent border, paddinget background-color. Voici un exemple de style d’un tableau avec une bordure et une couleur d’arrière-plan :

table {
  border: 1px solid black;
  background-color: #f2f2f2;
}
td {
  padding: 8px;
}

Cela créera un tableau avec une bordure noire et une couleur de fond gris clair, chaque cellule ayant un remplissage de huit pixels.

Voir le stylo
Un tableau HTML de base par SitePoint (@SitePoint)
sur CodePen.

Rendre les tableaux réactifs et adaptés aux mobiles

L’un des défis de l’utilisation des tableaux HTML est de les rendre réactifs et adaptés aux mobiles. Une façon d’y parvenir consiste à utiliser CSS pour ajuster la disposition du tableau en fonction de la taille de l’écran. Une approche consiste à utiliser le display propriété pour modifier la disposition du tableau d’une disposition fixe à une disposition réactive. Cela peut être fait à l’aide de requêtes multimédias pour cibler des tailles d’écran spécifiques. Voici un exemple de la façon de rendre un tableau responsive :

table {
  border: 1px solid black;
  background-color: #f2f2f2;
}

td {
  padding: 8px;
}

@media only screen and (max-width: 600px) {
  table {
    display: block;
  }
  td {
    display: block;
  }
}

Cela fera passer la disposition du tableau d’une disposition fixe à une disposition réactive lorsque la largeur de l’écran est inférieure à 600 pixels.

Voir le stylo
Un tableau HTML réactif avec un style de base par SitePoint (@SitePoint)
sur CodePen.

Ajouter des légendes et des résumés

Un autre aspect important de l’utilisation des tableaux HTML est de les rendre accessibles aux utilisateurs non visuels. Une façon de procéder consiste à ajouter des légendes et des résumés au tableau. Le <caption> La balise peut être utilisée pour ajouter une légende au tableau, qui décrit le contenu du tableau. Voici un exemple d’ajout d’une légende à un tableau :

<table>
  <caption>Sales by Month</caption>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$1000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$1500</td>
  </tr>
</table>

Cela ajoutera une légende au tableau, indiquant qu’il affiche les ventes par mois. Le <summary> peut être utilisé pour fournir un résumé du tableau pour les lecteurs d’écran et autres technologies d’assistance. Voici un exemple d’ajout d’un résumé à un tableau :

<table summary="Sales by Month">
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$1000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$1500</td>
  </tr>
</table>

Cela fournira un résumé du tableau pour les lecteurs d’écran et autres technologies d’assistance, indiquant qu’il affiche les ventes par mois.

L’utilisation des tableaux est-elle mauvaise ?

Non! Les tableaux sont une partie importante du HTML. Ils sont essentiels pour afficher des données tabulaires de manière sémantique et accessible. Aux débuts du Web, avant l’avènement du CSS, les tableaux offraient un moyen de mettre en page les conceptions de pages Web, mais ce n’était pas leur objectif. Heureusement, cette époque est loin derrière nous (enfin, la plupart du temps, mais pour certains clients de messagerie !), et nous pouvons maintenant nous concentrer sur le rôle réel – et extrêmement important – des tableaux HTML pour l’affichage des données.

Conclusion

Les tableaux HTML sont un outil puissant pour afficher des données tabulaires sur une page Web. Avec CSS, les tableaux peuvent être stylisés pour correspondre à l’apparence de notre site Web, et rendus réactifs et adaptés aux mobiles pour les utilisateurs sur différents appareils. L’ajout de légendes et de résumés aux tableaux peut aider à améliorer l’accessibilité pour les utilisateurs handicapés. Avec ces techniques, nous pouvons créer des tables efficaces qui sont à la fois visuellement attrayantes et fonctionnelles.