EXEMPLES DE TABLEAUX

Voici quelques exemples qui illustrent l'utilisation de la plupart des nouvelles balises de tableau.

Retour "Introduction HTML"


UN TABLEAU CLASSIQUE DE 3X2

A B C
D E F

<TABLE BORDER>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>

Table des matières


DEUX EXEMPLES DE L'ATTRIBUT "ROWSPAN" (hauteur d'une cellule exprimée en nombre de lignes)

Item 1 Item 2 Item 3
Item 4 Item 5

<TABLE BORDER>
	<TR>
		<TD>Item 1</TD>
		<TD ROWSPAN=2>Item 2</TD>
		<TD>Item 3</TD>
	</TR>
	<TR>
		<TD>Item 4</TD> <TD>Item 5</TD>
	</TR>
</TABLE>

Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7

<TABLE BORDER>
	<TR>
		<TD ROWSPAN=2>Item 1</TD>
	    	<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
	</TR>
	<TR>
		<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
	</TR>
</TABLE>

Table des matières


UN EXEMPLE DE L'ATTRIBUT "COLSPAN" (largeur d'une cellule exprimée en nombre de colonnes)

Item 1 Item 2
Item 3 Item 4 Item 5

<TABLE BORDER>
	<TR>
		<TD>Item 1</TD>
		<TD COLSPAN=2>Item 2</TD>
	</TR>
	<TR>
		<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
	</TR>
</TABLE>

Table des matières


LA BALISE <TH> COMME TITRE DE COLONNE

Titre 1 Titre 2 Titre 3
A B C
D E F

<TABLE BORDER>
	<TR>
		<TH>Titre 1</TH> <TH>Titre 2</TH> <TH>Titre 3</TH>
	</TR>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>	

Table des matières


LA COMBINAISON "COLSPAN ET <TH>"

Titre 1 Titre 2
A B C D
E F G H

<TABLE BORDER>
	<TR>
		<TH COLSPAN=2>Titre 1</TH>
	    	<TH COLSPAN=2>Titre 2</TH>
	</TR>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> 
	</TR>
	<TR>	
		<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> 
	</TR>
</TABLE>

Table des matières


LA COMBINAISON "COLSPAN" ET <TH> MULTIPLES

Titre 1 Titre 2
Titre 3 Titre 4 Titre 5 Titre 6
A B C D
E F G H

<TABLE BORDER>
	<TR>
		<TH COLSPAN=2>Titre 1</TH>
		<TH COLSPAN=2>Titre 2</TH>
	</TR>
	<TR>
		<TH>Titre  3</TH> <TH>Titre  4</TH> 
		<TH>Titre  5</TH> <TH>Titre  6</TH> 
	</TR>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> 
	</TR>
	<TR>
		<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> 
	</TR>
</TABLE>

Table des matières


LA BALISE <TH> COMME TITRE DE LIGNE

Titre 1 Item 1 Item 2 Item 3
Titre 2 Item 4 Item 5 Item 6
Titre 3 Item 7 Item 8 Item 9

<TABLE BORDER>
	<TR><TH>Titre 1</TH>
		<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>
	<TR><TH>Titre 2</TH>
		<TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR>
	<TR><TH>Titre 3</TH>
		<TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR>
</TABLE>

Table des matières


LA COMBINAISON "ROWSPAN" ET <TH>

Titre 1 Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7 Item 8
Titre 2 Item 9 Item 10 Item 3 Item 11

<TABLE BORDER>
	<TR><TH ROWSPAN=2>Titre 1</TH>
	    <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
	</TR>
	<TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item 8</TD>
	</TR>
	<TR><TH>Titre 2</TH>
	    <TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item 11</TD>
	</TR>
</TABLE>

Table des matières


UNE COMBINAISON DE L'ENSEMBLE

Moyenne
TaillePoids
Sexe Mâles1.90.003
Femelles1.70.002

<TABLE BORDER>
	<TR>	<TD><TH ROWSPAN=2></TH>
		<TH COLSPAN=2>Moyenne</TH></TD>
	</TR>
	<TR>	<TD><TH>Taille</TH><TH>Poids</TH></TD>
	</TR>
	<TR>	<TH ROWSPAN=2>Sexe</TH>
	    	<TH>Mâles</TH><TD>1.9</TD><TD>0.003</TD>
	</TR>
	<TR>	<TH>Femelles</TH><TD>1.7</TD><TD>0.002</TD>
	</TR>
