Initiation à la création de site Web

Tables

Introduction

servent pour l'affichage de « données tabulaires »
les données sont présentées en lignes et colonnes

quelques exemples :

No	Nom	Quantité en stock	Prix
1	Corvette 2dr Coupe	3	$67,805
2	2dr Convertible	3	$79,905
3	Corvette Z06 Hardtop 2dr Coupe	1	$89,900

Ville	Résident
Berlin	Berlinois
Rome	Romain
Lille	Lillois
Madrid	Madrilène
Moscou	Moscovite

Pays	Résident	Résidente
Pays-Bas	Hollandais	Hollandaise
Corée	Coréen	Coréenne
Russie	Russe

Remarque : beaucoup de gens se servent de tables pour faire une mise en page. Ce n'est pas une bonne approche. Utilisons les tableaux si nous avons besoin de colonnes!
Un mauvais exemple :

Alger, Algéria Bamako, Mali Bénin, Porto-Novo

Cuba, La Havane Haïti, Port-au-Prince Maroc, Rabat

Singapour, Singapour Suisse, Berne Togo, Lomé

Un meilleur exemple :

Alger, Algéria
Bamako, Mali
Bénin, Porto-Novo

Cuba, La Havane
Haïti, Port-au-Prince
Maroc, Rabat

Singapour, Singapour
Suisse, Berne
Togo, Lomé

Une structure simple de table

Une table se trouve entre les balises <table> et </table>
Chaque rangée de table se trouve entre <tr> et </tr> ("table row")
Chaque élément d'une rangée se trouve entre <td> et </td> ("table data")
Les premiers éléments de chaque rangée forment la première colonne, les deuxièmes éléments forment la deuxième colonne et ainsi de suite.

Exemple :

Code HTML :

<table>
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
  <tr>
    <td>Cellule 3</td>
    <td>Cellule 4</td>
  </tr>
</table>

Dans le navigateur :

Cellule 1	Cellule 2
Cellule 3	Cellule 4

Attributs

Le nombre des cellules pour chaque rangée doit être identique; c.à-d. chaque rangée doit avoir le même nombre de colonnes.
Des cellules de tableau peuvent être vides.

L'attribut "colspan" ("Column span") est utilisé dans la balise <td> pour indiquer combien de colonnes la cellule recouvre :

Code HTML :

<table>
  <tr>
    <th>Pays</th>
    <th>Résident</th>
    <th>Résidente</th>
  </tr>
  <tr>
    <td>Corée</td>
    <td>Coréen</td>
    <td>Coréenne</td>
  </tr>
  <tr>
    <td>Russie</td>
    <td colspan="2">Russe</td>
  </tr>
</table>

Dans le navigateur :

Pays	Résident	Résidente
Corée	Coréen	Coréenne
Russie	Russe

L'attribut "rowspan" ("row span") est utilisé dans la balise <td> pour indiquer combien de rangées la cellule recouvre :

Code HTML :

<table>
  <tr>
    <td rowspan="3">Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
  <tr>
    <td>Cellule 3</td>
  </tr>
  <tr>
    <td>Cellule 4</td>
  </tr>
</table>

Dans le navigateur :

Cellule 1	Cellule 2
	Cellule 3
	Cellule 4

Et un autre exemple :

Code HTML :

<table>
  <tr>
    <td rowspan="2"></td>
    <td colspan="2">Moyenne</td>
    <td rowspan="2">Yeux<br/>rouges</td>
  </tr>
  <tr>
    <td>hauteur</td>
    <td>poids</td>
  </tr>
  <tr>
    <td>Mâles</td>
    <td>1.9</td>
    <td>0.003</td>
    <td>40%</td>
  </tr>
  <tr>
    <td>Femelles</td>
    <td>1.7</td>
    <td>0.002</td>
    <td>43%</td>
  </tr>
</table>

Dans le navigateur :

	Moyenne		Yeux rouges
	hauteur	poids	Yeux rouges
Mâles	1.9	0.003	40%
Femelles	1.7	0.002	43%

L'attribut "width" est utilisé pour spécifier la largeur souhaitée de la table entière ou d'une colonne particulière.
La largeur est spécifiée en pixels ou en pourcentage de l'espace d'affichage horizontal disponible. Exemple :
Code HTML :
```
<table width="400">
  <tr>
    <td width="30%">Cellule 1</td>
    <td width="20%">Cellule 2</td>
    <td width="50%">Cellule 3</td>
  </tr>
  <tr>
    <td>Cellule 4</td>
    <td>Cellule 5</td>
    <td>Cellule 6</td>
  </tr>
</table>
```
Dans le navigateur :

Cellule 1 Cellule 2 Cellule 3

Cellule 4 Cellule 5 Cellule 6

attribut "border" détermine l'épaisseur de la bordure autour de la table. Exemple :

Code HTML :

<table border="3">
  <tr>
    <td width="30%">Cellule 1</td>
    <td width="20%">Cellule 2</td>
    <td width="50%">Cellule 3</td>
  </tr>
  <tr>
    <td>Cellule 4</td>
    <td>Cellule 5</td>
    <td>Cellule 6</td>
  </tr>
