Les tableaux

Dr. Manel KOLLI

1
 I. Généralités

 Usuellement un tableau est constitué de lignes et de

colonnes. Ce n'est pas tout à fait le cas en HTML :

• Un tableau est un conteneur <table>

• Un tableau est constitué de lignes <tr> (pour table row)
• Un tableau est constitué de cellules<td> (pour table data)
• Il est également possible de fournir une légende au
tableau. Tous ces éléments se structurent globalement
dans un entête, un pied de tableau, et un corps de
tableau.

2
 2. Structure d'un tableau

 Un tableau se déclare grâce à la balise <table>. Cette

balise peut avoir plusieurs balises-enfants. La
plupart sont facultatives, mais si elles sont
présentes, elles doivent être utilisées dans cet ordre :
• <caption>
• <col> ou <colgroup>
• <thead>
• <tfoot>
• <tbody>

3
 II. Les éléments d'un tableau
• 1. La balise <table>
• La notion de table étant complexe, le nombre d'attributs de cette balise est important.
Attribut Effet Valeur
donne un rapide résumé du
contenu du tableau. Cela
summary une chaîne de caractères
améliore l'accessbilité de la
page.
une longueur, qui peut s'exprimer en
width largeur du tableau nombre de pixels ou en pourcentage de
la largeur de la fenêtre du navigateur
épaisseur de la bordure
border en pixel (par défaut, 0, sans bordure)
extérieure
 void : aucune
 above : haut seulement
 below : bas seulement
(rien à voir avec la balise  hsides : haut et bas
<frame>, que l'on verra dans  vsides : gauche et droite
frame le cours sur les cadres).  lhs : gauche seulement
Présence de l'encadrement  rhs : droite seulement
extérieur  box : sur les 4 côtés
 border : sur les 4 côtés
aussi

 none : aucun
 groups : seulement entre
les groupes de lignes ( <thead>,
<tbody> et <tfoot>) et les
comme l'attribut frame, groupes de colonnes (<colgroup>
rules mais pour l'encadrement et <col>)
intérieur  rows : entre les lignes
 cols : entre les colonnes
 all : partout (valeur par
défaut)

cellspaci marge entre cellules

en pixels
ng consécutives
cellpaddi marge entre le bord et le
en pixels
ng contenu de la cellule
 center
position du tableau dans la
 left
align fenêtre. Cet attribut est
 right
obsolète en HTML 4.01 strict.

couleur de fond du tableau. 4

bgcolor Cet attribut estobsolète en nom de couleur ou triplet RGB
HTML 4.01 strict.
• Certains de ces attributs sont liés ; ainsi si
border="0", alors frame="void" et
rules="none".

• Par défaut la taille du tableau s'ajuste à son

contenu. C'est cette gestion particulière de la
taille qui fait du tableau un moyen très utile
de présentation.

5
 2. La balise <caption>
• Cette balise est facultative, et ne peut être
présente qu'une seule fois dans le tableau. Son
rôle est de lui donner une légende, plus
complète que le court résumé de l'attribut
summary.
• Elle possède un attribut align, qui gère son
alignement relativement au tableau. Cet
attribut est obsolète en HTML 4.01 strict.
• Exemple d'utilisation :
<caption>Légende du tableau.</caption>

6
 3. Les balises <col> et <colgroup>
a. Introduction

• Le rôle fondamental de ces balises est de définir

des groupements de colonnes. <colgroup> le
fait de manière plus "structurelle".
• <col> permet à plusieurs colonnes de partager
les mêmes attributs. C'est un élément vide.
• <colgroup> permet de regrouper un ensemble
de colonnes en une seule unité logique, et
d'appliquer par exemple un style à cet ensemble
de colonnes.
7
 b. Attributs
Attrib
Effet Valeur(s)
ut
Nombre de
span colonnes à un nombre
regrouper
une longueur, qui peut s'exprimer en nombre de
Largeur de chaque
width pixels, en pourcentage, ou bien par exemple
colonne
width="0.5*", en proportion relative
 top : alignement en haut de la cellule
 middle : alignement au milieu de la
cellule (valeur par défaut)
alignement
valign  bottom : alignement en bas de la cellule
vertical
 baseline : alignement sur la ligne du
bas dela cellule

 left (valeur par défaut)

 right
 center
align
alignement  justify
horizontal
 char : l'alignement se fait sur un
caractère particulier

un caractère. La valeur par défaut est celle du

spécifie quel séparateur décimal défini par l'attribut de langage
caractère doit servir lang, à savoir le "." pour la langue par défaut, et le
char
de base pour "," si l'attribut définit le français comme langue
l'alignement (lang="fr" ). Il n'est pas demandé aux navigateurs
de supporter cet attribut.
spécifie le
décalage en position
charof
f horizontale imposé un nombre.
aucaractère
d'alignement.
8
 c. Exemples
• Par exemple, si on doit spécifier que quarante colonnes dans
un tableau doivent être alignés à droite, au lieu d'écrire...
<colgroup>
<col width="20">
<col width="20">
... 40 éléments au total... </colgroup>

... on peut se contenter d'écrire...

<colgroup span="40" width="20"></colgroup>

Quand il est nécessaire d'identifier une unique colonne sur ces quarante, par
exemple la dernière, on peut regrouper sous la forme...

<colgroup width="20">
<col span="39"></col>
<col valign="top"></col>
</colgroup>

9
 4. Structure du contenu
a. Les balises <thead> et <tfoot>

• Le rôle de ces balises est de contenir les informations nécessaires

à l'entête et au bas du tableau. Il s'agit essentiellement des titres
de colonnes. Ces balises contiennent des lignes (voir le
paragraphe consacré à la balise <tr> pour plus de détails).

