LES TABLEAUX EN HTML - mathinfo.univ-reims.frmathinfo.univ-reims.fr/IMG/pdf/chap3-3.pdf ·...

Programmation WEB Chap. 3 – LES TABLEAUX EN HTML

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 2003-2004


DÉFINITION D’UN TABLEAU

– Un tableau est défini en HTML comme le regroupement d’unensemble 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



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,...)



Un premier tableau

< table>< t r > < ! �� première l i g n e �� >

< td> Nom < / td> < ! �� première c e l l u l e �� >< td> Prénom < / td>< / t r > < ! �� f i n de l a première l i g n e �� >

< t r > < ! �� seconde l i g n e �� >< td> E n f a i l l i t e < / td>< td> Mélusine < / td>

< / t r >< t r > < ! �� t r o i s ième l i g n e �� >

< td> Bonneau < / td>< td> Jean < / td>

< / t r >< / table>



Notre premier tableau !



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



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



LÉGENDES ASSOCIÉES À UN TABLEAU

– <th> : utilisée pour distinguer des cellules contenant des légendes (lecontenu 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 permetde préciser l’alignement horizontal du titre par l’intermédiaire del’attribut align qui accepte trois valeurs : “left”, “right” et

“center”.



LES ATTRIBUTS NÉCESSAIRES À LA MISE ENFORME : table

align : définit la position d’un tableau par rapport à la marge, trois valeurs :“left”, “right” ou “center”. A éviter, voir positionnement de toutobjet à l’aide de la balise <div>.

width : la largeur du tableau, en pixels ou bien en pourcentage de la largeurde 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 cesbordures est très différent d’un navigateur à l’autre. Pour désactiverl’affichage des bordures : <table border=”0”>

bgcolor : la couleur de fond du tableau.



Exemple

. . .< table border="2 " cellspacing=" 5 " cellpadding=" 10 "

width=" 400 " bgcolor=" l i g h t y e l l o w " ><cap t ion al ign=" bottom " valign=" bottom ">< font color=" purp le "> L i s t e des aud i teu rs < / font> < / cap t ion>

< t r bgcolor=" whi te ">< th> < font color=" purp le "> Nom < / font> < / th>< th> < font color=" purp le "> Prénom < / font> < / th>< th> < font color=" purp le "> V i l l e < / font> < / th>

< / t r > < t r >< td> E n f a i l l i t e < / td>< td> Mélusine < / td>< td> Reims < / td>

< / t r > < t r al ign=" r i g h t ">< td> Bonneau < / td>< td> Jean < / td>< td> Epernay < / td>

< / t r > < / table>



Le résultat



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), attributcolspan

– fusion verticale : attribut rowspan



FUSION HORIZONTALE

< table border="1 ">< t r >

< th colspan=" 2 "> S c i e n t i f i q u e < / th>< th colspan=" 3 "> Date de naissance < / th>

< / t r > < t r >< th> Nom < / th> < th> Prénom < / th>< th> Jour < / th> <th> Mois < / th> < th> Année < / th>

< / t r > < t r >< td> NOLLET < / td> <td> Jean� Antoine < / td>< td> 1 9 < / td>< td> novembre < / td>< td> 1700 < / td>

< / t r > < t r >< td> POINCARÉ < / td> < td> Henr i < / td>< td> 2 9 < / td>< td> a v r i l < / td>< td> 1854 < / td>< / t r > < / table>



Et voila



FUSION VERTICALE

< table border="1 ">< t r >

< th> D i s c i p l i n e < / th>< th colspan=" 2 "> S c i e n t i f i q u e < / th>

< / t r > < t r >< th> < / th> < ! �� une c e l l u l e v ide �� >< th> Nom < / th> < th> Prénom < / th>

< / t r > < t r >< td rowspan=" 2 "> Médecine < / td>< td> PARÉ < / td> <td> Ambroise < / td>

< / t r > < t r >< td> PASTEUR < / td> < td> Louis < / td>

< / t r > < t r >< td> Chimie < / td>< td> DE LAVOISIER < / td> <td> Antoine � Laurent < / td>

< / t r > < / table>



Le beau tableau !



DÉFINITION DE PARTIES

– <thead>, <tbody> et <tfoot> : regroupement logique d’un ensemblede 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 !



Utilisation des parties

< table border="1 " r u l e s=" groups "><thead> < ! �� l ’ en� t ê t e du tab leau �� >

< t r > <th colspan="2 "> S c i e n t i f i q u e < / th>< th colspan=" 3 "> Date de naissance < / th>

< / t r > < / thead>< t f o o t > < t r > <td colspan="5 "> < ! �� l e bas du tab leau �� >

Les s c i e n t i f i q u e s f r a n ç a i s < / td> < / t r > < / t f o o t ><tbody> < ! �� l e corps du tab leau �� >

< t r >< th> Nom < / th> <th> Prénom < / th>< th> Jour < / th> <th> Mois < / th> < th> Année < / th>

< / t r > < t r >< td> NOLLET < / td> < td> Jean � Antoine < / td>< td> 1 9 < / td> <td> novembre < / td> <td> 1700 < / td>

< / t r > < t r >< td> POINCARÉ < / td> < td> Henr i < / td>< td> 2 9 < / td> <td> a v r i l < / td> < td> 1854 < / td>

< / t r > < / tbody> < / table>



Le résultat



REGROUPEMENT DE COLONNES

– Les balises <col> et <colgroup> regroupent explicitement unensemble 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



5 colonnes à la une

< table border="1 "><colgroup width=" 100 ">

< co l span="3 " al ign=" r i g h t ">< co l span="2 ">

< / colgroup >< t r >

< td> NOLLET < / td> <td> Jean� Antoine < / td>< td> 1 9 < / td> < td> novembre < / td>< td> 1700 < / td>

< / t r > < t r >< td> POINCARÉ < / td> < td> Henr i < / td>< td> 2 9 < / td> < td> a v r i l < / td>< td> 1854 < / td>

< / t r >< / table>



MISE EN PAGE À L’AIDE DES TABLEAUX

– Utilisation des tableaux pour obtenir une mise en pagesatisfaisante

– Généralement les tableaux sont invisibles car leur bordure estégale à zéro

– Réalisation de documents :1. Sur deux (ou plusieurs) colonnes2. Comportant des menus



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 ><td 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> < / td> < ! �� f i n de l a colonne de gauche �� ><td> < ! �� 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> < / td> < / t r >< / table>



2 colonnes...



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



Exemple de menu

< table bgcolor=" cyan " cellspacing=" 0 " cellpadding=" 1 "border=" 0 " width=" 600 "> < ! �� un p e t i t menu �� >< t r ><th width=" 200 "> <a href="#med"> Médecine < / a> < / th><th width=" 200 "> <a href="# ch i "> Chimie < / a> < / th><th> <a href=" #mat "> Mathématiques < / a> < / th>< / 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=" ch 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>



Un menu


LES TABLEAUX EN HTML - mathinfo.univ-reims.frmathinfo.univ-reims.fr/IMG/pdf/chap3-3.pdf ·...

Documents

Transcript of LES TABLEAUX EN HTML - mathinfo.univ-reims.frmathinfo.univ-reims.fr/IMG/pdf/chap3-3.pdf ·...