TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels HTML tableau Lévis Thériault, hiver 2009
Structure d un tableau <table> <caption> </caption> <th> </th> <th> </th> <td> </td> <td> </td> </table> Balise de tableau Titre du tableau Balise de ligne (table row, tr) Balise d'entête de colonne (table header, th) Balise de cellule (table data, td) Chaque <td> </td> donne une colonne Balise de fin de ligne Balise de fin de tableau Note: Pour obtenir un cadre, on ajoute l'attribut border : <table border= > 2
Attributs Balise Attributs Valeurs possibles Description <table> </table> border= pixels un tableau largeur de la bordure des cellules du tableau width= %, pixels largeur du tableau height= %, pixels hauteur du tableau cellspacing= pixels espacement des cellules du tableau cellpadding= pixels marge intérieure des cellules une ligne dans un tableau align= left, center, right, justify position horizontale du texte dans cette ligne valign= top, middle, bottom position verticale du texte dans cette ligne <td> </td> <th> </th> height= width= colspan= rowspan= %, pixels %, pixels entier entier une cellule dans un tableau (td : données; th : entête) hauteur de la cellule largeur de la cellule nombre de colonnes sur lesquelles s'étend la cellule nombre de lignes sur lesquelles s'étend la cellule 3
Exemple <html> <head><title>tableau</title></head> <body> <p>voici un tableau :</p> <table border=1> <caption>titre du tableau</caption> <tr align="center"> <th colspan=2>col 1 et 2</th> <th>col 3</th> <tr align="center"> <td rowspan=2>1a</td> <td>2</td> <td>3</td> <tr align="center"> <td>b</td> <td>c</td> </table> </body></html> 4
Exemple <table border=1> <caption> Titre du tableau</caption> <tr align="center"> <th colspan=2>col 1 et 2</th> <th>col 3</th> <tr align="center"> <td rowspan=2>1a</td> <td>2</td> <td>3</td> <tr align="center"> <td>b</td> <td>c</td> </table> 5
Dimension d'un tableau et/ou de cellules Exprimée en pixels ou en % de la taille de la fenêtre où se situe le tableau Pour dimensionner : Un tableau : mettre les attributs dans la balise : <table width="..." height="..." > Une cellule : mettre les attributs dans la balise : <td width="..." height="..."> ou <th width="... " height=" "> 6
Exemples de dimension Dimensions relatives : <table width="65%"> : occupe 65% de la largeur de l'objet qui le contient. <table height="20%"> : occupe 20% de la hauteur de l'objet qui le contient Dimensions absolues : <table width="500"> : le tableau occupe une largeur de 500 pixels. <table height="30"> : le tableau occupe une hauteur de 30 pixels. 7
Fusion de cellules Fusion des 2 premières cellules sur la 1e ligne Fusion des 3 premières cellules dans la 2e colonne 8
Fusionner des cellules 2 façons: Fusionner des colonnes <td colspan="2"> Fusionne 2 colonnes </td> Fusionner des lignes <td rowspan="4"> Fusionne 4 lignes </td> 9
Exemple de fusion de 2 colonnes <table border="1"> <td colspan="2">2 colonnes fusionnées</td> <td>100</td> <td>200</td> <td>250</td> <td>275</td> <td>300</td> <td>350</td> <td>375</td> </table> 10
Exemple de fusion de 4 lignes <table border="1"> <td>1000</td> <td rowspan="4">fusion de 4 lignes</td> <td>3000</td> <td>1500</td> <td>3500</td> <td>1700</td> <td>3700</td> <td>1800</td> <td>3800</td> <td>1900</td> <td>2900</td> <td>3900</td> </table> 11
Exemple de COLSPAN 12
Exemple de ROWSPAN 13
Exercice Tableau 14
Exercice Tableau 15
Exercice Tableau 16
Exercice Tableau 17
Références Bodain, Y., Fiset, J-Y., Pilon, A. (2000). Notes de cours 4-720-00, HEC Montréal. Moïse, A. (2007). Notes de cours 30-774-01, HEC Montréal. http://www.w3schools.com/html/default.asp 18