INF2005– Programmation web– A. Obaid Utilisation avancée des tableaux.

Présentation au sujet: "INF2005– Programmation web– A. Obaid Utilisation avancée des tableaux."— Transcription de la présentation:

1 INF2005– Programmation web– A. Obaid Utilisation avancée des tableaux

2 INF2005– Programmation web– A. Obaid Couleur de fond On utilise l'attribut bgcolor. – bgcolor=nombre|nom: La couleur donnée par son code hexadécimal ou son nom. On peut l'appliquer à la table, une ligne, une cellule ou un en-tête. Couleur de fond d'un tableau Symbole Code HTML Entité HTML Nom £ £ £ pound ¥ ¥ ¥ yen € € € euro CouleurTable.html 2

3 INF2005– Programmation web– A. Obaid Bordures On peut : – spécifier la bordure du tableau (border) – spécifier le cadres de la table (frames) – modifier les lignes entres cellules que l'on veut tracer (rules). Attributs: border="nombre": largeur du cadre frame ="void|above|below|hsides| vsides|l hs| rhs " rules=none| rows|cols|all Exemple de tableau Exemple de tableau Nom Test 1 (20%) Test 2 (30%) Jean 17 25 Annie 14 22 Michel 12 27 table3.html 3

4 INF2005– Programmation web– A. Obaid Légendes permet d'ajouter une légende à une table. On peut aussi spécifier sa position avec l'attribut align. – align="top|bottom|left|right. 4

5 INF2005– Programmation web– A. Obaid Tableaux - Espacement On peut spécifier l'espacement inter-cellules et intra-cellule: – cellspacing : espace entre cellules. – cellpadding : espace entre le contenu d'une cellule et son bord. Cellule 1.1 Cellule 1.2 Cellule 2.2 Cellule 2.2 espaTable.html 5

6 INF2005– Programmation web– A. Obaid Étalement de lignes et colonnes On peut spécifier l'étalement de lignes ou de colonnes de chaque élément (ou en-tête) de la table On utilise l'attribut: – colspan =nombre: pour spécifier le nombre de colonnes. – rowspan=nombre: pour spécifier le nombre de lignes On peut ainsi construire des configurations complexes de tables. rowspan=2 colspan=2 rowspan=3 6

7 INF2005– Programmation web– A. Obaid Cellule 1.1 Cellule 1.2 Cellule 1.3 Cellule 2.2 Cellule 2.3 Cellule 2.4 Cellule 3.2 etalTable.html Test Notes Type Nom Note 1 Note2 Quizs (10%) Intrduction (Chap 1 - chap 4) 4.1 3.1 Devoirs (20%) Travaux de programmation 8 9.5 headTable.html 7

8 INF2005– Programmation web– A. Obaid Tableaux imbriqués On peut placer un tableau dans le contenu d'une cellule On permet ainsi de construire des structures complexes 1 1 2 3 1 2 3 4 5 ImbriqueTable.html 8

9 INF2005– Programmation web– A. Obaid Un joli cadre ! On peut fabriquer de jolis cadres avec les tables imbriquées et les attributs cellspacing et cellpadding. frameTable.html 9

10 INF2005– Programmation web– A. Obaid Cellules vides On donner un contenu vide à une cellule: – On utilise la largeur de cette cellule On peut avoir une cellule blanche: – On peut utilise une balise dans effet imprimable (ex. ) Couleur de fond d'un tableau Table contenant des cellule vides ou blanches Cellule avec texte Cellule avec texte Cellule avec texte CellVideTable.html 10

11 INF2005– Programmation web– A. Obaid Backgrounds Il faut tenir compte du background dans la conception des tables. Couleur de fond d'un tableau Bienvenue a ma page bizarre ! Tableau avec une couleur de fond. Un exemple de table avec une couluer de fond. Cette couleur ne va pas necessairement avec l'image de fond. Ce n'est pas un tres bon choix ! Conseil On peut inclure le contenu de la page entiere dans la table...! Attention Utilisez les bonnes valeurs de weight et width ! backgroundTable.html 11

12 INF2005– Programmation web– A. Obaid Alignements On peut avoir des effets intéressants en ajustant les attributs align et valign dans les cellules – Remplacés par les styles. ALIGN VALIGN=MIDDLE VALIGN=TOP VALIGN=BOTTOM ALIGN=LEFT Est-ce une petite fleur dans une peau de vache ou une petite vache déguisee en fleur ? ALIGN=HIGHT Une petite fleur dans une peau de vache Une petite vache déguisee en fleur alignTable.html 12

13 INF2005– Programmation web– A. Obaid Tableaux et marges On peut utiliser l'attribut width avec des valeurs appropriées de pourcentage pour avoir des marges appropriées. – Ici, 80% centré laisse 10% de chaque coté. Impressions Une des premières choses que j’ai remarquée lors de mon arrivée à Montréal c’est que tout est beaucoup plus grand qu’en Europe. En France, il y a beaucoup de petites rues, … C’est sécurisant de savoir que je peux continuer de parler français et que la majorité des gens me comprennent. … margeTable.html 13

14 INF2005– Programmation web– A. Obaid Tableaux multi-colonnes Avec le même outil, on peut concevoir pages multi- colonnes. Colonne 1 Avec des tables on peut faire des colonnes de texte! On sépare ces colonnes par les colonnes vides d'une certaine (ex. 5%) (WIDTH="5%"). Colonne 2 On divise les 3 colonnes selon des pourcentages (WIDTH="30%"). On suppose que les trois colonnes sont d'egales longeuers. Colonne 3 Les separations de 10% laissent un reste de 30% pour cette dernière colonne (WIDTH="30%").. multicoltable.html 14

15 INF2005– Programmation web– A. Obaid Alignement des images Avec les attributs align et valign: align="top|bottom|middle|left|right " : spécifie l'alignement de l' image selon le texte qui l'entoure vspace: espace au dessus et en bas de l'image alignImage.html Histoire de la vache ! Il y avait autrefois sur les hauts plateaux de la Franche-Comté à la lisière des sapins un petit village … Il y avait autrefois sur les hauts plateaux de la Franche-Comté à la lisière des sapins un petit village … Il y avait autrefois sur les hauts plateaux de la Franche-Comté à la lisière des sapins un petit village … 15

16 INF2005– Programmation web– A. Obaid Tailles des images On peut créer un effet de perspective avec différentes tailles de l'image. Histoire de vaches ! taillesImage.html 16