Chap. 3 LES TABLEAUX EN HTML

Transcription

1 LES TABLEAUX EN HTML Les principales balises concernant les tableaux : <table>, <tr>, <th>,<td> et <caption> La fusion (verticale ou horizontale) des cellules Définition des sections dans un tableau : <thead>, <tbody>, <tfoot> et <colgroup> Utilisation des tables pour la mise en page des documents HTML M. KRAJECKI 1 DESS IAS Année DÉFINITION D UN TABLEAU Un tableau est défini en HTML comme le regroupement d un ensemble de lignes Chaque ligne est composée d un ensemble de cellules Le début d un tableau est défini par la balise <table>, la balise </table> le termine M. KRAJECKI 2 DESS IAS Année

2 LES BALISES <TR> ET <TD> La balise <tr> introduit une nouvelle ligne qui est terminée par </tr> Chaque ligne du tableau aura exactement la largeur du tableau Toutes les lignes d un tableau possèdent exactement le même nombre de cellules que la ligne qui en comporte le plus Une cellule est définie par les balises <td> et </td> Une cellule peut contenir tout type d information (image, lien, liste,...) M. KRAJECKI 3 DESS IAS Année Un premier tableau <table> < t r > <! première l i g n e > < t d > Nom < / t d > <! première c e l l u l e > < t d > Prénom < / t d > < / t r > <! f i n de l a première l i g n e > < t r > <! seconde l i g n e > < t d > E n f a i l l i t e < / t d > < t d > Mélusine < / t d > < / t r > < t r > <! t r o i s i è m e l i g n e > < t d > Bonneau < / t d > < t d > Jean < / t d > < / t r > < / table> M. KRAJECKI 4 DESS IAS Année

3 Notre premier tableau! M. KRAJECKI 5 DESS IAS Année ATTRIBUTS DE <tr> bgcolor : la couleur de fond de chaque cellule composant la ligne. align : alignement horizontal à l intérieur des cellules de la ligne. 3 valeurs : left (par défaut), right et center valign : alignement vertical des éléments des cellules. 4 valeurs : top, bottom, baseline et middle (par défaut) Ces attributs seront appliqués à l ensemble des cellules de la ligne M. KRAJECKI 6 DESS IAS Année

4 ATTRIBUTS DE <td> bgcolor, align, valign comme pour <tr> Priorité à l attribut défini par la cellule width : largeur souhaitée (en pixels ou bien en pourcentage) de la cellule nowrap : interdiction pour le navigateur de réaliser des retours à la ligne automatique width et nowrap sont dépréciées M. KRAJECKI 7 DESS IAS Année LÉGENDES ASSOCIÉES À UN TABLEAU <th> : utilisée pour distinguer des cellules contenant des légendes (le contenu des cellules d en-tête sera centré et affiché en gras par défaut) <caption> : titre du tableau à définir entre <table> et </table>. Netscape utilise l attribut align qui accepte deux valeurs : top et bottom. Internet Explorer utilise l attribut valign qui accepte également les deux valeurs : top et bottom. De plus Internet Explorer permet de préciser l alignement horizontal du titre par l intermédiaire de l attribut align qui accepte trois valeurs : left, right et center. M. KRAJECKI 8 DESS IAS Année

5 LES ATTRIBUTS NÉCESSAIRES À LA MISE EN FORME : table align : définit la position d un tableau par rapport à la marge, trois valeurs : left, right ou center. A éviter, voir positionnement de tout objet à l aide de la balise <div>. width : la largeur du tableau, en pixels ou bien en pourcentage de la largeur de son environnement. cellspacing : espace (en pixels) qui existe entre chaque cellule du tableau. cellpadding : espace entre le bord de la cellule et son contenu en pixel. border : contrôle l affichage des bordures du tableau. L affichage de ces bordures est très différent d un navigateur à l autre. Pour désactiver l affichage des bordures : <table border= 0 > bgcolor : la couleur de fond du tableau. M. KRAJECKI 9 DESS IAS Année Exemple... <table border= " 2 " cellspacing= " 5 " cellpadding= " 10 " width= " 400 " bgcolor=" l i g h t y e l l o w " > <c a p t i o n align= " bottom " valign= " bottom " > <font color = " purple " > L i s t e des a u d i t e u r s < / font> < / c a p t i o n> < t r bgcolor= " white " > < t h > <font color = " purple " > Nom < / font> < / t h > < t h > <font color = " purple " > Prénom < / font> < / t h > < t h > <font color = " purple " > V i l l e < / font> < / t h > < t d > E n f a i l l i t e < / t d > < t d > Mélusine < / t d > < t d > Reims < / t d > < / t r > < t r align= " r i g h t " > < t d > Bonneau < / t d > < t d > Jean < / t d > < t d > Epernay < / t d > < / t r > < / table> M. KRAJECKI 10 DESS IAS Année

