2.7.1. But

Vous pouvez définir des tableaux en (X)HTML pour y présenter des données de manière structurée. Beaucoup de programmeurs utilisent les tableaux pour rendre plus attractive la présentation du texte et des graphiques à l'écran. C'est la seule partie du langage XHTML où contenu (données structurées) et représentation (forme des colonnes et lignes..) ne peuvent pas être nettement séparées.

2.7.2. Tableaux simples


Tableau simple sans quadrillage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Composition d'un tableau</title>
</head>
<body>
<table border="0">
<tr>
<td>France</td>
<td>Belgique</td>
<td>Suisse</td>
</tr><tr>
<td>quatre-vingts</td>
<td>octante</td>
<td>huitante</td>
</tr><tr>
<td>serpillière</td>
<td>wassingue</td>
<td>panosse</td>
</tr>
</table> </body> </html>

Tableau simple avec quadrillage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Composition d'un tableau</title>
</head>
<body>
<table border="1">
<tr>
<td>France</td>
<td>Belgique</td>
<td>Suisse</td>
</tr><tr>
<td>quatre-vingts</td>
<td>octante</td>
<td>huitante</td>
</tr><tr>
<td>serpillière</td>
<td>wassingue</td>
<td>panosse</td>
</tr>
</table>
</body>
</html>

Le nombre des cellules pour chaque rangée doit être identique de façon à ce que le tableau ait pour chaque rangée le même nombre de colonnes.
Des cellules de tableau peuvent aussi être vides . Si dans une ligne vous ne voulez pas entrer de données pour une colonne notez simplement <td>&#160;</td> .

2.7.3. Position des tableaux


Droite, centrée ou gauche

La position courante est fixée par l'attribut align de la balise <table>
qui peut avoir les propriétés: left (à gauche), right (à droite) ou center (centrée)) Par exemple:


......
<table align="center" border="1">
......

produit un tableau centré dans la ligne courante.

Absolue

La position absolue est fixée par les propriétés CSS position, top, bottom, left ou right de l'attribut style de la balise <table>
Par exemple:


......
<table style="position: absolute; top: 150px; left: 100px" border="1">
......

produit un tableau dont le coin supérieur gauche se trouve éloigné de 150px du bord supérieur et 100 px du bord droit.

Essayez!

2.7.3. Tableaux structurés


Tableau avec corps, tête ou pied

Essayez le fichier suivant:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Définir l'entête, le corps et le pied d'un tableau</title>
</head>
<body>
<table border="1" >
<thead>
<tr>
<th>Association 1</th>
<th>Association 2</th>
<th>Association 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td><i>concernés:
environ 55 Millions
d'individus</i></td>
<td><i>concernés:
environ 4 Millions
d'individus</i></td>
<td><i>concernés:
environ 1,5 Millions
d'individus</i></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>France</td>
<td>Belgique</td>
<td>Suisse</td>
</tr><tr>
<td>quatre-vingts</td>
<td>octante</td>
<td>huitante</td>
</tr><tr>
<td>serpillière</td>
<td>wassingue</td>
<td>panosse</td>
</tr>
</tbody>
</table>
</body>
</html>

L'exemple précédent montre le moyen de faire la nette distinction entre première ligne d'un tableau(tête), corps et dernière ligne(pied)
Notez que les cellules de la tête sont notées <th>..</th> et non <td>..</td>.
Notez encore l'ordre (non logique mais obligatoire): tête-pied-corps

2.7.4. Bordures


L'attribut rules de la balise <table> permet le contrôle des bordures d'un tableau.

Nom Syntaxe Validité Effet
Toutes rules="all" balise <table> toutes les bordures sont tracées
Aucune rules="" balise <table> aucune bordure n'est tracée
Aucune interne rules="none" balise <table> aucune bordure interne n'est tracée
Groupes rules="groups" balise <table> bordures autour de la tête, le corps et le pied (si ceux-ci sont définis) sont tracées
Colonnes rules="cols" balise <table> bordures autour des colonnes sont tracées
Lignes rules="rows" balise <table> bordures autour des lignes sont tracées

Le fichier suivant:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rules</title>
</head>
<body>
<table border="2" rules = "cols">
<tr>
<td>Cellule 11</td>
<td>Cellule 12</td>
<td>Cellule 13</td>
</tr>
<tr>
<td>Cellule 21</td>
<td>Cellule 22</td>
<td>Cellule 23</td>
</tr>
<tr>
<td>Cellule 31</td>
<td>Cellule 32</td>
<td>Cellule 33</td>
</tr>
</table>
</body>
</html>

produit le tableau :

Cellule 11 Cellule 12 Cellule 13
Cellule 21 Cellule 22 Cellule 23
Cellule 31 Cellule 32 Cellule 33

2.7.5. Colonnes


Le réglage des colonnes se fait immédiatement derrière la balise <table> en insérant les codes suivants:

Le fichier suivant:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rules</title>
</head>
<body>
<table border="2" width="400" >

<colgroup span="3">
</colgroup>
<tr>
<td>Cellule 11</td>
<td>Cellule 12</td>
<td>Cellule 13</td>
</tr>
<tr>
<td>Cellule 21</td>
<td>Cellule 22</td>
<td>Cellule 23</td>
</tr>
<tr>
<td>Cellule 31</td>
<td>Cellule 32</td>
<td>Cellule 33</td>
</tr>
</table>
</body>
</html>

produit le tableau:

Cellule 11 Cellule 12 Cellule 13
Cellule 21 Cellule 22 Cellule 23
Cellule 31 Cellule 32 Cellule 33

2.7.6. Espaces