</TABLE>

Table des matières


UNE HEUREUSE COMBINAISON DE "COLSPAN" ET "ROWSPAN"

A 1 2
3 4
C D

<TABLE BORDER>
	<TR>
		<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
		<TD>1</TD>
		<TD>2</TD>
	</TR>
	<TR>
		<TD>3</TD>
		<TD>4</TD>
	</TR>
	<TR>
		<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
		<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
	</TR>
	<TR>
	</TR>
</TABLE>

Table des matières


LES MARGES ET LES BORDURES

UN TABLEAU SANS BORDURE

Item 1 Item 2 Item 3
Item 4 Item 5

<TABLE>
	<TR>	<TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD> 
	</TR>
	<TR>	<TD>Item 4</TD> <TD>Item 5</TD> 
	</TR>
</TABLE>

Table des matières


UN TABLEAU AVEC UNE BORDURE DE 10

Item 1 Item 2
Item 3 Item 4

<TABLE BORDER=10>
	<TR>	<TD>Item 1</TD> <TD> Item 2</TD>
	</TR>
	<TR>	<TD>Item 3</TD> <TD>Item 4</TD> 
	</TR>
</TABLE>

Table des matières


LES ATTRIBUTS "CELLPADDING" ET "CELLSPACING"

A B C
D E F

<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>
A B C
D E F
<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>
A B C
D E F
<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>

A B C
D E F

<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>

Table des matières


ALIGNEMENTS, LÉGENDES ET TABLEAUX ENCHÂSSÉS

EXEMPLE DE TABLEAU À LIGNES MULTIPLES

Janvier Février Mars
Cellule 1 Cellule 2 Une autre cellule,
la cellule 3
Cellule 4 Et maintenant, voici
la cellule 5
Cellule 6

<TABLE BORDER>
	<TR>
		<TH>Janvier</TH>
		<TH>Février</TH>
		<TH>Mars</TH>
	</TR>
	<TR>
		<TD>Une cellule 1</TD>
	    	<TD>Cellule 2</TD>
	    	<TD>Une autre cellule,<br> la cellule 3</TD>
	</TR>
	<TR>
		<TD>Cellule 4</TD>
	    	<TD>et maintenant voici<br>la  cellule 5</TD>
	    	<TD>Cellule 6</TD>
	</TR>
</TABLE>


Table des matières


L'ATTRIBUT ALIGN=LEFT|RIGHT|CENTER

Peut s'appliquer à des lignes multiples
Janvier Février Mars
Texte centré Cellule 2 Une autre cellule,
Cellule 3
À droite Au centre Par défaut,
à gauche

<TABLE BORDER>
	<TR>
	    <TH>Janvier</TH>
	    <TH>Février</TH>
	    <TH>Mars</TH>
	</TR>
	<TR ALIGN=center>
	    <TD>Texte centré</TD>
	    <TD>Cellule  2</TD>
	    <TD>Une autre cellule,<br> Cellule  3</TD>
	</TR>
	<TR>
	    <TD ALIGN=right>À droite</TD>
	    <TD ALIGN=center>Au centre</TD>
	    <TD>Par défaut,<br>À gauche;/TD>
	</TR>
</TABLE>

Table des matières


L'ATTRIBUT "VALIGN"=TOP|BOTTOM|MIDDLE

Peut s'appliquer à des cellules individuelles ou à toute une ligne de cellules
Janvier Février Mars
Tout en haut Maintenant
voici la cellule 2
Cellule 3
En haut En bas Par défaut,
Au centre

<TABLE BORDER>
	<TR>
		<TH>Janvier</TH>
		<TH>Février</TH>
		<TH>Mars</TH>
	</TR>
	<TR VALIGN=top>
	    <TD>Tout en haut</TD>
	    <TD>Maintenant, voici la cellule 2</TD>
	    <TD>Cellule 3</TD>
	</TR>
	<TR>
	    <TD VALIGN=top>En haut</TD>
	    <TD VALIGN=bottom>En bas</TD>
	    <TD>Par défaut,<br>Au centre</TD>
	</TR>
</TABLE>