6 Le résultat M. KRAJECKI 11 DESS IAS Année FUSION DE CELLULES le navigateur fait l hypothèse que : toutes les lignes ont le même nombre de cellules toutes les colonnes ont le même nombre de lignes En HTML, des cellules un peu particulières existent, les cellules de recouvrement fusion horizontale (une cellule occupant plusieurs colonnes), attribut colspan fusion verticale : attribut rowspan M. KRAJECKI 12 DESS IAS Année

7 FUSION HORIZONTALE <table border= " 1 " > < t r > < t h colspan= " 2 " > S c i e n t i f i q u e < / t h > < t h colspan= " 3 " > Date de naissance < / t h > < t h > Nom < / t h > < t h > Prénom < / t h > < t h > Jour < / t h > <t h > Mois < / t h > < t h > Année < / t h > < t d > NOLLET < / t d > <t d > Jean Antoine < / t d > < t d > 1 9 < / t d> < t d > novembre < / t d > < t d > 1700 < / t d > < t d > POINCARÉ < / t d > < t d > Henri < / t d > < t d > 2 9 < / t d> < t d > a v r i l < / t d > < t d > 1854 < / t d > < / t r > < / table> M. KRAJECKI 13 DESS IAS Année Et voila M. KRAJECKI 14 DESS IAS Année

8 FUSION VERTICALE <table border= " 1 " > < t r > < t h > D i s c i p l i n e < / t h > < t h colspan= " 2 " > S c i e n t i f i q u e < / t h > < t h > < / t h > <! une c e l l u l e vide > < t h > Nom < / t h > < t h > Prénom < / t h > < t d rowspan= " 2 " > Médecine < / t d > < t d > PARÉ < / t d > <t d > Ambroise < / t d > < t d > PASTEUR < / t d > < t d > Louis < / t d > < t d > Chimie < / t d > < t d > DE LAVOISIER < / t d > <t d > Antoine Laurent < / t d > < / t r > < / table> M. KRAJECKI 15 DESS IAS Année Le beau tableau! M. KRAJECKI 16 DESS IAS Année

9 DÉFINITION DE PARTIES <thead>, <tbody> et <tfoot> : regroupement logique d un ensemble de lignes division en 3 parties : l en-tête, le corps et le pied impression d un tableau : reprise automatique des en-tête et pied de tableau sur chaque page imprimée attribut rules de la balise <table> : définit les lignes de séparation qui seront affichées 5 valeurs : none, groups, rows, cols, all Attention cependant à l utilisation de ces trois balises car elles ne sont pas reconnues par tous les navigateurs! M. KRAJECKI 17 DESS IAS Année Utilisation des parties <table border= " 1 " r u l e s = " groups " > <thead> <! l en t ê t e du tableau > < t r > <t h colspan= " 2 " > S c i e n t i f i q u e < / t h > < t h colspan= " 3 " > Date de naissance < / t h > < / t r > < / thead> < t f o o t > < t r > <t d colspan= " 5 " > <! l e bas du tableau > Les s c i e n t i f i q u e s f r a n ç a i s < / t d > < / t r > < / t f o o t > <tbody > <! l e corps du tableau > < t r > < t h > Nom < / t h > <t h > Prénom < / t h > < t h > Jour < / t h > <t h > Mois < / t h > < t h > Année < / t h > < t d > NOLLET < / t d > < t d > Jean Antoine < / t d > < t d > 1 9 < / t d > <t d > novembre < / t d > <t d > 1700 < / t d > < t d > POINCARÉ < / t d > < t d> Henri < / t d > < t d > 2 9 < / t d > <t d > a v r i l < / t d > < t d > 1854 < / t d > < / t r > < / tbody> < / table> M. KRAJECKI 18 DESS IAS Année

