Balise TABLE : Tableau html

« Partie précédente | Index | Partie suivante »

Tag de fermeture obligatoire | Support :

La balise <table> est un conteneur très utilisé dans les pages web. Elle facilite la mise en forme des informations grâce à son découpage en lignes et cellules complètement paramétrables. Il est nécessaire d'utiliser au minimum les balises <tr> et <td> pour mettre en forme les éléments à afficher dans la table. D'autres balises peuvent structurer la table, voici toutes ces balises et leur ordre d'apparition :

<table cellspacing="2px" cellpadding="2px;" rules="all" style="border:solid 1px black;">
   <caption>Titre du tableau</caption>
   <colgroup>
      <col width="150px;" />
      <col width="200px;" />
   </colgroup>
   <thead>
      <tr>
         <th>Titre Col 1</th>
         <th>Titre Col 2</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
          <td>Valeur Footer 1</td>
          <td>Valeur Footer 2</td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
          <td>Valeur 1</td>
          <td>Valeur 2</td>
      </tr>
      <tr>
          <td>Valeur 1</td>
          <td>Valeur 2</td>
      </tr>
   </tbody>
</table>

Pour rappel, la balise <tr> permet de créer une nouvelle ligne dans le tableau. La balise <td> crée une cellule au sein d'une ligne.
Les balises <thead>, <tbody> et <tfoot> permettent de donner une structure à la table, la partie thead étant censé contenir la partie relative aux titres, la partie tbody contenant les données et la partie tfoot d'éventuelles annotations ou remarques complémentaires.
Le tag tfoot apparaît avant le tag tbody, le navigateur devant pouvoir afficher la partie basse tfoot avant d'avoir reçu l'ensemble des lignes du bloc principal tbody.

Les attributs régulièrement utilisés pour mettre en forme un tableau sont le cellspacing et le cellpadding ainsi que la propriété rules. Les styles CSS "border-collapse : collapse" et "empty-cells : show" sont également très pratiques pour bien afficher les bordures du tableau.

Rendu des éléments liés à la balise table :

Titre du tableau
Titre Col 1	Titre Col 2
Valeur Footer 1	Valeur Footer 2
Valeur 1	Valeur 2
Valeur 1	Valeur 2

Propriétés pour la balise table :

Propriétés	Définition	Valeurs
align	Spécifie l'alignement de la table par rapport à son conteneur déprécié, appliquer les styles CSS pour un rendu similaire	center left right
bgcolors	Spécifie la couleur de fond de la table déprécié, appliquer les styles CSS pour un rendu similaire	#hexa Couleur rgb(v,v,v)
border	Indique l'épaisseur des bordures externes de la tables	px
cellpadding	Valeur d'espacement entre le bord des cellules et leur contenu	px
cellspacing	Valeur d'espacement entre des cellules adjacentes	px
frame	Spécifie quelles sont les bordures extérieures visibles	above below border hsides vsides lhs rhs box void
rules	Spécifie quelles sont les bordures intérieures visibles	all cols rows groups none
summary	Indique un résumé descriptif de la table (ce texte n'a pas de rendu visuel)	Texte
width	Détermine la largeur complète de la table	px %

Exemple d'utilisation de la balise table :

Tableau avec un peu de mise en forme :

<table cellspacing="0" cellpadding="3px" rules="rows"
   style="border:solid 1px #777777; border-collapse:collapse; font-family:verdana; font-size:11px;">
   <caption>Liste des candidats sélectionnés</caption>
   <tr style="background-color:lightgrey;">
      <th style="width:100px;">Nom</th>
      <th style="width:100px;">Prénom</th>
      <th style="width:80px;">Age</th>
   </tr>
   <tr>
      <td style="padding-left:10px; color:midnightblue;">Marc</td>
      <td style="padding-left:10px; color:midnightblue;">Legrand</td>
      <td style="text-align:center;">21</td>
   </tr>
   <tr>
      <td style="padding-left:10px; color:midnightblue;">Franck</td>
      <td style="padding-left:10px; color:midnightblue;">Durand</td>
      <td style="text-align:center;">23</td>
   </tr>
   <tr>
      <td style="padding-left:10px; color:midnightblue;">Marie</td>
      <td style="padding-left:10px; color:midnightblue;">Dupont</td>
      <td style="text-align:center;">31</td>
   </tr>
   <tr>
      <td style="padding-left:10px; color:midnightblue;">Gérald</td>
      <td style="padding-left:10px; color:midnightblue;">Martin</td>
      <td style="text-align:center;">28</td>
   </tr>
   <tr style="background-color:lightgrey; text-align:center; border-top:solid 2px black;">
      <td colspan="3">Sélection faite le 30/06/2010</td>
   </tr>
</table>

Liste des candidats sélectionnés
Nom	Prénom	Age
Marc	Legrand	21
Franck	Durand	23
Marie	Dupont	31
Gérald	Martin	28
Sélection faite le 30/06/2010

Tous les Tags HTML