HTML - Tableaux

Structure de base d'un tableau

La structure d'un tableau HTML comporte plusieurs éléments qui fonctionnent ensemble pour créer une représentation structurée des données. Au cœur de chaque tableau se trouve l'élément <table>, qui définit le tableau lui-même. À l'intérieur de l'élément <table>, vous trouverez un ou plusieurs éléments <tr>, chacun représentant une ligne du tableau.

Dans chaque élément <tr>, vous pouvez ajouter deux types de cellules : les cellules d'en-tête de tableau et les cellules de données. Les cellules d'en-tête de tableau sont définies à l'aide de l'élément <th> et sont utilisées pour représenter les en-têtes de colonnes ou de lignes du tableau. Ces cellules sont automatiquement stylisées avec du texte en gras et un alignement centré par défaut, les distinguant visuellement des cellules de données.

Les cellules de données sont définies à l'aide de l'élément <td> et sont utilisées pour contenir les données réelles du tableau. Chaque élément <td> représente une cellule unique dans une ligne, et vous pouvez avoir plusieurs éléments <td> au sein d'un seul élément <tr> pour créer plusieurs colonnes.

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

Dans cet exemple, l'élément <table> englobe toute la structure du tableau. À l'intérieur, il y a trois éléments <tr>, chacun représentant une ligne du tableau. Le premier élément <tr> contient deux éléments <th>, définissant les en-têtes du tableau. Les éléments <tr> suivants contiennent des éléments <td>, contenant les données réelles pour chaque cellule du tableau.

En utilisant cette structure de base, vous pouvez créer des tableaux de différentes tailles et configurations pour présenter vos données de manière claire et organisée.

Bordures de tableau

Dans les tableaux HTML, vous pouvez ajouter des bordures au tableau et à ses cellules en utilisant l'attribut border. L'attribut border définit la largeur de la bordure autour du tableau et de ses cellules. Par exemple, définir border="1" sur l'élément <table> ajoutera une bordure d'un pixel autour du tableau et de chaque cellule.

<table border="1">
  <tr>
    <th>En-tête 1</th>
    <th>En-tête 2</th>
  </tr>
  <tr>
    <td>Donnée 1</td>
    <td>Donnée 2</td>
  </tr>
  <tr>
    <td>Donnée 3</td>
    <td>Donnée 4</td>
  </tr>
</table>

Bien que l'attribut border ajoute des bordures à un tableau, il offre un contrôle limité sur le style de la bordure. Pour plus de flexibilité, vous pouvez utiliser CSS pour styliser les bordures du tableau.

Avec CSS, vous pouvez utiliser la propriété border pour définir la largeur, le style et la couleur de la bordure pour le tableau et ses cellules. Voici un exemple :

<table style="border: 2px solid #000;">
  <tr>
    <th style="border: 1px solid #000;">En-tête 1</th>
    <th style="border: 1px solid #000;">En-tête 2</th>
  </tr>
  <tr>
    <td style="border: 1px solid #000;">Donnée 1</td>
    <td style="border: 1px solid #000;">Donnée 2</td>
  </tr>
  <tr>
    <td style="border: 1px solid #000;">Donnée 3</td>
    <td style="border: 1px solid #000;">Donnée 4</td>
  </tr>
</table>

La propriété border dans l'attribut style définit la bordure de l'élément <table> comme une bordure noire solide de 2 pixels. Chaque élément <th> et <td> a une bordure noire solide d'un pixel appliquée en utilisant la propriété border.

L'utilisation de CSS vous donne plus de contrôle sur l'apparence des bordures du tableau, vous permettant de définir différents styles, couleurs et largeurs de bordure pour différentes parties du tableau. Vous pouvez également cibler des cellules ou des lignes spécifiques en utilisant des classes ou des ID CSS pour un contrôle de style plus précis.

En-têtes de tableau

