Comment créer un tableau HTML ? Nos explications

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 structuration claire des informations. En indiquant les cellules d’en-tête, les lignes et les cellules de données, vous déterminez ainsi précisé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 structurer un tableau, il est nécessaire d’utiliser plusieurs balises HTML. La présentation graphique des tableaux, le HTML Table Styling, est généralement définie séparément grâce aux styles CSS.

Les tableaux HTML offrent les possibilités des tableaux classiques : ils structurent les informations à présenter en lignes (horizontales) et en colonnes (verticales). C’est pourquoi les tableaux dans les documents HTML sont une alternative aux listes, surtout pour la présentation des contenus suivants :

• Calendrier
• Données de contact
• Classements
• Horaires
• Listes de prix
• Comparaisons de produits
• Statistiques

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 différentes. La balise <th> pour les en-têtes de tableau HTML est optionnelle. Voici un aperçu des différents tags :

• <table> : le tag HTML <table> est l’élément le plus important pour la création d’un tableau. Une balise <table> introductive 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’introduction et une balise de fermeture.
• <td> : le tag <td> signifie « Table Data », c’est-à-dire les données du tableau proprement dites. Pour chaque élément <td> inséré, une cellule de tableau et donc une colonne sont automatiquement générées. Les informations souhaitées sont saisies entre le <td> introductif et le </td> final.
• <th> : la balise <th> mentionnée précédemment 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 possibilités offertes par les balises de tableau, prenons un exemple simple de tableau HTML avec les descriptions et les prix de trois plats. Dans l’en-tête, nous définissons les trois titres de colonne « Plat », « Description » et « Prix ». Les trois lignes suivantes contiennent 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 ressemblerait à ceci :

Close

Tableaux HTML : problèmes récurrents et solutions

Lors de la création de tableaux HTML, il existe quelques problèmes typiques qui reviennent régulièrement, mais qui peuvent en grande partie être évités en travaillant proprement et soigneusement. Nous avons résumé pour vous les principaux :

• Lisibilité : les tableaux sont difficiles à lire à l’écran si vous ne définissez pas une structure claire. N’omettez les en-têtes que si leur absence ne nuit pas à la compréhension du tableau.
• Affichage sur les appareils mobiles : les tableaux HTML ordinaires s’affichent souvent mal sur les smartphones 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 instructions CSS correspondantes pour un design responsive.
• Tableaux comme éléments de mise en page : dans le passé, les tableaux HTML étaient souvent utilisés pour la conception graphique des sites Web. Aujourd’hui, il faut absolument renoncer à cette pratique et régler la mise en page exclusivement à l’aide de feuilles CSS.
• Unités manquantes ou incohérentes : lorsque vous intégrez un tableau avec des valeurs numé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 cohérentes afin d’éviter toute confusion.

Un autre problème lors de la création de tableaux HTML concerne la représentation des caractères spéciaux. Comme ils ont une signification particulière en HTML, les caractères <, >, &, " et ' notamment, sont souvent à l’origine d’un affichage incorrect des tableaux. La solution consiste dans ce cas à recourir aux entités HTML correspondantes. Si l’un des caractères énumérés apparaît dans votre tableau prévu, remplacez-le par la chaîne de caractères correspondante. Vous pouvez vous référer au tableau suivant :