</table>

Dans le navigateur :

Cellule 1	Cellule 2	Cellule 3
Cellule 4	Cellule 5	Cellule 6

attributs déconseillés ("deprecated") :
- "align" spécifie l'alignement horizontal du contenu dans toute la table, dans une rangée ou dans une cellule.
  Valeurs possibles : "left" (à gauche), "center" (au centre) ou "right" (à droite).
- "valign" spécifie l'alignement vertical du contenu dans une cellule.
  Valeurs possibles : "top" (en haut), "middle" (au milieu) ou "bottom" (en bas).
- On utilisera des feuilles de style (CSS) pour obtenir ce type de mise en page.
Même si les attributs "width" et "border" sur l'élément "table" ne sont pas déconseillés, on encourage les auteurs à employer des feuilles de style pour spécifier la largeur et la bordure.

Taille du tableau et des cellules

Le navigateur calcule de manière automatique la taille du tableau selon la loi du meilleur est le minimum.
On peut forcer le navigateur à donner une taille au tableau. Cette taille est exprimée en pixel ou en pourcentage de l'espace libre.
Les deux remarques plus haut s'appliquent aux cellules, aux colonnes et aux lignes.
Si on spécifie la hauteur d'une cellule, toutes les autres cellules de la même ligne auront la même hauteur.
Si on spécifie la largeur d'une cellule, toutes les autres cellules de la même colonne auront la même largueur.

Structure de tableau complète

Chaque table peut avoir une légende propre (balise <caption>) qui fournit une brève description de la table.
On peut fournir une description plus longue (l'attribut "summary"), au bénéfice des personnes qui utilisent des navigateurs gérant la synthèse de parole et l'écriture Braille.
On peut regrouper les rangées de la table dans des sections d'en-tête, de pied et de corps (via les balises <thead>, <tfoot> et <tbody>, respectivement).
Cette structure supplémentaire peut être utilisée par le navigateur. Par exemple, pendant l'impression d'une longue table, les informations d'en-tête et de pied peuvent être répétées sur chacune des pages qui contiennent les données de la table.
On peut aussi regrouper les colonnes pour apporter des informations structurelles supplémentaires qui peuvent être exploitées par les navigateurs (via les balises <colgroup> et <col>).
Les cellules de la table peuvent contenir soit des informations "d'en-tête" (la balise <th>), soit des informations "de données" (la balise <td>).
Les cellules peuvent occuper plusieurs rangées et colonnes.

Exemple 1 :

Code HTML :

<table border="1"
  summary="Cette table donne quelques statistiques sur les drosophiles : hauteur et poids moyens, et le pourcentage de celles ayant des yeux rouges (pour les mâles et les femelles).">
  <caption><em>Une table test avec des cellules fusionnées</em></caption>
  <tr>
    <th rowspan="2"/>
    <th colspan="2">Moyenne</th>
    <th rowspan="2">Yeux<br/>rouges</th>
  </tr>
  <tr><th>hauteur</th><th>poids</th></tr>
  <tr>
    <th>Mâles</th>
    <td>1.9</td>
    <td>0.003</td>
    <td>40%</td>
  </tr>
  <tr>
    <th>Femelles</th>
    <td>1.7</td>
    <td>0.002</td>
    <td>43%</td>
  </tr>
</table>

Dans le navigateur :

*Une table test avec des cellules fusionnées*
	Moyenne		Yeux rouges
	hauteur	poids	Yeux rouges
Mâles	1.9	0.003	40%
Femelles	1.7	0.002	43%

Exemple 2 :

Code HTML :

<table border="1">
  <thead>
    <tr><th>Jour</th><th>Date</th><th>Responsable</th><th>Quantité</th></tr>
  </thead>
  <tfoot>
    <tr><td colspan="3">Total</td><td>3970</td></tr>
  </tfoot>
  <tbody>
    <tr><td>Lun</td><td>01/12</td><td>  Jean</td><td>573</td></tr>
    <tr><td>Mar</td><td>01/13</td><td> Marie</td><td>701</td></tr>
    <tr><td>Mer</td><td>01/14</td><td>Robert</td><td>702</td></tr>
    <tr><td>Jeu</td><td>01/15</td><td>  Anne</td><td>800</td></tr>
    <tr><td>Ven</td><td>01/16</td><td> Susan</td><td>759</td></tr>
    <tr><td>Sam</td><td>01/17</td><td>Robert</td><td>314</td></tr>
    <tr><td>Dim</td><td>01/18</td><td>  Anne</td><td>121</td></tr>
  </tbody>
</table>

Dans le navigateur :

Jour	Date	Responsable	Quantité
Total			3970
Lun	01/12	Jean	573
Mar	01/13	Marie	701
Mer	01/14	Robert	702
Jeu	01/15	Anne	800
Ven	01/16	Susan	759
Sam	01/17	Robert	314
Dim	01/18	Anne	121

Alger, Algéria	Bamako, Mali	Bénin, Porto-Novo
Cuba, La Havane	Haïti, Port-au-Prince	Maroc, Rabat
Singapour, Singapour	Suisse, Berne	Togo, Lomé