Les en-têtes de tableau fournissent un contexte et décrivent les données de chaque colonne ou ligne. Pour définir une cellule d'en-tête dans un tableau, vous utilisez l'élément <th> au lieu de l'élément <td>.

Le texte à l'intérieur des éléments <th> s'affiche en gras et centré, ce qui le distingue visuellement des cellules de données ordinaires du tableau. Ce style aide les utilisateurs à identifier rapidement les en-têtes et à comprendre la structure du tableau.

<table>
  <tr>
    <th>Nom</th>
    <th>Âge</th>
    <th>Ville</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>Londres</td>
  </tr>
</table>

La première ligne du tableau contient trois éléments <th> représentant les en-têtes pour les colonnes "Nom", "Âge" et "Ville". Les lignes suivantes utilisent des éléments <td> pour afficher les données réelles.

Pour établir une association claire entre les cellules d'en-tête et les cellules de données correspondantes, vous pouvez utiliser l'attribut scope. L'attribut scope précise si une cellule d'en-tête est associée à une ligne ou à une colonne.

<table>
  <tr>
    <th scope="col">Nom</th>
    <th scope="col">Âge</th>
    <th scope="col">Ville</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>Londres</td>
  </tr>
</table>

L'attribut scope est défini sur col pour chaque élément <th>, indiquant que chaque cellule d'en-tête est associée à une colonne. Cela aide les lecteurs d'écran et autres technologies d'assistance à comprendre la relation entre les en-têtes et les cellules de données.

Vous pouvez également utiliser l'attribut scope avec la valeur row pour les cellules d'en-tête associées à une ligne spécifique, comme dans le cas d'un tableau avec des en-têtes de ligne.

En utilisant les éléments <th> et l'attribut scope de manière appropriée, vous pouvez créer des tableaux bien structurés et accessibles qui sont faciles à comprendre pour les utilisateurs visuels et ceux utilisant des technologies d'assistance.

Légende du tableau

L'élément <caption> en HTML définit une légende ou un titre pour un tableau. Il fournit une brève description ou un résumé du contenu du tableau, aidant les utilisateurs à comprendre le but ou le contexte des données présentées dans le tableau.

Par défaut, la légende apparaît au-dessus du tableau, centrée horizontalement. Le texte à l'intérieur de l'élément <caption> est affiché en texte brut sans style supplémentaire.

<table>
  <caption>Informations sur les employés</caption>
  <tr>
    <th>Nom</th>
    <th>Département</th>
    <th>Salaire</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>Marketing</td>
    <td>50 000 €</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>Ventes</td>
    <td>60 000 €</td>
  </tr>
</table>

L'élément <caption> est placé immédiatement après la balise d'ouverture <table> et contient le texte "Informations sur les employés". Cette légende fournit un titre clair pour le tableau, indiquant qu'il contient des informations sur les employés.

Bien que le style par défaut de l'élément <caption> soit suffisant dans la plupart des cas, vous pouvez utiliser CSS pour styliser davantage et positionner la légende selon vos besoins.

table caption {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
}

Dans ce code CSS, la propriété font-size définit la taille du texte de la légende à 1,2 fois la taille par défaut. La propriété font-weight rend le texte en gras pour le faire ressortir. La propriété margin-bottom ajoute un espace entre la légende et le tableau. Enfin, la propriété text-align aligne la légende à gauche au lieu de l'alignement central par défaut.

Vous pouvez également utiliser CSS pour positionner la légende en dessous du tableau ou appliquer d'autres styles comme des couleurs, des couleurs de fond et du rembourrage pour correspondre à vos préférences de design.

L'utilisation de l'élément <caption> et son stylage avec CSS vous permettent de fournir un titre clair et descriptif pour vos tableaux, les rendant plus accessibles et conviviaux.

Rembourrage et espacement des cellules de tableau

