Les tableaux

Comme leur nom l'indique, les tableaux permettent de présenter à l'écran des données sous forme de grille. Mais nous verrons par la suite qu'ils sont très utiles également pour réaliser une mise en page plus complète qu'avec les tags usuels, car il est possible de ne pas dessiner les contours de trame.

1. Définition d'un tableau

Un tableau est ouvert par la balise <TABLE> et doit être fermé par la balise </TABLE>. Comme à chaque fois, nous vous conseillons de taper le tag de fermeture immédiatement après celui d'ouverture pour ne pas l'oublier !

Exercice : créez une page HTML dont le titre est "Page avec tableau" et dans laquelle vous allez ouvrir un tableau.

Cliquez ici pour voir la réponse, mais ne trichez pas, cherchez avant !

Il faut maintenant décider si l'on veut faire apparaître ou non les lignes et les colonnes du tableau. C'est ici qu'il faut définir la notion d'attribut.
Un attribut est une commande rajoutée à une balise HTML, permettant de fixer la valeur de certains paramètres de cette balise.

a. L'attribut BORDER

L'attribut BORDER va permettre de définir l'épaisseur des traits du tableau.
Exemple : <TABLE BORDER=4> </TABLE> va créer un tableau dont l'épaisseur des contours sera de 4 pixels. On peut aller de 1 à 9 et si l'on écrit BORDER="none" les contours n'apparaîtront pas (ce qui est très utile pour faire les mises en page, il suffit en effet de mettre les différents objets dans un tableau sans bord et le lecteur n'y verra que du feu !).

b. L'attribut CELLSPACING

Il permet de définir l'espace entre les cases (ou cellules).
Exemple : <TABLE CELLSPACING=3> </TABLE>
La valeur peut aller de 1 à 9.

c. L'attribut CELLPADDING

Il permet de fixer l'espace de la bordure des cellules.
Exemple : <TABLE CELLPADDING=3> </TABLE>
La valeur peut aller de 1 à 9.

2. Construction du tableau

Il faut prévoir à l'avance le nombre de colonnes et le nombre de lignes dont sera composé le tableau. Il est préférable de faire une ébauche au brouillon. Un tableau en HTML est toujours rectangulaire et se fait ligne par ligne. Un tableau peut avoir un titre, mais il n'est pas obligatoire.

Pour créer une ligne et la fermer, il faut taper le tag <TR> </TR>.

Losqu'on est dans la ligne, pour passer d'une colonne à l'autre, il faut taper le tag <TD>.

Si l'on veut que la première ligne soit une ligne d'en-têtes, il faut remplacer le tag <TD> par le tag <TH>.

Le titre du tableau peut être spécifié avec la balise <CAPTION> </CAPTION>.

3. Attributs des balises <TR> , <TD> , <TH> et <CAPTION>

a. L'attribut ALIGN

Il permet de préciser la position des données du tableau par rapport au quadrillage. Il a 3 valeurs possibles : LEFT, CENTER, RIGHT, selon que l'on veut cadrer les données à gauche, au milieu ou à droite.

b. L'attribut VALIGN

C'est le pendant de l'attribut ALIGN mais en vertical ! Il peut prendre les valeurs TOP, MIDDLE, BOTTOM, selon que l'on veut cadrer en haut, au milieu ou en bas de la cellule.

c. Cas particulier

La balise <CAPTION> n'admet qu'un seul attribut (ALIGN) pouvant prendre les 2 valeurs TOP ou BOTTOM selon que l'on veut faire apparaître le titre du tableau au-dessus ou en-dessous de celui-ci.

4. Comment fixer la largeur d'un tableau ?

Par défaut, la taille du tableau dépend de la plus grande longueur du contenu des cellules. Si vous souhaitez fixer la largeur de votre tableau pour améliorer votre mise en page, il suffit de rajouter l'attribut WIDTH à la balise <TABLE>. Deux cas se présentent :
<TABLE WIDTH=60%>
permet de fixer la largeur du tableau de telle manière qu'il occupe 60 % de la largeur totale de la page ;
<TABLE WIDTH=375>
permet de définir, au pixel près, la largeur d'occupation du tableau.

5. Comment fusionner plusieurs cellules adjacentes ?

Il arrive parfois que, pour des raisons esthétiques ou logiques, on ait besoin de fusionner une ou plusieurs cellules afin de faire disparaître le quadrillage. Deux attributs permettent cela. On les applique aux balises <TD> ou <TR>. L'attibut COLSPAN=x permet de fusionner les x cellules adjacentes d'une même colonne, tandis que l'attribut ROWSPAN=y permet de fusionner les y cellules adjacentes d'une même ligne.
Exemple : <TD COLSPAN=3>
Deux exemple de fusion de cellules
L'exemple Le code source
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
30 31 32 33 34 35
36 37 40 41 42
43 44 45 46 47 48 49 
<TABLE BORDER WIDTH="100%">
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD><TD>5</TD>
<TD>6</TD><TD>7</TD>
</TR>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD>8</TD><TD>9</TD><TD>10</TD><TD>11</TD><TD>12</TD>
<TD>13</TD><TD>14</TD>
</TR>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD>15</TD><TD>16</TD><TD>17</TD><TD>18</TD><TD>19</TD>
<TD>20</TD>
<TD>21</TD>
</TR>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD ROWSPAN="2">22</TD>
<TD>23</TD><TD>24</TD><TD>25</TD><TD>26</TD><TD>27</TD>
<TD>28</TD>
</TR>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD>30</TD><TD>31</TD><TD>32</TD><TD>33</TD><TD>34</TD>
<TD>35</TD>
</TR>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD>36</TD><TD COLSPAN="3">37</TD><TD>40</TD><TD>41</TD>
<TD>42</TD>
</TR>
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD>43</TD><TD>44</TD><TD>45</TD><TD>46</TD><TD>47</TD>
<TD>48</TD><TD>49</TD>
</TR>
</TABLE>

Exercice d'entraînement

Maintenant vous allez essayer de reproduire la page suivante en élaborant son code source HTML.
flècheRetourner au sommaire.