Comment créer un tableau HTML ? Nos ex­pli­ca­tions

Vous pouvez intégrer des tableaux en HTML à n’importe quel endroit de vos sites Web à l’aide de la balise (tag) HTML <table> pour une struc­tu­ra­tion claire des in­for­ma­tions. En indiquant les cellules d’en-tête, les lignes et les cellules de données, vous dé­ter­mi­nez ainsi pré­ci­sé­ment la structure de vos tableaux.

Qu’est-ce qu’un tableau HTML et à quoi sert-il ?

Un tableau HTML est un élément HTML structuré utilisé pour présenter des données et des textes dans un format de tableau. Pour définir et struc­tu­rer un tableau, il est né­ces­saire d’utiliser plusieurs balises HTML. La pré­sen­ta­tion graphique des tableaux, le HTML Table Styling, est gé­né­ra­le­ment définie sé­pa­ré­ment grâce aux styles CSS.

Les tableaux HTML offrent les pos­si­bi­li­tés des tableaux clas­siques : ils struc­tu­rent les in­for­ma­tions à présenter en lignes (ho­ri­zon­tales) et en colonnes (ver­ti­cales). C’est pourquoi les tableaux dans les documents HTML sont une al­ter­na­tive aux listes, surtout pour la pré­sen­ta­tion des contenus suivants :

• Ca­len­drier
• Données de contact
• Clas­se­ments
• Horaires
• Listes de prix
• Com­pa­rai­sons de produits
• Sta­tis­tiques

De quelles balises a-t-on besoin pour créer un tableau HTML ?

Pour créer un tableau HTML, vous avez toujours besoin d’au moins trois balises dif­fé­rentes. La balise <th> pour les en-têtes de tableau HTML est op­tion­nelle. Voici un aperçu des dif­fé­rents tags :

• <table> : le tag HTML <table> est l’élément le plus important pour la création d’un tableau. Une balise <table> in­tro­duc­tive marque le début du tableau HTML, une balise de fermeture </table> en marque la fin.
• <tr> : pour créer une nouvelle ligne, on utilise la balise <tr>, qui signifie « Table Row», c’est-à-dire « ligne du tableau ». Pour chaque ligne, il faut une balise d’in­tro­duc­tion et une balise de fermeture.
• <td> : le tag <td> signifie « Table Data », c’est-à-dire les données du tableau pro­pre­ment dites. Pour chaque élément <td> inséré, une cellule de tableau et donc une colonne sont au­to­ma­ti­que­ment générées. Les in­for­ma­tions sou­hai­tées sont saisies entre le <td> in­tro­duc­tif et le </td> final.
• <th> : la balise <th> men­tion­née pré­cé­dem­ment est en principe une forme spéciale de la balise de cellule de tableau <td>. Elle est utilisée pour mettre en évidence les cellules d’en-tête (« Table Heading »), mais peut aussi être utilisée pour mettre en évidence l’entrée initiale d’une ligne.

Exemple d’un tableau HTML simple

Pour illustrer les pos­si­bi­li­tés offertes par les balises de tableau, prenons un exemple simple de tableau HTML avec les des­crip­tions et les prix de trois plats. Dans l’en-tête, nous dé­fi­nis­sons les trois titres de colonne « Plat », « Des­crip­tion » et « Prix ». Les trois lignes suivantes con­tien­nent les détails des plats. Au total, le tableau HTML comporte donc quatre lignes et trois colonnes :

<table>
<tr>
<th>Plat</th>
<th>Description</th>
<th>Prix</th>
</tr>
<tr>
<td>Spaghetti Bolognaise</td>
<td>Pâtes fraîches avec une sauce tomate à la viande hachée</td>
<td>9,50 €</td>
</tr>
<tr>
<td>Pizza Margherita</td>
<td>Pizza à la sauce tomate, avec de la mozzarella et du basilic frais</td>
<td>9,00 €</td>
</tr>
<tr>
<td>Salade César</td>
<td>Salade, blanc de poulet, croûtons, sauce César</td>
<td>8,50 €</td>
</tr>
</table>

Sur un site Web, le tableau res­sem­ble­rait à ceci :

Close

Tableaux HTML : problèmes ré­cur­rents et solutions

Lors de la création de tableaux HTML, il existe quelques problèmes typiques qui re­vien­nent ré­gu­liè­re­ment, mais qui peuvent en grande partie être évités en tra­vail­lant pro­pre­ment et soig­neu­se­ment. Nous avons résumé pour vous les prin­ci­paux :

• Li­si­bi­lité : les tableaux sont dif­fi­ciles à lire à l’écran si vous ne dé­fi­nis­sez pas une structure claire. N’omettez les en-têtes que si leur absence ne nuit pas à la com­pré­hen­sion du tableau.
• Affichage sur les appareils mobiles : les tableaux HTML or­di­naires s’affichent souvent mal sur les smart­phones et les tablettes. Pour que les tableaux intégrés puissent également être consultés sur les appareils mobiles, il convient donc de définir les ins­truc­tions CSS cor­res­pon­dantes pour un design res­pon­sive.
• Tableaux comme éléments de mise en page : dans le passé, les tableaux HTML étaient souvent utilisés pour la con­cep­tion graphique des sites Web. Aujourd’hui, il faut ab­so­lu­ment renoncer à cette pratique et régler la mise en page ex­clu­si­ve­ment à l’aide de feuilles CSS.
• Unités man­quantes ou in­co­hé­rentes : lorsque vous intégrez un tableau avec des valeurs nu­mé­riques, il peut arriver que certaines unités soient erronées ou qu’aucune unité ne soit utilisée pour certaines entrées. Veillez à ce qu’elles soient co­hé­rentes afin d’éviter toute confusion.

Un autre problème lors de la création de tableaux HTML concerne la re­pré­sen­ta­tion des ca­rac­tères spéciaux. Comme ils ont une sig­ni­fi­ca­tion par­ti­cu­lière en HTML, les ca­rac­tères <, >, &, " et ' notamment, sont souvent à l’origine d’un affichage incorrect des tableaux. La solution consiste dans ce cas à recourir aux entités HTML cor­res­pon­dantes. Si l’un des ca­rac­tères énumérés apparaît dans votre tableau prévu, remplacez-le par la chaîne de ca­rac­tères cor­res­pon­dante. Vous pouvez vous référer au tableau suivant :