Comment créer des tableaux en HTML : un guide convivial pour les débutants

Introduction

Une table est un ensemble de données organisées par des lignes et des colonnes. Les tables sont utiles pour afficher les liens entre les types de données, tels que les produits et leur coût, l’emploi et les dates d’emploi, ou les vols et les heures de départ. Dans ce tutoriel, vous allez créer une table à l’aide de HTML, la personnaliser en ajoutant le nombre souhaité de lignes et de colonnes, et ajouter des en-têtes de lignes et de colonnes pour faciliter la lecture de votre table.

Conditions préalables

• Familiarité avec HTML. Si vous n’êtes pas familier avec HTML ou si vous avez besoin d’un rappel, vous pouvez consulter les trois premiers tutoriels de notre série de tutoriels Comment créer un site Web avec HTML.
• Un fichier index.html pour s’entraîner à créer des tableaux HTML. Si vous ne savez pas comment créer un fichier index.html, veuillez suivre les instructions de notre bref tutoriel Comment configurer votre projet HTML.

Principes de base des tableaux HTML

Un tableau HTML est créé à l’aide d’une balise <table> d’ouverture et d’une balise </table> de fermeture. À l’intérieur de ces balises, les données sont organisées en rangées et en colonnes à l’aide des balises d’ouverture et de fermeture de ligne de table <tr> et d’ouverture et de fermeture des données de table <td>.

Les balises <tr> de ligne de table sont utilisées pour créer une ligne de données. À l’intérieur des balises d’ouverture et de fermeture de la table <tr> et des balises d’ouverture et de fermeture des données de table <td> sont utilisées pour organiser les données en colonnes.

À titre d’exemple, voici une table qui comporte deux lignes et trois colonnes :

<table>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

Pour découvrir comment les tableaux HTML fonctionnent en pratique, collez l’extrait de code ci-dessus dans le fichier index.html ou tout autre fichier html que vous utilisez pour ce tutoriel.

Enregistrez et rechargez le fichier dans le navigateur pour vérifier vos résultats. (Pour obtenir des instructions sur le chargement du fichier dans votre navigateur, veuillez consulter cette étape de notre tutoriel sur les éléments HTML.)

Votre page Web doit maintenant comporter un tableau avec trois colonnes et deux rangées :

Pour ajouter une ligne supplémentaire, ajoutez l’élément <tr> en surbrillance au bas de votre tableau :

<table>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table> 

Enregistrez vos résultats et vérifiez-les dans votre navigateur. Vous devriez recevoir quelque chose comme ceci :

Pour ajouter une autre colonne, essayez d’ajouter un élément de données de table supplémentaire <td> à l’intérieur de chacun des éléments de la ligne de table <tr> :

<table>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4 </td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
</table>

Enregistrez vos résultats et vérifiez-les dans votre navigateur. Votre page Web doit afficher un tableau avec trois lignes et quatre colonnes :

Ajout d’une bordure à un tableau

En général, les tableaux doivent être stylisés avec CSS. Si vous ne connaissez pas le CSS, vous pouvez ajouter un style léger à l’aide de HTML en ajoutant les attributs à l’élément <table>. Par exemple, vous pouvez ajouter une bordure à la table avec l’attribut border :

<table border="1">
  <tr> 
    <td>Row 1</td>
    <td>Row 2</td>
    <td>Row 3</td>
  </tr>
  <tr> 
    <td>Row 1</td>
    <td>Row 2</td>
    <td>Row 3</td>
 </tr>
</table>

Ajoutez l’attribut bordure en surbrillance à votre tableau et vérifiez vos résultats dans le navigateur. (Vous pouvez effacer votre fichier index.html et le coller dans l’extrait de code HTML ci-dessus.) Enregistrez votre fichier et chargez-le dans le navigateur. Votre table doit maintenant avoir une bordure entourant chacune de vos lignes et colonnes comme ceci :

Ajout d’en-têtes aux lignes et aux colonnes

Des en-têtes peuvent être ajoutés aux lignes et aux colonnes pour faciliter la lecture des tableaux. Les en-têtes de tableau sont automatiquement stylisés avec du texte en gras et centré pour les distinguer visuellement des données de tableau. Les en-têtes rendent également les tableaux plus accessibles, car ils aident les utilisateurs de lecteurs d’écran à naviguer dans les données des tableaux.

Les titres sont ajoutés à l’aide de balises d’ouverture et de fermeture <ème>. Pour ajouter des en-têtes de colonne, vous devez insérer un nouvel élément <tr> en haut de votre table, où vous pouvez ajouter les noms de colonne à l’aide des balises <th>.

Effacez le fichier index.html et ajoutez une ligne d’en-têtes de colonne avec l’extrait de code suivant :

<table border="1">
  <tr> 
    <th></th>
    <th>Column Header 1</th>
    <th>Column Header 2</th>
    <th>Column Header 3</th>
  </tr>
</table>

Enregistrez le fichier index.html et rechargez-le dans votre navigateur. Vous devriez recevoir quelque chose comme ceci :

Votre page Web doit afficher une seule ligne d’en-têtes de colonne. Notez que l’en-tête de la première colonne est vide. Vous pouvez ajouter un en-tête de colonne ici si vous le souhaitez.

