Structure de base:
<TABLE> </TABLE>
<TABLE> </TABLE>
indique au navigateur le d
indique au navigateur le début et la fin d'une table ébut et la fin d'une table Pour d
Pour déécrire le tableau, on utilise ensuite les balises : crire le tableau, on utilise ensuite les balises : <TR> </TR>
<TR> </TR> ((TTable able RRowow): D): Dééfinit une ligne du tableau. finit une ligne du tableau. Pour ajouter une l
Pour ajouter une ligne au tableau. igne au tableau. <TD> </TD>
<TD> </TD> ((TTable able DDataata): Dé): Définit une séfinit une série de cellules de donnrie de cellules de donnéées es (qui pourront c
(qui pourront contenir du texte, desontenir du texte, des images, une tab
images, une table...).le...). <TH> </TH>
<TH> </TH> ((TTable able HHeadead):): DDééfinit une cellule contenant un titrefinit une cellule contenant un titre (intitul
(intituléé) de colonne ou de ligne. ) de colonne ou de ligne. Le r
Le réésultat sultat àà l'affichage est un textel'affichage est un texte
ATTRIBUTS
ATTRIBUTS
WIDTH="x"
WIDTH="x" largeur du tableau (nombre ou % par rapport largeur du tableau (nombre ou % par rapport àà lala largeur de la fenêtre)
largeur de la fenêtre)
HEIGHT="x"
HEIGHT="x" hauteur du tableau (nombre en pixels ou %)hauteur du tableau (nombre en pixels ou %)
BORDER=
BORDER="x""x" taille de la bordure ou taille de la bordure ou éépaisseur de lpaisseur de l’’ombrage ombrage (1 par d
(1 par dééfaut)faut)
BGCOLOR=
BGCOLOR=couleurcouleur couleur de fond des cellulescouleur de fond des cellules
BACKGROUND
BACKGROUND pour utiliser une image comme fond pour la tablepour utiliser une image comme fond pour la table
CELLSPACING
CELLSPACING="x"="x" largeur des bordures = espace entre deux cellules largeur des bordures = espace entre deux cellules du tableau
du tableau
CELLPADDING
CELLPADDING="x"="x" espace libre (pixels) entre le texte et le bord de laespace libre (pixels) entre le texte et le bord de la cellule qui le contient
cellule qui le contient
ALIGN
ALIGN alignementalignement: left, right, center: left, right, center
COLLSPAN="n"
COLLSPAN="n" fusion de fusion de colonnescolonnes sursur uneune mêmemême ligneligne ( td et ( td et thth ))
Body Body ––
Les TableauxLes Tableaux
C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L
<HTML>
<HTML>
<HEAD> <TITLE>exemple1 tableau</TITLE> </HEAD>
<HEAD> <TITLE>exemple1 tableau</TITLE> </HEAD>
<BODY BGCOLOR="#00FF00" >
<BODY BGCOLOR="#00FF00" >
<CENTER> <table border=5 BORDERCOLOR=
<CENTER> <table border=5 BORDERCOLOR=redred CELLSPACING=10CELLSPACING=10 cellpadding
cellpadding=10 =10 widthwidth=80% =80% heigthheigth="80" > ="80" > <tr
<tr bgcolorbgcolor==yellowyellow>> <td>1
<td>1--1</td> <td> 11</td> <td> 1--2 </td> <td> 12 </td> <td> 1--3 </td> <td> 13 </td> <td> 1--4 </td>4 </td> </tr>
</tr>
<tr
<tr bgcolorbgcolor==blueblue>> <td>2
<td>2--1</td> <td> 21</td> <td> 2--2 </td> <td> 22 </td> <td> 2--3 </td> <td> 23 </td> <td> 2--4 </td>4 </td> </tr>
</tr>
<tr
<tr bgcolorbgcolor=black>=black> <td><font
<td><font colorcolor=white>3=white>3--1</td> <td> <font 1</td> <td> <font colorcolor=white>3=white>3--2 </td>2 </td> <td> <font
<td> <font colorcolor=white>3=white>3--3</td> <td> <font 3</td> <td> <font colorcolor=white>3=white>3--4 </td>4 </td> </tr
</tr bgcolorbgcolor==yellowyellow>> <tr> <td>4
<tr> <td>4--1</td> <td> 41</td> <td> 4--2 </td> <td> 42 </td> <td> 4--3</td> <td> 43</td> <td> 4--4 </td> </tr>4 </td> </tr>
Body Body ––
Les TableauxLes Tableaux
C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L
BGCOLOR="#00FF00" border=5 BORDERCOLOR=red
CELLSPACING=10 cellpadding=10 <tr bgcolor=yellow>
<tr bgcolor=blue> <tr bgcolor=black>
<HTML>
<HTML>
<HEAD> <TITLE>exemple tableau</TITLE> </HEAD>
<HEAD> <TITLE>exemple tableau</TITLE> </HEAD>
<BODY BGCOLOR="#00FFFF" >
<BODY BGCOLOR="#00FFFF" >
<CENTER> <table border=10 CELLSPACING=25
<CENTER> <table border=10 CELLSPACING=25 cellpaddingcellpadding=8 =8 widthwidth=80%=80% heigth
heigth="80" BORDERCOLOR="#000000"> ="80" BORDERCOLOR="#000000"> <tr
<tr bgcolorbgcolor==yellowyellow>> <th
<th colspancolspan=2 =2 rowspanrowspan=2> <font size="6"> 1=2> <font size="6"> 1--1 </th> 1 </th> <th> <font size="4">1 <th> <font size="4">1--3 </th> <th> 13 </th> <th> 1--4 </th>4 </th> </tr> </tr> <tr> <td> 2 <tr> <td> 2--3 </td> <td> 23 </td> <td> 2--4 </td> </tr>4 </td> </tr> <tr> <tr> <td>3
<td>3--1</td> <td 1</td> <td rowspanrowspan=2> <font =2> <font colorcolor==redred>3>3--2 </td>2 </td> <td
<td colspancolspan=2 =2 rowspanrowspan=2> 3=2> 3--3</td>3</td> </tr>
</tr>
<tr> <td
<tr> <td bgcolorbgcolor==redred>4>4--1</td> </tr>1</td> </tr>
<CAPTION ALIGN="UP"><B> Tableau</B> : cellules de diff
<CAPTION ALIGN="UP"><B> Tableau</B> : cellules de difféérentes taillesrentes tailles </CAPTION>
</CAPTION>
Body Body ––
Les TableauxLes Tableaux
C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L
BGCOLOR="#0099FF" border=2 BORDERCOLOR="#000000"
<CAPTION ALIGN="UP"> <tr bgcolor=yellow> <th colspan=2 rowspan=2> <td colspan=2> <td rowspan=2>
Body Body ––
Les TableauxLes Tableaux
Exercice: r
Body Body ––
Les TableauxLes Tableaux
C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L <HTML> <HTML>
<HEAD> <TITLE>9eme tableau</TITLE> </HEAD>
<HEAD> <TITLE>9eme tableau</TITLE> </HEAD>
<BODY >
<BODY >
<CENTER> <table border=10 CELLSPACING=20
<CENTER> <table border=10 CELLSPACING=20 cellpaddingcellpadding=10 =10 widthwidth=80%=80% heigth
heigth="80" BORDERCOLOR="#000000"> ="80" BORDERCOLOR="#000000"> <tr
<tr bgcolorbgcolor==blueblue> <th>1> <th>1--1</th> <th 1</th> <th colspancolspan=3><font size="6"> 1=3><font size="6"> 1--2 </th> 2 </th> <td
<td rowspanrowspan=4>1=4>1--5 </td>5 </td> </tr>
</tr>
<tr
<tr bgcolorbgcolor==yellowyellow>> <td> 2
<td> 2--1 </td> <td> 21 </td> <td> 2--2 </td> <td> 22 </td> <td> 2--3 </td> <td 3 </td> <td rowspanrowspan=4>2=4>2--4</td>4</td> </tr>
</tr>
<tr
<tr bgcolorbgcolor==redred>> <td> 3
<td> 3--1 </td> <td 1 </td> <td colspancolspan=2 =2 rowspanrowspan=2> 3=2> 3--2 </td> 2 </td> </tr>
</tr>
<tr
<tr bgcolorbgcolor="#00FFAA">="#00FFAA"> <td>4
<td>4--1</td>1</td> </tr>
</tr>
<tr
<tr bgcolorbgcolor="#00FFAA">="#00FFAA"> <td
<td colspancolspan=3>5=3>5--1</td> <td> 51</td> <td> 5--5 </td>5 </td> </tr>
Le corps du document Le corps du document --
Body Body
Les paragraphes de texteLes paragraphes de texte
La mise en forme de texteLa mise en forme de texte
Les niveaux de titresLes niveaux de titres
Les tableauxLes tableaux
Les listesLes listes
Les imagesLes images
Les formulairesLes formulaires