• Il est possible, pour peu que l'on ait déclaré la balise <thead>
(respectivement <tfoot>), de dupliquer l'entête (respectivement
le bas) d'un tableau en cas de saut de page.

• Les attributs de ces balises sont les attributs d'alignement des

cellules (valign, align, char et charoff).

10
 b. La balise <tbody>

• Son rôle est de définir le corps même d'un

tableau. En dupliquant plusieurs <tbody> au
sein d'un même tableau, on peut définir
plusieurs composantes structurelles
d'apparences et de formats différents.

• Les attributs de cette balise sont les attributs

d'alignement des cellules (valign, align, char et
charoff).
11
 5. Les lignes: la balise <tr>
a. Généralités

• Les attributs de cette balise sont les attributs

d'alignement des cellules (valign, align, char et
charoff), ainsi que l'attribut bgcolor, dont la fonction
est de spécifier la couleur de fond de la ligne. Mais
ce dernier attribut est obsolète en HTML 4.01 Strict.

• Cette balise permet de définir une ligne dans le

tableau. Elle peut contenir une ou plusieurs balises
<th> ou <td>.

12
 b. Balises <td> et <th>

• Ces balises acceptent les mêmes contenus, ainsi que les mêmes attributs. Cependant, <th>
doit être utilisé pour indiquer des cellules destinées à être des entêtes de colonnes (Table
Header).
• Ces balises peuvent contenir à peu près tous les types d'éléments, y compris les <div> et les
<p>.

Attrib
Effet Valeur(s)
ut
une chaîne de
abbr fournit un abrégé du contenu de la cellule
caractères
indique à quelle catégorie appartient la cellule
axis
(voir sur le site du W3C pour plus d'informations une chaîne de
sur l'utilisation de cet attribut dans la structuration caractères
du contenu d'un tableau).
renvoi à(aux) l'identifiant(s) de la cellule une liste
header "header" associée. Cela permet à un agent vocal d'indentifiants
s de présenter le type de contenu de la cellule avant (séparés par des
le contenu proprement dit. espaces)
13
  row : s'applique à la ligne courante
 col : s'applique à la colonne courante
indique quel est le
 rowgroup : s'applique à l'ensemble du
jeu de cellules
<thead>, <tfoot> ou <tbody> courant
scope auquel la cellule
 colgroup : s'applique au groupe de
"header" courante
colonnes courant (spécifié par les balises
s'applique
<colgroup> ou <col>)

un nombre. La valeur par défaut est 1. Si

nombre de lignes
rowsp rowspan="0", la cellule s'applique à l'ensemble des
concernées par la
an lignes, depuis la ligne courante jusqu'à la dernière
balise courante.
dans le <thead>, <tfoot> ou <tbody> courant.
nombre de un nombre. La valeur par défaut est 1. Si
colsp colonnes concernées rowspan="0", la cellule s'applique à l'ensemble des
an par la cellule colonnes, depuis la ligne courante jusqu'à la dernière
courante. du <colgroup>.
 left (valeur par défaut)
 right
 center
align
alignement  justify
horizontal
 char : l'alignement se fait sur un
caractère particulier

un caractère. La valeur par défaut est celle du

spécifie quel séparateur décimal défini par l'attribut de langage
caractère doit servir attr, à savoir le "." pour la langue par défaut, et le
char
de base pour "," si l'attribut définit le français comme langue
l'alignement (attr="fr"). Il n'est pas demandé aux navigateurs
de supporter cet attribut.
spécifie le décalage
en position
charo
ff horizontale imposé un nombre.
au caractère
d'alignement.
14
  top : alignement en haut de la
cellule
 middle : alignement au milieu de la
cellule (valeur par défaut)
valign alignement vertical
 bottom : alignement en bas de la
cellule
 baseline : alignement sur la ligne du
bas de la cellule

empêche le retour à la ligne

automatique dans les cellules quand le
nowrap valeur unique : nowrap
bord de la fenêtre du navigateur est
atteint. Obsolète en HTML 4.01 strict.

couleur de fond de la cellule. Cet

bgcolor nom de couleur ou triplet RGB
attribut est obsolète en HTML 4.01 strict.

largeur de la cellule. Cet attribut est

width nombre de pixels ou pourcentage
obsolète en HTML 4.01 strict.

hauteur de la cellule. Cet attribut est

height nombre de pixels ou pourcentage
obsolète en HTML 4.01 strict.

15
 III. Remarques
1. Cellules vides

• Si le nombre de cellules est différent d'une ligne à

l'autre, les derniers emplacements sont vides. Par
ailleurs, un conteneur vide <td></td> crée un
emplacement vide alors qu'un conteneur contenant
un espace insécable &#160; crée une cellule vide.

• 2. Tableaux imbriqués
Un tableau peut en contenir un autre qui peut en
contenir un autre qui... Il n'y a pas de limitation.

16
 3. Des tableaux pour la présentation
• Créés au départ pour présenter des tables de données, les tableaux
sont très vite devenus un moyen efficace de présentation claire et
ordonnée. Ils permettent, par exemple, de faire de manière souple du
multicolonne. De nombreux sites les utilisent, comme...

• ... le site du Monde : http://www.lemonde.fr.

• ... le site de Yahoo : http://www.yahoo.fr.
• ... le site de l'Université Pierre et Marie Curie : http://www.upmc.fr.

• Néanmoins, les performances des navigateurs les plus récents dans le

support des feuilles de style rendent cette utilisation des tableaux
obsolète ; il vaut mieux maintenant lui préférer ue mise en page à
base d'éléments div.

17