Balises de tableau. - choisir des bordures à afficher - contrôler le quadrillage des cellules - traiter séparément les sections (en-tête, corps, pied)

Transcription

1 Les tableaux XHTML ne sont pas qu un bon moyen de présenter l information, mais aussi un bon outil de mise en page Les tableaux permettent de - choisir des bordures à afficher - contrôler le quadrillage des cellules - traiter séparément les sections (en-tête, corps, pied) 1

2 Structure d un tableau La balise <table> - Contient tous les éléments constituant un tableau Attributs - border : épaisseur de la bordure en pixels (! forme) - cellpadding : c est la marge entre le bord et le contenu des cellules - cellspacing : c est l espacement des cellules, en pixels - frame : affichage de la bordure extérieur du tableau 2

3 Structure d un tableau above below border box hsides lhs rhs vsides void valeur possibles de l attribut frame Bordure supérieure Bordure inférieure Bordure complète Identique à border Bordure à gauche et à droite Bordure à gauche Bordure à droite Bordure supérieure et inférieure Aucune bordure valeurs possibles de l attribut rules all cols groups none rows Quadrillage complet Quadrillage par colonnes uniquement Quadrillage des entités comme <thead>, <tbody>, Aucun quadrillage Quadrillage par ligne uniquement - rules : affichage du quadrillage du tableau - summary : résumé du contenu du tableau - width : largeur du tableau, en pixels ou en pourcentage de la largeur de la fenêtre 3

4 Structure d un tableau Exemple - <table border="2" cellpadding="4" frame="border" rules="all">... </table> Mais comment définir le nombre de lignes et de colonnes? 4

5 Lignes et colonnes La balise <tr> - définit une ligne de tableau Attributs - align : règle l alignement horizontal des cellules de la ligne (left, center, right ou justify) - valign : alignement vertical dans les cellules (top, middle, bottom ou baseline) - char et charoff :... attributs peu supportés 5

6 Lignes et colonnes Les balises <td> et <th> - définit une cellule (normale ou d en-tête). Une cellule d en-tête est rendue en gras et centrée Attributs - align : règle l alignement horizontal d une cellule - valign : règle l alignement vertical - colspan et rowspan : fusion de cellules - abbr, axis, scope, headers, char et charoff 6

7 Lignes et colonnes Fusion de cellules (<td> ou <th>) Sur plusieurs colonnes : attribut colspan - Exemple : <table><tr><td>c1</td><td>c2</td></tr> <tr><td colspan= 2 >C12</td></tr></table> C1 C2 C12 7

8 Lignes et colonnes Sur plusieurs lignes : attribut rowspan - Exemple : <table><tr><td rowspan= 2 >L12</td> <td>l1</td></tr> <tr><td>l2</td></tr></table> L1 L12 L2 8

9 Titre d un tableau La balise <caption> - Donne un intitulé au tableau Attribut - aucun Exemple - <caption> Table 1 - Budjet 2009 </caption> 9

10 Sections de tableaux La balise <thead> - définit la section d en-tête du tableau Attributs - align : alignement horizontal - valign : alignement vertical - char et charoff Contient au moins une ligne 10

11 Sections de tableaux La balise <tbody> - Définit le corps d un tableau Attributs - align : règle l alignement horizontale - valign : alignement verticale - char et charoff Contient au moins une ligne 11

12 Sections de tableaux La balise <tfoot> - Définit le pied d un tableau Attributs - align : règle l alignement horizontale - valign : alignement verticale - char et charoff Contient au moins une ligne 12

13 Sections de tableaux Exemple : - <table border= 0 width= 100% > <thead> <tr><th>2001</th><th>2002</th></tr> </thead> <tbody> <tr><td>23</td><td>42</td></tr> <tr><td>64</td><td>11</td></tr> </tbody> <tfoot> <tr><td>pour plus d info...</td></tr> </tfoot> </table> 13

14 Sections de tableaux La balise <colgroup> - regroupe certaines colonnes afin de leur appliquer des propriétés communes Attributs - align : règle l alignement horizontale - valign : alignement verticale - width : indique en pixels ou en valeur relative la largeur du groupe - span : indique le nombre de colonnes dans le groupe (1 par défaut) 14

15 Sections de tableaux Exemple - <colgroup span= 3 align= center valign= top > </colgroup> <tr> <td>c1 - centré en haut</td> <td>c2 - centré en haut</td> <td>c3 - centré en haut</td> <td>c4 - alignement par défaut</td> <tr> 15

16 Sections de tableaux La balise <col /> - indique quelles sont les propriétés d une colonne ou d un sous-groupe de colonnes dans un groupe Attributs - idem que <colgroup> 16

17 Sections de tableaux Exemple - <table border= 1 > <colgroup valign= top > <col align= center /> <col align= right /> </colgroup> <colgroup valign= bottom > <col align= center span= 2 > </colgroup> <tbody> <tr> <td>c1 - centrée haut</td> <td>c2 - à droite haut</td> <td>c3 - centrée bas</td> <td>c4 - centrée bas</td> </tr> </tbody> </table> 17