Faire un tableau HTML

Publié le

Vous souhaitez développer votre site internet et créer votre premier tableau HTML ? Un tableau est très utile pour présenter des informations et pour structurer des données complexes. Découvrez comment faire votre propre tableau en HTML5 !

tableau-html

Comment créer un tableau HTML ?

Pour créer facilement un tableau HTML, il suffit d'insérer la balise <table> et ses sous-balises associées. Pour finir, vous aurez juste à ajouter les balises <tr>, <th> et <td> afin de définir les lignes, les colonnes et les données du tableau.

Voici un exemple de code HTML qui génère un tableau simple :

<table>
  <tr>
    <th>Colonne 1</th>
    <th>Colonne 2</th>
    <th>Colonne 3</th>
  </tr>
  <tr>
    <td>Donnée 1</td>
    <td>Donnée 2</td>
    <td>Donnée 3</td>
  </tr>
  <tr>
    <td>Donnée 4</td>
    <td>Donnée 5</td>
    <td>Donnée 6</td>
  </tr>
</table>

Réaliser le tableau

La balise <table> est un élément HTML très important qui permet de créer des tableaux. Il s'agit d'un élément qui englobe tous les autres éléments HTML nécessaires pour créer un tableau, et qui définit la structure du tableau. La balise <table> est constituée de plusieurs éléments HTML qui créent et définissent les lignes, les colonnes et les données d'un tableau.

Insérer les colonnes et rangées

La balise <tr> est l'une des balises HTML les plus importantes pour créer un tableau. Elle définit une ligne dans un tableau et est typiquement constituée de cellules qui contiennent des données. Les balises <th> et <td> sont des sous-balises de la balise <tr> et définissent les colonnes et les données du tableau. Les balises <th> sont utilisées pour définir les en-têtes de colonne, tandis que les balises <td> sont utilisées pour définir les données des cellules.

Intégrer les titres/légendes

La balise <caption> est une autre balise HTML qui peut être utilisée pour créer des tableaux. Elle est utilisée pour ajouter un titre ou une légende à un tableau. La balise <caption> est placée à l'intérieur de la balise <table> et est typiquement placée juste après la balise <tr>.

Définir les tailles

Enfin, la balise <col> peut également être utilisée pour créer des tableaux. La balise <col> définit la largeur de chaque colonne dans un tableau et est placée à l'intérieur de la balise <table>. Elle peut être utilisée pour définir des largeurs différentes pour chaque colonne du tableau. La balise <col> peut également être utilisée pour définir des styles spécifiques pour chaque.

Voici l'exemple d'un code HTML pour créer un tableau plus complexe :

<table>
  <caption>Titre du tableau</caption>
<p> Les balises col vont étendre chacune des colonnes à une largeur de 100px. </p>
  <col width="100">
  <col width="100">
  <col width="100">
  <tr>
    <th>Colonne 1</th>
    <th>Colonne 2</th>
    <th>Colonne 3</th>
  </tr>
  <tr>
    <td>Donnée 1</td>
    <td>Donnée 2</td>
    <td>Donnée 3</td>
  </tr>
  <tr>
    <td>Donnée 4</td>
    <td>Donnée 5</td>
    <td>Donnée 6</td>
  </tr>
</table>