Dans les tableaux HTML, vous pouvez contrôler l'espacement à l'intérieur et entre les cellules du tableau en utilisant les attributs cellpadding et cellspacing. Ces attributs vous permettent d'ajuster l'espacement visuel de votre tableau pour le rendre plus lisible.

L'attribut cellpadding définit l'espace entre le contenu de la cellule et les bordures de la cellule. Il détermine le rembourrage interne de chaque cellule. Par défaut, le contenu de la cellule est affiché près des bordures de la cellule, mais vous pouvez augmenter le rembourrage pour ajouter de l'espace.

<table cellpadding="10">
  <tr>
    <th>En-tête 1</th>
    <th>En-tête 2</th>
  </tr>
  <tr>
    <td>Donnée 1</td>
    <td>Donnée 2</td>
  </tr>
  <tr>
    <td>Donnée 3</td>
    <td>Donnée 4</td>
  </tr>
</table>

L'attribut cellpadding est défini à 10, ce qui ajoute 10 pixels de rembourrage à l'intérieur de chaque cellule. Cela crée un espace visible entre le contenu de la cellule et les bordures de la cellule, rendant le contenu plus lisible.

L'attribut cellspacing définit l'espace entre les cellules du tableau. Il détermine l'espacement ou l'écart entre les cellules adjacentes dans le tableau. Par défaut, il n'y a pas d'espacement entre les cellules, mais vous pouvez utiliser cellspacing pour ajouter une séparation.

<table cellspacing="5">
  <tr>
    <th>En-tête 1</th>
    <th>En-tête 2</th>
  </tr>
  <tr>
    <td>Donnée 1</td>
    <td>Donnée 2</td>
  </tr>
  <tr>
    <td>Donnée 3</td>
    <td>Donnée 4</td>
  </tr>
</table>

L'attribut cellspacing est défini à 5, ce qui ajoute un espace de 5 pixels entre les cellules. Cela crée une séparation visuelle entre les cellules, facilitant la distinction entre une cellule et une autre.

Bien que les attributs cellpadding et cellspacing offrent un moyen rapide de contrôler le rembourrage et l'espacement des cellules, ils ont certaines limites. Pour plus de contrôle et de flexibilité, vous pouvez utiliser les propriétés CSS comme padding et border-spacing.

Avec CSS, vous pouvez cibler des cellules, des lignes ou l'ensemble du tableau spécifiques pour appliquer des styles de rembourrage et d'espacement.

<style>
  table {
    border-collapse: separate;
    border-spacing: 5px;
  }
  td, th {
    padding: 10px;
  }
</style>

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

La propriété border-collapse est définie sur separate pour permettre l'utilisation de border-spacing. La propriété border-spacing est ensuite utilisée pour définir un espacement de 5 pixels entre les cellules. La propriété padding est appliquée aux éléments <td> et <th> pour ajouter 10 pixels de rembourrage à l'intérieur de chaque cellule.

L'utilisation de CSS vous donne plus de contrôle sur l'apparence de votre tableau, vous permettant de définir différentes valeurs de rembourrage et d'espacement pour différentes parties du tableau, et même d'appliquer différents styles en fonction de classes ou d'identifiants spécifiques.

En utilisant les attributs cellpadding et cellspacing ou les propriétés CSS comme padding et border-spacing, vous pouvez ajuster l'espacement à l'intérieur et entre les cellules du tableau pour créer des tableaux visuellement attrayants et lisibles.

Colspan et Rowspan

Dans les tableaux HTML, vous pouvez utiliser les attributs colspan et rowspan pour créer des mises en page de tableaux complexes en fusionnant des cellules à travers les colonnes ou les lignes. Ces attributs vous permettent de créer des cellules qui s'étendent sur plusieurs colonnes ou lignes.

L'attribut colspan est utilisé pour faire s'étendre une cellule sur plusieurs colonnes. Il est appliqué à un élément <th> ou <td> et spécifie le nombre de colonnes sur lesquelles la cellule doit s'étendre. Définir colspan="2" sur une cellule la fera s'étendre sur deux colonnes, fusionnant ainsi les deux cellules en une seule.

