US

Insérer un tableau

Pour insérer un tableau dans un document HTML, on utilise l'élément TABLE. Les deux balises de cet élément sont obligatoires et délimitent le tableau. On définit ensuite les différentes lignes du tableau avec l'élément TR (table row). Enfin, pour chaque ligne, on va définir chaque cellule du tableau avec l'élément TD (table data). C'est dans ce dernier élément que le contenu sera ajouté. Le listing suivant vous montre un exemple de tableau qui fait deux lignes sur deux colonnes.

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
<HTML>
<HEAD>
    <TITLE>Insérer un tableau</TITLE>
 
<BODY>
    <TABLE border="1" width="100%">
        <TR>
            <TD width="50%">Ligne 1, colonne 1
            <TD width="50%">Ligne 1, colonne 2
        <TR>
            <TD width="50%">Ligne 2, colonne 1
            <TD width="50%">Ligne 2, colonne 2
    </TABLE>
Listing 4.1 Insérer un tableau.

La figure suivante vous montre le résultat dans un navigateur Web. Notez que le tableau s'étend sur toute la largeur de la page.

Insérer un tableau
Figure 4.1 Insérer un tableau.

Remarquez également qu'on a fait ressortir la structure du tableau dans le code source du fichier HTML. Ceci est important afin de pouvoir facilement le relire ou faire relire par quelqu'un d'autre, mais également pour pouvoir le modifier aisément.

Tableau

L'élément TABLE est donc à la base de l'insertion de tableaux en HTML. Il représente le tableau dans son entièreté et les deux balises sont obligatoires. Il s'agit d'un élément de niveau bloc, c'est-à-dire que vous ne pouvez par exemple pas insérer un tableau dans du texte puisqu'un retour à la ligne sera ajouté avant et après le tableau.

Cet élément possède des attributs qui permettent de modifier des paramètres s'appliquant au tableau. On peut spécifier l'épaisseur de la bordure en pixels avec l'attribut border. La largeur du tableau est spécifiée avec l'attribut width qui prend soit une valeur en pixels, soit un pourcentage qui représente la largeur relative par rapport à l'élément contenant le tableau. Enfin, on peut modifier l'alignement horizontal du tableau avec l'attribut align. L'exemple suivant illustre l'utilisation de ces trois attributs.

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
<HTML>
<HEAD>
    <TITLE>Attributs de l'élément TABLE</TITLE>
 
<BODY>
    <P>Ultratop Singles 20/06/2009 (Top 3) :
 
    <TABLE border="5" width="70%" align="center">
        <TR>
            <TD>1
            <TD>The Black Eyes Peas
            <TD>Boom Boom Pow
        <TR>
            <TD>2
            <TD>David Guetta feat. Kelly Rowland
            <TD>When Love Takes Over
        <TR>
            <TD>3
            <TD>Helmut Fritz
            <TD>Ça m'énerve
    </TABLE>
Listing 4.2 Attributs de l'élément TABLE.
Attributs de l'élément TABLE
Figure 4.2 Attributs de l'élément TABLE.

Remarquez que le tableau est fort collé au paragraphe de texte. Pour éviter ce problème, vous devez absolument utiliser la balise fermante </P> à la fin du paragraphe.

Résumé du tableau

On peut ajouter un résumé du tableau en utilisant l'attribut summary. Cette description pourra par exemple être utilisée pour apporter un résumé du contenu du tableau, ou bien des informations complémentaires comme un lien ou une référence.

1 
 
2 
3 
<TABLE border="1" width="220" summary="Ce tableau illustre l'évolution des quantités d'énergie verte utilisée en moyenne entre les années 2000 et 2006.">
...
</TABLE>
Listing 4.3 Description longue d'un tableau avec l'attribut summary.

On verra un peu plus tard dans ce chapitre comment ajouter une description courte, ou légende, à un tableau car les descriptions longues ne sont pas affichées directement par tous les navigateurs. Avec Firefox, on peut installer l'extension Table Inspector qui permet d'afficher le résumé comme montré sur la figure suivante.

Description longue d'un tableau avec l'attribut summary sous Firefox avec l'extension TableInspector
Figure 4.3 Description longue d'un tableau avec l'attribut summary sous Firefox avec l'extension TableInspector.

Ligne de tableau

Chaque ligne d'un tableau est représentée par l'élément TR (table row). La balise fermante est optionnelle. Grâce aux attributs de cet élément, on va pouvoir agir directement sur toute la ligne. On y reviendra à la section suivante.

Cellule de tableau

Enfin, chaque ligne du tableau est composée de cellules dans lesquelles on va pouvoir mettre du texte. Il y a deux éléments qui représentent des cellules : l'élément TD (table data) et l'élément TH (table head). La balise fermante pour ces deux éléments est optionnelle.

La différence entre les deux éléments est que le premier permet de représenter une simple cellule tandis que le second représente une cellule d'entête. Le contenu de ces cellules sera par défaut rendu en gras et centré. On peut spécifier la largeur d'une cellule avec l'attribut width qui prend une valeur en pixels ou un pourcentage par rapport à la largeur totale du tableau.

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
<HTML>
<HEAD>
    <TITLE>Cellules d'un tableau</TITLE>
 
<BODY>
    <TABLE border="2" width="450">
        <TR>
            <TH width="310">Titre
            <TH width="140">Auteur
        <TR>
            <TD>Je suis né un jour bleu
            <TD>Daniel Tammet
        <TR>
            <TD>Le Monde et l'énergie - Enjeux géopolitiques
            <TD>Samuele Furfari
        <TR>
            <TD>Deep Survival: Who Lives, Who Dies, and Why
            <TD>Laurence Gonzales
    </TABLE>
Listing 4.4 Cellules d'un tableau.
Cellules d'un tableau
Figure 4.4 Cellules d'un tableau.

Vous remarquerez qu'il suffit de spécifier la largeur des cellules pour la première ligne. Celles des autres lignes auront nécessairement les mêmes largeurs.

  • Espace membre
  • Learning Center
  • Les forums
  • Livre d'or
  • Imprimer
  • Boutique
  • Info
  • Règlement
  • Erreur
  • Newsletter

MyPagerank.Net

Firefox 3.6

Browse Happy logo

Open Clip Art Library

Join our Facebook Group

Twitter

Copyright © 2000-2017 UKO. Toute reproduction strictement interdite sans autorisation du webmaster

Valid XHTML 1.1 !
Valid CSS2 !
Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0
ICRA Internet Content Rating Association
Creative Commons License
Site optimisé pour Firefox avec une résolution 1024x768 --- Page chargée en 0.0634320 secondes --- This site uses Thumbshots previews