Pour ajouter des en-têtes de ligne, vous devez ajouter les balises d’ouverture et de fermeture <e> en tant que premier élément de chaque élément de ligne <tr> de table. Ajoutez les en-têtes de ligne et les données en ajoutant l’extrait de code en surbrillance ci-dessous entre la balise </tr> de fermeture et la balise <table> de fermeture de la table dans votre fichier index.html :

<table border="1">
 <tr> 
    <th></th>
    <th>Column Header 1</th>
    <th>Column Header 2</th>
    <th>Column Header 3</th>
  </tr>
  <tr>
    <th>Row Header 1</th>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr> 
    <th>Row Header 2</th>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
 </tr>
 <tr> 
    <th>Row Header 3</th>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
 </tr>
</table>

Enregistrez le fichier index.html et rechargez-le dans votre navigateur. Vous devriez recevoir quelque chose comme ceci :

Vous devriez maintenant avoir un tableau avec trois en-têtes de colonne et trois en-têtes de ligne.

Techniques de tableaux réactifs, bonnes pratiques d’accessibilité et balises utilisées dans les tableaux HTML

Rendre les tables réactives

Pour rendre les tables adaptées aux mobiles, envisagez ces techniques :

1. Débordement CSS pour les tableaux défilants

   .table-container {
      overflow-x: auto;
   }
   

   <div class="table-container">
   <table>
      <tr>
         <th>Column 1</th>
         <th>Column 2</th>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
      </tr>
   </table>
   </div>
   

2. Bootstrap pour les tables réactives

   <div class="table-responsive">
   <table class="table">
      <tr>
         <th>Header</th>
         <td>Data</td>
      </tr>
   </table>
   </div>
   

Bootstrap rend automatiquement les tables réactives avec .table-responsive.

Meilleures pratiques en matière d’accessibilité

Pour améliorer l’accessibilité :

• Utiliser l’attribut scope

  <th scope="col">Column Name</th>
  

• Ajouter des étiquettes aria pour les lecteurs d’écran

  <table aria-describedby="table-description">
  

• Utilisez <caption> pour les descriptions de tableaux

  <caption>Product Pricing Table</caption>
  

Pour plus d’améliorations de style et d’accessibilité, consultez Comment styliser un tableau avec CSS.

Balises utilisées dans les tableaux HTML

Voici quelques balises de table couramment utilisées en HTML :

Foire aux questions

1. Comment créer une table en HTML ?

Pour créer une table en HTML, utilisez l’élément <table> ainsi que les éléments <tr> (ligne de table), <th> (en-tête de table) et <td> (données de table). Voici un exemple simple :

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Pour des options de style plus avancées, consultez Comment styliser un tableau avec CSS.

2. Comment faire un tableau de menu en HTML ?

Un tableau de menu peut être structuré à l’aide de l’élément <table> pour afficher les articles et les prix de manière structurée :

<table border="1">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Burger</td>
    <td>$5</td>
  </tr>
</table>

Pour rendre le menu visuellement attrayant, vous pouvez appliquer des styles CSS. Pour en savoir plus, consultez Comment styliser du HTML avec CSS.

Comment faire un tableau sans bordure en HTML ?

Vous pouvez supprimer les bordures de tableau en définissant border="0 » dans la balise <table> ou en utilisant CSS :

table {
  border-collapse: collapse;
  border: none;
}
td, th {
  border: none;
}

Vous pouvez découvrir d’autres façons de styliser des tableaux dans Comment créer un site Web avec CSS.

4. Comment créer une ligne dans un tableau HTML ?

Pour créer une ligne, utilisez l’élément <tr> à l’intérieur de la <table> :

<table border="1">
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
</table>

5. Comment fusionner des cellules dans un tableau HTML ?

Utilisez les attributs colspan ou rowspan dans <td> ou <th> :

<table border="1">
  <tr>
    <td colspan="2">Merged Cell</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

6. Puis-je rendre un tableau HTML réactif ?

Oui! Vous pouvez utiliser CSS ou des frameworks comme Bootstrap pour rendre les tableaux réactifs. Par exemple, à l’aide de CSS :

table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

Pour une approche plus complète, consultez la section Techniques de table réactive ci-dessus.

7. Quelles sont les meilleures pratiques pour créer des tables accessibles ?

Utilisez des éléments sémantiques appropriés tels que <thead>, <tbody> et <tfoot>. Implémentez également des attributs d’accessibilité tels que :

• <th scope="col"> pour les en-têtes de colonne.
• <th scope="row"> pour les en-têtes de ligne.
• aria-describedBY pour les technologies d’assistance.

Pour plus de détails, consultez la section Meilleures pratiques en matière d’accessibilité ci-dessus.

Conclusion

Dans ce tutoriel, vous avez créé un tableau HTML, ajouté des lignes et des colonnes supplémentaires et créé des en-têtes pour les lignes et les colonnes.

Si vous souhaitez en savoir plus sur le HTML, vous pouvez consulter notre série de tutoriels Comment créer un site Web avec HTML. Pour en savoir plus sur l’utilisation de CSS pour styliser des éléments HTML (y compris des tableaux), veuillez consulter notre série de tutoriels Comment créer un site Web avec CSS.