<table>
  <tr>
    <th colspan="2">En-tête fusionné</th>
  </tr>
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
  <tr>
    <td colspan="2">Cellule fusionnée</td>
  </tr>
</table>

L'attribut rowspan est utilisé pour faire s'étendre une cellule sur plusieurs lignes. Il est appliqué à un élément <th> ou <td> et spécifie le nombre de lignes sur lesquelles la cellule doit s'étendre. Définir rowspan="3" sur une cellule la fera s'étendre sur trois lignes, fusionnant les cellules verticalement.

<table>
  <tr>
    <th rowspan="2">En-tête fusionné</th>
    <td>Cellule 1</td>
  </tr>
  <tr>
    <td>Cellule 2</td>
  </tr>
  <tr>
    <td>Cellule 3</td>
    <td>Cellule 4</td>
  </tr>
</table>

En utilisant colspan et rowspan ensemble, vous pouvez créer des mises en page de tableaux complexes avec des cellules fusionnées s'étendant à la fois sur les colonnes et les lignes.

<table>
  <tr>
    <th colspan="2" rowspan="2">En-tête fusionné</th>
    <th>En-tête 1</th>
  </tr>
  <tr>
    <th>En-tête 2</th>
  </tr>
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
    <td>Cellule 3</td>
  </tr>
</table>

L'utilisation des attributs colspan et rowspan vous permet de créer des tableaux avec des cellules fusionnées, vous permettant de présenter des données de manière organisée et attrayante. Ces attributs sont utiles lorsque vous avez des données qui doivent être regroupées ou lorsque vous voulez mettre en évidence des cellules ou des en-têtes dans votre tableau.

Stylisation des tableaux avec CSS

Le CSS offre des options de style pour modifier l'apparence des tableaux HTML. Avec le CSS, vous pouvez changer divers aspects de vos tableaux, tels que les couleurs de fond, les couleurs de texte, les polices, les bordures, et plus encore, pour les adapter au design de votre site web et améliorer la lisibilité.

Une technique de stylisation consiste à appliquer des couleurs de fond au tableau, aux lignes ou aux cellules. Vous pouvez utiliser la propriété background-color pour définir une couleur unie ou un dégradé comme arrière-plan.

<style>
  table {
    background-color: #f2f2f2;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #e6e6e6;
  }
</style>

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

Dans cet exemple, la propriété background-color est appliquée à l'élément <table> pour définir un fond gris clair pour le tableau. Les éléments <th> ont un fond vert et un texte blanc pour faire ressortir les en-têtes. Le sélecteur tr:nth-child(even) cible chaque ligne paire et applique une couleur de fond différente pour créer un effet zébré, améliorant ainsi la lisibilité.

Vous pouvez également modifier les styles de texte dans les cellules du tableau. Utilisez des propriétés comme color, font-family, font-size et text-align pour changer la couleur du texte, la police, la taille et l'alignement.

<style>
  table {
    font-family: Arial, sans-serif;
    font-size: 14px;
  }
  td {
    color: #333;
    text-align: center;
  }
  th {
    font-weight: bold;
    text-transform: uppercase;
  }
</style>

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

Dans cet exemple, les propriétés font-family et font-size sont appliquées à l'élément <table> pour définir une police et une taille pour le tableau. Les éléments <td> ont une couleur de texte gris foncé et sont alignés au centre grâce à la propriété text-align. Les éléments <th> sont stylisés avec une police en gras et un texte en majuscules en utilisant les propriétés font-weight et text-transform.

Pour appliquer des styles à des parties spécifiques du tableau, vous pouvez utiliser des classes ou des ID CSS. En attribuant une classe ou un ID à un tableau, une ligne ou une cellule, vous pouvez les cibler avec des sélecteurs CSS et appliquer des styles.