Table des matières


L'ATTRIBUT "CAPTION"=TOP|BOTTOM

La légende est au-dessus
Janvier Février Mars
Voici la cellule 1 Cellule 2 Une autre cellule,
La cellule 3

<TABLE BORDER>
<CAPTION ALIGN=top>A top CAPTION</CAPTION>
	<TR>
		<TH>Janvier</TH>
		<TH>Février</TH>
		<TH>Mars</TH>
	</TR>
	<TR>
		<TD>Voici la cellule 1</TD>
		<TD>Cellule 2</TD>
		<TD>Une autre cellule,<br> La cellule 3</TD>
	</TR>
</TABLE>

La légende est au-dessous
Janvier Février Mars
Voici la cellule 1 Cellule 2 Une autre cellule,
la cellule 3

<TABLE BORDER>
<CAPTION ALIGN=bottom>A bottom CAPTION</CAPTION>
	<TR>
		<TH>Janvier</TH>
		<TH>Février</TH>
		<TH>Mars</TH>
	</TR>
	<TR>
		<TD>Voici la cellule 1</TD>
		<TD>Cellule 2</TD>
		<TD>Une autre cellule,<br> la cellule 3</TD>
	</TR>
</TABLE>


Table des matières


TABLEAUX ENCHÂSSÉS: LE TABLEAU ABCD EST À L'INTÉRIEUR DU TABLEAU 123456

1 2 3
A B
C D
4 5 6

<TABLE BORDER>
	<TR> <!-- ROW 1, TABLE 1 -->
		<TD>1</TD>
		<TD>2</TD>
		<TD>3
		<TABLE BORDER>
			<TR> <!-- ROW 1, TABLE 2 -->
				<TD>A</TD>
				<TD>B</TD>
			</TR>
			<TR> <!-- ROW 2, TABLE 2 -->
				<TD>C</TD>
				<TD>D</TD>
			</TR>
		</TABLE>
		</TD>
	</TR>
	<TR> <!-- ROW 2, TABLE 1 -->
		<TD>4</TD>
		<TD>5</TD>
		<TD>6</TD>
	</TR>
</TABLE>

Table des matières


L'ATTRIBUT "WIDTH" (LARGEUR)

DEUX CELLULES À 50%

Largeur=50%Largeur=50%
34

<TABLE BORDER WIDTH="50%">
	<TR><TD>Largeur=50%</TD><TD>Largeur=50%</TD>
	</TR>
	<TR><TD>3</TD><TD>4</TD>
	</TR>
</TABLE>

La largeur du contenu détermine la largeur de la cellule2
34

<TABLE BORDER WIDTH="50%">
	<TR><TD>La largeur du contenu détermine la largeur de la cellule</TD><TD>2</TD>
	</TR>
	<TR><TD>3</TD><TD>4</TD>
	</TR>
</TABLE>

WIDTH=100%Voici le contenu 2
34

<TABLE BORDER WIDTH="100%">
	<TR><TD>WIDTH=100%</TD><TD>Voici le contenu 2 </TD>
	</TR>
	<TR><TD>3</TD><TD>4</TD>
	</TR>
</TABLE>

Table des matières


TABLEAU CENTRÉ

A B C
D E F
<CENTER>
<TABLE BORDER WIDTH="50%">
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>
</CENTER>

Table des matières


L'ATTRIBUT "WIDHT" DANS LES TABLEAUX ENCHÂSSÉS

Item 1Item 2
Item AItem B
Item 4

<TABLE BORDER WIDTH="50%">
	<TR><TD>Item 1</TD><TD>Item 2</TD>
	</TR>
	<TR><TD>
	    <TABLE BORDER WIDTH=100%>
		<TR><TD>Item A</TD><TD>Item B</TD>
		</TR>
	    </TABLE>
	    </TD>
	    <TD>Item 4</TD>
	</TR>
</TABLE>

Table des matières


L'ATTRIBUT "HEIGHT" (hauteur)=15%

HEIGHT=15% Item 2
34

<TABLE BORDER WIDTH="50%" HEIGHT="15%">
	<TR><TD>HEIGHT=15%</TD> <TD> Item 2</TD>
	</TR>
	<TR><TD>3</TD><TD>4</TD>
	</TR>
</TABLE>

Table des matières