TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels

Dimension: px

Commencer à balayer dès la page:

Download "TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels"

Matthieu Hébert
il y a 8 ans
Total affichages :

1 TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels HTML tableau Lévis Thériault, hiver 2009

2 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

(table header, th) Balise de cellule (table data, td) Chaque <td> </td> donne une colonne Balise de fin

3 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

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

4 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

5 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

6 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

attributs dans la balise : <table width="..." height=".

7 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

<table height="20%"> : occupe 20% de la hauteur de l'objet qui le contient Dimensions

8 Fusion de cellules Fusion des 2 premières cellules sur la 1e ligne Fusion des 3 premières cellules dans la 2e colonne 8

9 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

10 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

11 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

12 Exemple de COLSPAN 12

13 Exemple de ROWSPAN 13

14 Exercice Tableau 14

15 Exercice Tableau 15

16 Exercice Tableau 16

17 Exercice Tableau 17

18 Références Bodain, Y., Fiset, J-Y., Pilon, A. (2000). Notes de cours , HEC Montréal. Moïse, A. (2007). Notes de cours , HEC Montréal. 18

Documents pareils

TD HTML AVEC CORRECTION

TD HTML AVEC CORRECTION On utilisera Notepad++ comme éditeur sur Windows Vous créez un répertoire www sous vos répertoires personnels et vous mettrez vos pages dedans. Créez vos fichiers HTML et n oubliez