10 Le résultat M. KRAJECKI 19 DESS IAS Année REGROUPEMENT DE COLONNES Les balises <col> et <colgroup> regroupent explicitement un ensemble de colonnes en une partie Il s agit d un regroupement vertical Attributs align, valign, span et width Exemple : définition d un tableau de cinq colonnes Les cinq colonnes auront une largeur de 100 points Les trois premières colonnes seront alignées à droite M. KRAJECKI 20 DESS IAS Année

11 5 colonnes à la une <table border= " 1 " > <colgroup width= " 100 " > < c o l span= " 3 " align= " r i g h t " > < c o l span= " 2 " > < / colgroup > < t r > < t d > NOLLET < / t d > <t d > Jean Antoine < / t d > < t d > 1 9 < / t d> < t d > novembre < / t d > < t d > 1700 < / t d > < t d > POINCARÉ < / t d > < t d > Henri < / t d > < t d > 2 9 < / t d> < t d > a v r i l < / t d > < t d > 1854 < / t d > < / t r > < / table> M. KRAJECKI 21 DESS IAS Année MISE EN PAGE À L AIDE DES TABLEAUX Utilisation des tableaux pour obtenir une mise en page satisfaisante Généralement les tableaux sont invisibles car leur bordure est égale à zéro Réalisation de documents : 1. Sur deux (ou plusieurs) colonnes 2. Comportant des menus M. KRAJECKI 22 DESS IAS Année

12 DOCUMENT MULTI-COLONNES <table border= " 0 " cellspacing= " 0 " cellpadding= " 5 " width= " 800 " bgcolor= " l i g h t y e l l o w " > < t r > <t d width= " 400 " > <! l a colonne de gauche > <h1> Médecine < / h1> <p> V o i c i quelques chercheurs f r a n ç a i s célèbres en médecine : < / p> <ul type= " square " > < l i > PARÉ Ambroise < / l i > < l i > PASTEUR Louis < / l i > < / ul> < / t d > <! f i n de l a colonne de gauche > <t d > <! début de l a colonne de d r o i t e > <p> V o i c i quelques chercheurs f r a n ç a i s célèbres en chimie : < / p> <ul type= " square " > < l i > PALISSY Bernard < / l i > < l i > DE LAVOISIER Antoine Laurent < / l i > < / ul> < / t d > < / t r > < / table> M. KRAJECKI 23 DESS IAS Année colonnes... M. KRAJECKI 24 DESS IAS Année

13 > DES MENUS À L AIDE DE TABLEAUX Définir un menu, soit horizontal, soit vertical Chaque cellule contiendra par exemple un lien vers le document associé à l entrée du menu. Exemple : création d un petit menu qui permet l accès à trois informations Définition de 3 liens internes au document M. KRAJECKI 25 DESS IAS Année Exemple de menu <table bgcolor=" cyan " cellspacing=" 0 " cellpadding= " 1 " border=" 0 " width= " 600 " > <! un p e t i t menu > < t r > <t h width= " 200 " > <a href= " #med" > Médecine < / a> < / t h > <t h width= " 200 " > <a href= " # c h i " > Chimie < / a> < / t h > <t h > <a href=" #mat " > Mathématiques < / a> < / t h > < / t r > < / table> <! l a page <a name= "med" > <h1> Médecine < / h1> < / a> <ul type=" c i r c l e " > < l i > Ambroise PARÉ < / l i > < l i > Louis PASTEUR < / l i > < / ul> <a name= " c h i " > <h1> Chimie < / h1> < / a> <ul type=" c i r c l e " > < l i >Bernard PALISSY < / l i >< l i >Antoine Laurent DE LAVOISIER< / l i >< / ul> <a name= " mat " > <h1> Mathématiques < / h1> < / a> <ul type=" c i r c l e " > < l i > Augustin Louis CAUCHY < / l i > < l i > Henri POINCARÉ < / l i > < / ul> M. KRAJECKI 26 DESS IAS Année

14 Un menu M. KRAJECKI 27 DESS IAS Année