Comment mettre en forme un tableau HTML ?

Si vous cherchez à concevoir une page web attrayante et fonctionnelle, maîtriser l’art de mettre en forme un tableau HTML est une compétence incontournable. Un tableau HTML bien structuré ne sert pas seulement à présenter les données de manière ordonnée, mais il améliore également l’expérience utilisateur et peut rendre votre site plus accessible. Dans cet article, nous aborderons les bases pour créer un tableau HTML efficace et esthétiquement plaisant.

Pourquoi utiliser des tableaux HTML ?

Avant de plonger dans les aspects techniques, il est essentiel de comprendre pourquoi et quand utiliser des tableaux HTML. Contrairement à d’autres éléments de mise en page, les tableaux sont particulièrement efficaces pour :

Afficher des données tabulaires de manière structurée.

Comparer des informations en colonnes et rangées.

Organiser des données complexes, comme des horaires de travail, des plans de repas ou des prix.

Ajouter une couche d’accessibilité pour les lecteurs d’écran, à condition d’optimiser correctement.

Structure de base d’un tableau HTML

Pour créer un tableau HTML de base, trois balises sont essentielles :

<table> : Cette balise enveloppe l’ensemble du tableau.

<tr> : Cette balise enveloppe une ligne du tableau.

<td> : Cette balise enveloppe une cellule de données dans une ligne.

Voici un exemple simple de tableau HTML :

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

Ajouter des en-têtes avec <th>

Pour rendre le tableau plus compréhensible, surtout lorsque vous présentez des données, il est bénéfique d’utiliser des en-têtes de colonne. Ces derniers se créent avec la balise <th>. Par défaut, le texte dans les en-têtes est rendu en gras et centré :

<table>  <tr>    <th>En-tête 1</th>    <th>En-tête 2</th>  </tr>  <tr>    <td>Cellule 1</td>    <td>Cellule 2</td>  </tr>  <tr>    <td>Cellule 3</td>    <td>Cellule 4</td>  </tr></table>

Fusionner des cellules avec colspan et rowspan

Pour les tableaux plus complexes, vous pouvez fusionner des cellules horizontalement avec colspan et verticalement avec rowspan. C’est particulièrement utile pour les tableaux qui nécessitent une présentation hiérarchique :

<table border="1">  <tr>    <th rowspan="2">Ligne 1</th>    <th colspan="2">Colonnes 1 et 2</th>  </tr>  <tr>    <td>Cellule 1.2.1</td>    <td>Cellule 1.2.2</td>  </tr>  <tr>    <td>Ligne 2</td>    <td>Cellule 2.1</td>    <td>Cellule 2.2</td>  </tr></table>

Styler un tableau avec CSS

Les styles CSS permettent de transformer un simple tableau HTML en un élément visuel attrayant. Voici quelques astuces de base :

Utiliser border pour ajouter des bordures.

Appliquer padding pour espacer le contenu des cellules.

Employer background-color pour mieux distinguer les en-têtes et les rangées.

Voici un exemple simple :

table {  width: 100%;  border-collapse: collapse;}table, th, td {  border: 1px solid black;}th, td {  padding: 15px;  text-align: left;}th {  background-color: #f2f2f2;}

Améliorer l’accessibilité de votre tableau

Pour rendre votre tableau accessible à tous les utilisateurs, y compris ceux utilisant des lecteurs d’écran, des attributs ARIA et des éléments HTML dédiés doivent être utilisés :

Utiliser les attributs scope pour les en-têtes de colonne (scope="col") et de ligne (scope="row").

Ajouter des descriptions de tableau avec summary et caption.

Un tableau avec de bonnes pratiques d’accessibilité :

<table summary="Un tableau des résultats de l'examen" border="1">  <caption>Résultats de l'examen</caption>  <tr>    <th scope="col">Nom</th>    <th scope="col">Matière</th>    <th scope="col">Note</th>  </tr>  <tr>    <td>Alice</td>    <td>Mathématiques</td>    <td>95</td>  </tr>  <tr>    <td>Bob</td>    <td>Science</td>    <td>88</td>  </tr></table>

Optimisation SEO pour les tableaux

Un tableau bien structuré peut aussi contribuer au référencement SEO. Google et d’autres moteurs de recherche sont capables de lire les balises HTML, et un tableau qui utilise correctement les balises et attributs apporte des bénéfices :

Adoptez des balises de titre appropriées telles que <caption> pour définir le sujet du tableau.

Utilisez des attributs aria-label et aria-describedby pour rendre le tableau compréhensible pour les moteurs de recherche.

Assurez-vous d’avoir un bon texte alternatif qui décrit succinctement le contenu du tableau.

<table aria-label="Tableau des résultats financiers du Q1 2023" border="1">  <caption>Résultats financiers du Q1 2023</caption>  <tr>    <th scope="col">Trimestre</th>    <th scope="col">Revenus</th>    <th scope="col">Dépenses</th>    <th scope="col">Profit</th>  </tr>  <tr>    <td>Q1</td>    <td>1,000,000€</td>    <td>600,000€</td>    <td>400,000€</td>  </tr></table>

Outils et plugins pour simplifier la mise en forme

Parfois, même avec une bonne connaissance HTML et CSS, il peut être utile d’utiliser des outils ou des plugins pour faciliter la création de tableaux. Voici quelques suggestions :

TablePress: Un plugin WordPress populaire qui permet de créer et de gérer les tableaux de manière efficace sans avoir à écrire un seul code.

DataTables: Une bibliothèque jQuery avancée permettant de manipuler les tableaux HTML avec des fonctionnalités comme le tri, la recherche et la pagination.

CSS Table Generator: Des générateurs de tableau CSS en ligne qui vous permettent de configurer visuellement un tableau avant de copier le code CSS et HTML.

Sources et références légales

La création de tableaux accessibles et optimisés pour le SEO n’est pas seulement une bonne pratique, c’est aussi parfois une exigence légale. Par exemple :

WCAG 2.1 : Les Web Content Accessibility Guidelines (WCAG) fournissent des recommandations détaillées pour créer du contenu web accessible.

RGPD (Règlement général sur la protection des données) : Bien qu’il ne concerne pas directement les tableaux HTML, les pratiques d’accessibilité et de structuration des données peuvent intersecter avec les exigences de transparence et d’accessibilité des informations.

La maîtrise des tableaux HTML peut grandement accentuer l’attrait visuel de votre site tout en facilitant l’interprétation des données tant pour vos utilisateurs que pour les moteurs de recherche. Que vous soyez un débutant ou un développeur chevronné, ces conseils vous fourniront les bases nécessaires et au-delà pour tirer le meilleur parti de vos tableaux HTML.