Les Tableaux HTML

Les tableaux HTML

Introduction

Un tableau HTML est une structure permettant d'afficher des données sous forme tabulaire, c'est-à-dire organisées en lignes et en colonnes.

Structure de base

Pour créer un tableau, on utilise trois balises essentielles :

• <table> : conteneur du tableau
• <tr> : une ligne du tableau (table row)
• <td> : une cellule de tableau (table data)

Les attributs utiles

• bgcolor : définit la couleur de fond (obsolète, remplacer par CSS)
  • <table>
    • <tr bgcolor=rgb(179,179,179)>
      • <td>cellule 1</td>
      • <td>cellule 2</td>
    • </tr>
    • <tr>
      • <td>cellule 3</td>
      • <td>cellule 4</td>
    • </tr>
  • </table>

  cellule 1	cellule 2
  cellule 3	cellule 4

• colspan : fusionne des cellules horizontalement

  L'attribut colspan est associé à la balise <td>

  • <table>
    • <tr>
      • <td colspan="2">cellule 1</td>
    • </tr>
    • <tr>
      • <td>cellule 2</td>
      • <td>cellule 3</td>
    • </tr>
  • </table>

  cellule 1
  cellule 2	cellule 3

• rowspan : fusionne des cellules verticalement

  L'attribut rowspan est associé à la balise <td>

  • <table>
    • <tr>
      • <td rowspan="2">cellule 1</td>
      • <td>cellule 2</td>
    • </tr>
    • <tr>
      • <td>cellule 3</td>
    • </tr>
  • </table>

  cellule 1	cellule 2
  	cellule 3

Les attributs colspan et rowspan doivent être utilisés avec vigilance. Par exemple, si l'on applique rowspan="2" à une cellule, la ligne suivante doit être amputée d'une cellule, car celle-ci est déjà occupée par la cellule fusionnée.

Découper un tableau en sections

Un tableau peut être divisé en trois parties :

• <thead> : l'en-tête du tableau
• <tbody> : le corps principal
• <tfoot> : le pied de tableau

La structure interne de ces sections fonctionne de la même manière qu'un tableau classique. Il est également possible de les écrire dans n'importe quel ordre : le navigateur réorganise automatiquement l'affichage.

accessibilité

Les tableaux HTML ne servent pas uniquement à afficher des données visuellement. Ils doivent aussi être compréhensibles par les technologies d'assistance (lecteurs d'écran, navigation clavier, etc.).

Pour cela, HTML met à disposition des balises et attributs spécifiques.

La balise caption

permet d'ajouter un titre explicatif à un tableau. Ce titre est lu en priorité par les lecteurs d'écran et aide l'utilisateur à comprendre le contenu du tableau avant d'en parcourir les données.

Attribut scope

Utilisé pour les balises <th> il permet d'indiquer à quelle cellule de données (<td>) elle se rapporte

Elle améliore l'accessibilité et la compréhension des tableaux complexes

Valeur	signification
row	l'en-tête s'applique à la ligne
col	l'en-tête s'applique à la colonnes
colgroup	l'en-tête s'applique à un groupe de colonnes
rowgroup	l'en-tête s'applique à un groupe de lignes

Ici, chaque <th> décrit toute la colonne située en dessous.