Les attributs cellspacing et cellpadding de la balise <table> permettent le contrôle des marges externes et internes des cellules.

Le fichier suivant:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Espaces entre les cellules et entre le contenu de la cellule et le bord de la cellule</title>
</head>
<body>
<table border="8" cellspacing="10" cellpadding="20">
<tr>
<th>Entête 11</th>
<th>Entête 12</th>
<th>Entête 13</th>
</tr>
<tr>
<td>Cellule 21</td>
<td>Cellule 22</td>
<td>Cellule 23</td>
</tr>
<tr>
<td>Cellule 31</td>
<td>Cellule 32</td>
<td>Cellule 33</td>
</tr>
</table>
</body>
</html>

produit un tableau avec marges externes de 10px et marges internes de 20px:

Entête 11 Entête 12 Entête 13
Cellule 21 Cellule 22 Cellule 23
Cellule 31 Cellule 32 Cellule 33

2.7.7. Fusion de cellules


Les attributs colspan et rowspan de la balise <th> ou <td> permettent d'étendre la cellule en question à plusieurs lignes ou rangées.

Le fichier :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Étendre une cellule sur plusieurs colonnes</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">Cellule étendue à deux colonnes</td>
</tr>
<tr>
<td>Cellule 21</td>
<td>Cellule 22</td>
</tr>
</table>
</body>
</html>

produit le tableau suivant:

Cellule étendue
Cellule 21 Cellule 22

Le fichier :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Étendre une cellule sur plusieurs lignes</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">Cellule étendue sur deux lignes</th>
<td>Cellule 12</td>
</tr>
<tr>
<td>Cellule 22</td>
</tr>
</table>
</body>
</html>

produit le tableau suivant:

Cellule étendue sur deux lignes Cellule 12
Cellule 22

2.7.8. Contenu des cellules


Le langage CSS permet de manipuler entièrement le contenu cellules à l'aide de l'attribut style de la balise <th> ou <td>.

Attribut Propriété Valeur Explication
style height taille (voir →Tailles et unités) Hauteur de la cellule et donc de la ligne en question
style width taille (voir →Tailles et unités) Largeur de la cellule et donc de la colonne en question
style background-color couleur (voir →Couleurs) Couleur d'arrière-fonds
style text-align voir en bas (1) Alignement horizontal du texte dans la cellule
style vertical-align voir en bas (2) Alignement vertical du texte dans la cellule

(1) text-align:

left ( aligné à gauche ).
right ( aligné à droite ).
center ( centré ).
right ( justifié ).

(2) vertical-align:

top ( au sommet ).
middle ( au milieu ).
bottom ( au fond ).

Le fichier :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Texte du titre</title>
</head>
<body>
<table border="0" style="width:90%">
<tr>
<td style=" height:50px; background-color:yellow; text-align:right; vertical-align: top; ">Cellule 11</td>
<td>Cellule 12</td>
</tr><tr>
<td >Cellule 21</td>
<td style="color:red; height:30px; background-color:blue; text-align:left; vertical-align: bottom; ">Cellule 22</td>
</tr><tr>
</table>
</body>
</html>

produit le tableau suivant:

Cellule 11 Cellule 12
Cellule 21 Cellule 22

Toutes les propriétés de style que nous avons déjà vues dans les chapitres précédents sont aussi applicables (p.ex la couleur du texte par color:red;)

Pour d'autres effets spéciaux, consultez →SELFHTML de Stefan Münz

2.7.9. Exercices

  1. Construisez une table de multiplication des 10 premiers nombres entiers aussi parfaite que possible en utilisant le plus possible de ressources de cette page ainsi que plusieurs couleurs, tailles et polices de caractères
  2. Voici la position de départ du jeu d'échecs:

    Vous trouverez →ici et →ici des schémas de position :

    • Facile: Utilisez le traitement des images (gimp ou autre) pour fabriquer au moyen d'un tableau une page Internet que vous appellerez schach.html et qui reproduira de manière simplifiée au moyen d'un tableau la position de départ du jeu d'échec. Dans ce tableau, vous insérerez les images des figures séparément.
    • Plus difficile: Réalisez un site Internet, qui reproduit la fameuse ouverture française B. Larsen - L. Portisch IZ, Amsterdam 1964:
      1.e4 e6 2.d4 d5 3.Cc3 Fb4 (C = cavalier; F = fou)

      Sur la page d'accueil que vous appellerez schachouverture.html figureront deux blocs (div): En marge gauche un bloc avec un tableau des différents coups par exemple e4 e6, à droite, l'échiquier dans sa position de départ

      En cliquant sur les coups devra s'ouvrir une nouvelle page montrant le jeu après le coup en question. En bas de cette nouvelle page devra se trouver une référence qui reconduit à la page qui montre le jeu d'échec avant ce coup et une référence avec le coup suivant menant à la page montrant le jeu après ce coup.

    • Plus difficile: Réalisez une page Internet, qui montre un tableau périodique simplifié des éléments chimiques. L'arrangement des cases devra être celui d'un tableau périodique complet comme vous le voyez par exemple →ici :, mais le tableau ne comportera que les éléments H,Li,Na,K,Be,Mg,Ca,B,Al,C,Si,N,P,O,S,Cl,Br,I,He,Ne,Ar.
      Dans chaque case devra figurer le symbole, le nom de l'élément et son numéro atomique ainsi qu'une petite image du corps simple formé par cet élément. Vous prendrez les images →ici
      En cliquant sur une image, on devra être reporté à une page Internet qui décrit cet élément en détail et que vous choisirez librement sur le Net.

      Appelez cette page tableauperiodique.html et portez-la sur le serveur dans le sous-répertoire "devoirs"