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 :
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.
Titre Col 1 | Titre Col 2 |
---|---|
Valeur Footer 1 | Valeur Footer 2 |
Valeur 1 | Valeur 2 |
Valeur 1 | Valeur 2 |
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 % |
Nom | Prénom | Age |
---|---|---|
Marc | Legrand | 21 |
Franck | Durand | 23 |
Marie | Dupont | 31 |
Gérald | Martin | 28 |
Sélection faite le 30/06/2010 |