Accueil    HTML    Balise TABLE
 



balise table  Balise TABLE : Tableau html

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


  • Tag de fermeture obligatoire | Support :
  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari



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