Tutorial HTML
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 :
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 :
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 -->
<td> </td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<!-- ici oublié -->
<td></td>
</tr>
</table>
Affichage :
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