Alain Éric Gauthier

Comment faire un tableau en HTML

Première partie : le tableau simple

Qu'est-ce qu'un tableau

Un tableau, qu'on appelle aussi une table de données, permet d'organiser de l'information sous deux axes. Il est fait de lignes et de colonnes et chaque intersection se nomme une cellule.

Tout ce qui suit vous semblera évident mais avant de créer un tableau en HTML, il est important de bien comprendre comment il est structuré.

Voici un tableau très simple donnant l'âge de 4 personnes :

Tableau de 2 colonnes et 4 lignes

Ce tableau comporte deux colonnes, une pour le nom et une autre pour l'âge. Il comporte aussi 4 lignes, une pour chaque personne et son âge. Finalement, vous aurez compris qu'il contient 8 cellules.

Créer un tableau simple

Les éléments HTML

Maintenant que nous avons une bonne idée de la structure de l'information, nous pouvons commencer à rédiger le code.

Tout d'abord, nous allons baliser le tableau. Pour ce faire, l'élément <table> est nécessaire.

Ensuite, chaque ligne est balisée par l'élément <tr>. Les lettres t et r signifient Table Row.

Finalement, chaque cellule à l'intérieur de chaque ligne sera balisée par l'élément <td> pour Table Data.

Puisque nous avons défini les lignes et les cellules, nous avons déjà les colonnes et nous n'aurons pas à les baliser dans le code.

Le code HTML, étape par étape

Tout d'abord, il faut insérer l'élément <table> :

<table>
</table>

Ensuite, nous ajoutons 4 lignes :

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

Vous l'aurez deviné, nous ajoutons les cellules :

<table>
  <tr><td></td><td></td></tr>
  <tr><td></td><td></td></tr>
  <tr><td></td><td></td></tr>
  <tr><td></td><td></td></tr>
</table>

Finalement, nous pouvons ajouter l'information :

<table>
  <tr><td>Hubert</td><td>47</td></tr>
  <tr><td>Jeanette</td><td>52</td></tr>
  <tr><td>Francis</td><td>26</td></tr>
  <tr><td>Juliette</td><td>31</td></tr>
</table>

Et voici une capture d'écran du rendu dans un navigateur :

Tableau simple sans bordure

Évidemment, ce n'est pas un tableau comme on se l'imagine. À tout le moins, il manque des bordures.

Les bordures avec CSS

Au risque de répéter quelque chose que vous savez déjà, HTML sert à structurer l'information et CSS sert à modifier la présentation de cette information. Cette idée fondamentale s'applique aussi aux tableau en HTML.

Notre tableau tout simple aura une meilleure apparence en ajoutant ces quelques lignes de CSS :

table {
  border-collapse: collapse;
  border: 1px solid #000;
}
td {
  border: 1px solid #000;
  padding: .5em;
}

Pour insérer le CSS à votre document, vous pouvez soit l'ajouter à votre feuille de style, soit l'ajouter dans un élément <style> dans l'entête de votre document.

Si vous préférez, vous pouvez visiter cette page et utiliser la commande visualiser la source pour voir le code complet.

Les entêtes d'un tableau HTML

Mais peut-être aimeriez-vous que ce tableau aient des entêtes pour les colonnes ? Pour ce faire, il serait tout à fait possible de simplement ajouter une ligne et d'y ajouter le titre de chaque colonne dans la cellule correspondante. Le problème avec cette approche c'est que bien que l'information soit ajoutée au tableau elle ne fournit pas d'information particulière sur sa fonction.

L'entête n'est pas une donnée du tableau, c'est une information sur le type de données qui se trouvent dans la colonne ou la ligne correspondante. Dans HTML, l'élément <th>, Table Header, est l'élément qui permet de baliser une cellule qui sert d'entête à un tableau.

Pour vérifier que vous avez bien compris tout ce que nous avons vu jusqu'à maintenant, ajoutez le code suivant à votre CSS :

th {
  border: 1px solid #000; 
  padding: .5em; 
  font-weight: bold;
}

Faites ensuite les modifications nécessaires au code HTML et voyez si votre rendu ressemble à celui-ci :

Tableau simple avec entête de colonne

Et pour valider votre réponse, accédez au code source de cette page.

Comment faire des tableaux complexes en HTML

Évidemment, si c'est tout ce que HTML permettait de faire pour créer des tableaux ce ne serait pas très utile. Il est possible de faire des tableaux vraiment très complexes avec HTML mais pour cela, il faut aussi avoir une bonne compréhension du CSS.

Si vous avez des questions, contactez-moi