Tutorial html (20)-Tableaux et mise-en-page

Tutorial HTML

Tableaux et mise-en-page

L'intérêt des tableaux ne se limite pas à la présentation d'informations en lignes et colonnes. Les tableaux sont très utiles pour disposer les données (textes et images) sur la page.

Principe : le "tag"/balise TABLE définit le tableau. A l'intérieur du tableau, on définit les lignes (balise TR), et dans chaque ligne on définit les cases (balise TD).

Un tableau simple, avec bordure

<table border>

	<tr>
                <td>A1</td>
                <td>A2</td>
	</tr>
	<tr>

                <td>B1</td>
                <td>B2</td>
	</tr>
</table>

Affichage :

A1	A2
B1	B2

Tableau avec différents attributs

Bordure de 12 pixels (border) et verdâtre, quadrillage épais de 9 pixels (cellspacing), 50% de largeur d'écran (width), 15 pixels d'écart avec le texte (cellpadding), cadré à droite (align) et différents alignements du contenu des cellules.

<table border=12 bordercolor=#CCCC88 width=50% cellspacing=9 cellpadding=15 align=right>

	<tr>
                <td align="center">A1</td>
                <td>A2</td>
	</tr>
	<tr>

                <td align=right>B1</td>
                <td>B2</td>
	</tr>
</table>

Affichage :

A1	A2
B1	B2

Le cadrage à droite du tableau entraîne la disposition à gauche du texte qui suit, ainsi qu'on doit normalement le vérifier ici.

Tableau avec des couleurs de fond, et utilisation de  


<!-- fond du tableau : bleu clair -->
<table border bgcolor=#ddddff>
<!-- fond de la ligne : vert clair -->
	<tr bgcolor=#ddffdd>
                <td>A1</td>
                <td>A2</td>

<!-- fond de la case : rouge clair -->
                <td bgcolor=#ffdddd>A3</td>
	</tr>
	<tr>
                <td>B1</td>

                <td>B2</td>
<!-- case vide avec &nbsp; -->
                <td>&nbsp;</td>
	</tr>
	<tr>

                <td>C1</td>
                <td>C2</td>
<!-- ici &nbsp; oublié -->
                <td></td>

	</tr>
</table>

Affichage :

A1	A2	A3
B1	B2
C1	C2

Fusions de lignes (rowspan) et de colonnes (colspan)

<table border>
	<tr>
                <td>A1</td>

                <td colspan="3" align="center">A2</td>
	</tr>
	<tr >
                <td rowspan=3 valign=top>B1</td>
                <td>B2</td>

                <td>B3</td>
                <td>B4</td>
	</tr>
	<tr>
                <td>C2</td>

                <td>C3</td>
                <td>C4</td>
	</tr>
	<tr>
                <td>D2</td>

                <td>D3</td>
                <td>D4</td>
	</tr>
</table>

Affichage :

A1	A2
B1	B2	B3	B4
	C2	C3	C4
	D2	D3	D4

Mise-en-page à l'aide d'un tableau

Noter la largeur (width=100%), l'absence de bordures (border=0), l'affichage de 3 puis deux colonnes.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <title>Exemple</title> 
 </head>
<body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#000080" alink="#FF0000">

<DIV ALIGN="CENTER">
<table bgcolor=#FFFFDD border=0 width=100%>
<tr>
    	<td align=left colspan="2" width=25%>
	<img src="logo.png" width=125 alt="Si vous liser ceci, 
        c'est que logo.png n'existe pas">
	</td>
	<td colspan="2">

	<br>
	<center><H1><U>EXEMPLE DE HOME PAGE</U></H1>
	<H3>Ceci est un tableau html</H3>
	</td>

	<td align=right colspan="2" width=25%>
	<img src="logotel.png" width=125 alt="Si vous liser ceci, 
        c'est que logotel.png n'existe pas">
	</td>
</tr>
<tr>
<td colspan="3">
<ul>

<li><a href="repert.htm#debut">REPERTOIRE</a></li>
<li><a href="http://special.shtml">INTRANET MAISON</a></li>
<li><a href="admin/index.html">Pages admin/test.</a></li>

</ul></td>
<td colspan="3">
<ul>    <li><a href="html/Welcome.html">Accueil public.</a></li>
</ul></td>
</tr>

<tr>
<td colspan="3">
<p>
<b><u>TRANSFERTS DE DONNEES</u></b><br>
<a href="public_ftp/tools/">Outils</a><br>

<a href="public_ftp/soft/acrobat/rp500fra.exe">Installer Acrobat Reader 5.00 en 
français</a> (11,2 Mo).
<br>
<a href="public_ftp/soft/Win9x/winzip80.exe">Installer Winzip version 
8.00</a> (1,2 Mo).
</p>
</td>
<td colspan="3">

<a href="ftp://92.168.1.199">Accès au serveur de fichiers</a><br>
<a href="ftp://public@92.168.1.199">Accès aux fichiers partagés
 (màj autorisée)</a><br>
</td>

</tr>
<tr>
<td colspan="3">
<p>
<b><u>DOCUMENTATION</u></b><br>
<a href="telcpt/html/index.html">Manuel Logiciel compta.</a></br>

<a href="mysql/manual_toc.html">Documentation MySQL.</a></br>
 
</p>
</td>
<td colspan="3">
<p>
 <br>
<a href="InfoCenter/Index.htm">Doc AS400 : IBM-AS400 InfoCenter.</a></br>

<a href="programming/INDEX.HTM">Doc programmation AS400.</a></br>
 
</p>
</td>
</tr>
<tr><td colspan=6 align="center">
<a href="http://www.apache.org/"><IMG SRC="apache_pb.png" ALT="
Powered by Apache" BORDER=0</a><small>The Apache 

<A HREF="manual/index.html">
documentation</A> has been included with this distribution.
</td></tr>
</table>
</DIV>
</body>
</html>

Cliquer ici pour afficher le résultat

Entete/corps/pieds (thead/tbody/tfoot)

L'entête et le pied doivent être définis avant le corps (body). Noter la présentation spécifique des cases TH.

<table border>
        <thead>

                <tr>
                        <th>Rubrique</th>
                        <th>Montant</th>
                </tr>
        </thead>

        <tfoot>
                <tr>
                        <td>Total</td>
                        <td align=right>350,00</td>
                </tr>

        </tfoot>
        <tbody>
                <tr>
                        <td>Sirop de carotte</td>
                        <td align=right>100,00</td>

                </tr>
                <tr>
                        <td>Bonbons au miel</td>
                        <td align=right>250,00</td>
                </tr>

        </tbody>
</table>

Affichage :

Rubrique	Montant
Total	350,00
Sirop de carotte	100,00
Bonbons au miel	250,00