<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
  }
  .text-right {
    text-align: right;
  }
</style>

<table>
  <tr>
    <th>En-tête 1</th>
    <th>En-tête 2</th>
  </tr>
  <tr>
    <td class="highlight">Donnée 1</td>
    <td>Donnée 2</td>
  </tr>
  <tr>
    <td>Donnée 3</td>
    <td class="text-right">Donnée 4</td>
  </tr>
</table>

Dans cet exemple, la classe .highlight est appliquée à une cellule, lui donnant une couleur de fond jaune et une police en gras. La classe .text-right est utilisée pour aligner le texte à droite dans une cellule.

En utilisant la puissance du CSS, vous pouvez créer des tableaux esthétiques et bien structurés qui améliorent la présentation de vos données. Essayez différents styles, couleurs et mises en page pour trouver le meilleur design qui correspond à vos besoins et s'harmonise avec l'apparence de votre site web.

Considérations d'accessibilité

Lors de la création de tableaux en HTML, il est important de tenir compte de l'accessibilité. Cela rend vos tableaux compréhensibles et navigables par tous les utilisateurs, y compris ceux qui utilisent des technologies d'assistance comme les lecteurs d'écran.

Une pratique clé d'accessibilité est d'utiliser l'élément <th> pour les cellules d'en-tête au lieu de l'élément <td>. L'élément <th> fournit une signification sémantique, indiquant que la cellule contient des informations d'en-tête. Les lecteurs d'écran et autres technologies d'assistance peuvent utiliser cette information pour aider les utilisateurs à comprendre la structure et le contexte du tableau.

<table>
  <tr>
    <th>Nom</th>
    <th>Âge</th>
    <th>Ville</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>Londres</td>
  </tr>
</table>

Pour améliorer davantage l'accessibilité, vous devriez associer les cellules d'en-tête à leurs cellules de données correspondantes. Cela peut être fait en utilisant les attributs scope ou headers.

L'attribut scope spécifie si une cellule d'en-tête est associée à une ligne ou une colonne. Il peut être défini sur "row" pour les en-têtes de ligne ou "col" pour les en-têtes de colonne.

<table>
  <tr>
    <th scope="col">Nom</th>
    <th scope="col">Âge</th>
    <th scope="col">Ville</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>Londres</td>
  </tr>
</table>

Alternativement, vous pouvez utiliser l'attribut headers sur les cellules de données pour les associer explicitement à une ou plusieurs cellules d'en-tête. La valeur de l'attribut headers doit être l'id de la cellule d'en-tête correspondante.

<table>
  <tr>
    <th id="nom">Nom</th>
    <th id="age">Âge</th>
    <th id="ville">Ville</th>
  </tr>
  <tr>
    <td headers="nom">John</td>
    <td headers="age">25</td>
    <td headers="ville">New York</td>
  </tr>
  <tr>
    <td headers="nom">Alice</td>
    <td headers="age">30</td>
    <td headers="ville">Londres</td>
  </tr>
</table>

Une autre considération d'accessibilité est de fournir une légende descriptive pour le tableau en utilisant l'élément <caption>. La légende doit résumer l'objectif ou le contenu du tableau, aidant les utilisateurs à comprendre son contexte.

<table>
  <caption>Informations sur les employés</caption>
  <tr>
    <th>Nom</th>
    <th>Département</th>
    <th>Salaire</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>Marketing</td>
    <td>50 000 €</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>Ventes</td>
    <td>60 000 €</td>
  </tr>
</table>

Enfin, il est important d'éviter d'utiliser des tableaux à des fins de mise en page. Les tableaux doivent être utilisés pour des données tabulaires, pas pour organiser le contenu sur une page. Pour la mise en page, utilisez plutôt des techniques CSS comme flexbox ou grid. Cela aide à maintenir une séparation claire entre le contenu et la présentation, rendant vos pages web plus accessibles et faciles à maintenir.