Comment créer des tableaux avec l’élément HTML table

Nous allons voir ici comment utiliser l’élément HTML table pour afficher du contenu sous la forme de tableaux.

Pré-requis

• Vous connaissez les bases de la syntaxe HTML
• Vous avez la possibilité d’éditer du texte brut, avec un logiciel de type “Bloc-Note” ou « Notepad++ »

Partie 1 HTML table – La structure de base

Une table se déclare avec plusieurs balises :

• <table> va contenir toute la structure de la table.
• <thead> va contenir l’entête de la table (les titres des colonnes).
• <tbody> va contenir le corps des données (les cellules de données).
• <tfoot> va contenir le pied de la page (les titres, s’ils sont affichés ou répétés en bas).
• <tr> va contenir une ligne (tr pour “table row”, “ligne de table” en anglais)
• <th> va contenir un titre (th pour “table header”, “titre de table”)
• <td> va contenir une donnée (td pour “table data”, “donnée de table”)
  La structure générale est la suivante :

<table>
<thead>
	<tr>
	<th>Colonne 1</th>
	<th>Colonne 2</th>
	<th>Colonne 3</th>
	</tr>
</thead>
<tbody>
	<tr>
	<td>Data 1.1</td>
	<td>Data 1.2</td>
	<td>Data 1.3</td>
	</tr>
	<tr>
	<td>Data 2.1</td>
	<td>Data 2.2</td>
	<td>Data 2.3</td>
	</tr>
	<tr>
	<td>Data 3.1</td>
	<td>Data 3.2</td>
	<td>Data 3.3</td>
	</tr>
	<tr>
	<td>Data 4.1</td>
	<td>Data 4.2</td>
	<td>Data 4.3</td>
	</tr>
</tbody>
<tfoot>
	<tr>
	<th>Colonne 1</th>
	<th>Colonne 2</th>
	<th>Colonne 3</th>
	</tr>
</tfoot>
</table>

Cela correspondra à :

La fusion de cellules

Pour qu’une cellule prenne la place de 2 cellules ou plus, il est possible de lui donner l’attribut colspan. Par exemple :

<table>
<thead>
	<tr>
	<th>Colonne 1</th>
	<th>Colonne 2</th>
	<th>Colonne 3</th>
	</tr>
</thead>
<tbody>
	<tr>
	<td>Data 1.1</td>
	<td>Data 1.2</td>
	<td>Data 1.3</td>
	</tr>
	<tr>
	<td>Data 2.1</td>
	<td>Data 2.2</td>
	<td>Data 2.3</td>
	</tr>
	<tr>
	<td>Data 3.1</td>
	<td>Data 3.2</td>
	<td>Data 3.3</td>
	</tr>
	<tr>
	<td colspan="3">Pas de données pour la ligne 4 !</td>
	</tr>
</tbody>
<tfoot>
	<tr>
	<th>Colonne 1</th>
	<th>Colonne 2</th>
	<th>Colonne 3</th>
	</tr>
</tfoot>
</table>

Cet exemple donnera :

Astuce de CSS : lignes et colonnes paires/impaires

Pour afficher les lignes selon un format “paire = gris”, “impaire = blanc”, il y a une astuce en CSS pour cela :

tbody tr:nth-child(even) {background: #CCC}
tbody tr:nth-child(odd) {background: #FFF}

Pour faire la même chose avec des colonnes d’un d’un tableau, il faut déclarer des balises <col> dans la table, autant qu’il y a de colonnes :

<table>
<col><col><col><col><col><col><col><col>
<thead>
	<tr>
	<th>Colonne 1</th>
	<th>Colonne 2</th>
	<th>Colonne 3</th>
	<th>Colonne 4</th>
	<th>Colonne 5</th>
	<th>Colonne 6</th>
	<th>Colonne 7</th>
	<th>Colonne 8</th>
	</tr>
</thead>
(...)
</table>

Puis, on appliquera un procédé similaire pour les éléments col en CSS :

col:nth-child(even) {background: #CCC}
col:nth-child(odd) {background: #FFF}

Bonus HTML table : créer rapidement un tableau

Voici un chapitre vidéo offert par Tuto.com dans lequel vous verrez en images, comment créer un tableau simple en HTML. Une occasion de mettre en pratique les nouveaux acquis 👌

Et si vous souhaitez maîtriser le langage à la perfection, on ne peut que vous conseiller cette formation en ligne.

> Apprendre HTML5 & CSS3 rapidement et facilement

(2488)