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.