SELFHTML: HTML/XHTML / Tableaux / Titres d'un tableau et alignement

	Titres d'un tableau et alignement
	Définir le titre du tableau / la légende du tableau Aligner des tableaux Autres informations

Définir le titre du tableau / la légende du tableau

Vous pouvez définir séparément du tableau un titre au tableau ou une légende sous celui-ci.

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<table border="1">
 <caption><big>Associations</big></caption>
 <tr>
  <th>France</th>
  <th>Belgique</th>
  <th>Suisse</th>
 </tr><tr>
  <td>quatre-vingts</td>
  <td>octante</td>
  <td>huitante</td>
 </tr><tr>
  <td>serpillière</td>
  <td>wassingue</td>
  <td>panosse</td>
 </tr>
</table>

</body>
</html>

Explication:

<caption>...</caption> définit un titre au tableau. L'élément doit être placé immédiatement derrière le repère d'ouverture <table>. Il occasionne un texte normal courant. Pour mettre en valeur le texte qu'il contient, le repère caption peut contenir des éléments incorporés comme éléments supplémentaires. Une autre possibilité consiste à formater le repère caption avec des feuilles de style.

Si vous ne mentionnez rien d'autre, le repère caption crée un titre placé au dessus du tableau. Pour créer une légende placée en bas du tableau, vous pouvez noter <caption align="bottom">. De plus, les mentions align="left" pour une légende sur le côté gauche et align="right" pour une légende sur le côté droit sont permises. Alors que align="bottom" est interprété par les navigateurs, align="left" et align="right" ne sont la plupart du temps pas soutenus ou pas soutenus correctement. L'attribut align= est en outre classé comme en cours d'abandon et doit donc disparaître à l'avenir du standard HTML. Des mentions de remplacement de CSS s'appliquant au repère caption ne sont pas soutenues par les navigateurs très répandus jusqu'à présent.

Aligner des tableaux

Vous pouvez aligner un tableau à gauche, au centre, à droite. Les navigateurs connus réagissent même de telle façon qu'un tableau, s'il est aligné à gauche ou à droite sans occuper toute la largeur disponible fait en sorte que le contenu qui le suit passe à son côté.

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<table border="1" align="left">
 <tr>
  <th>France</th>
  <th>Belgique</th>
  <th>Suisse</th>
 </tr><tr>
  <td>quatre-vingts</td>
  <td>octante</td>
  <td>huitante</td>
 </tr>
</table>

<p>Le tableau contient déjà son lot d'informations mais naturellement pas tout.
C'est pourquoi vous devriez plutôt voyager vous même.<br clear="all" Pas le temps, pas le fric?.></p>
<p>?Eh bien, faites le donc sur le WWW!</p>

<table border="1" style="float:left; margin-right:10px; margin-bottom:6px">
 <tr>
  <th colspan="2">hommes</th>
 </tr><tr>
  <td>ânes</td>
  <td>singes</td>
 </tr>
</table>

<p>Le tableau en dit déjà beaucoup mais naturellement pas tout.
C'est pourquoi vous devriez vous assurer vous même de l'exactitude des assertions qu'il contient.</p>
<p style="clear:left">Allez donc tout simplement au zoo pour voir les ânes et les singes et comparez alors vous-même!</p>

</body>
</html>

Explication:

Dans l'exemple il y a deux tableaux suivis chacun de deux paragraphes de texte. Le tableau du haut est aligné à gauche par la mention align="left" dans le repère d'ouverture <table>. Pour Netscape et pour l'Explorer Internet l'effet en est que le texte qui suit le tableau passe à la droite de celui-ci. Avec la mention align="right"vous pouvez aligner un tableau à droite et avec la mention align="center" vous le centrez. L'attribut align a toutefois été classé en cours d'abandon et doit disparaître à l'avenir du standard HTML. C'est pourquoi le deuxième tableau de l'exemple ci dessus montre comment atteindre le même effet avec des formats CSS.

Dans la variante avec les formats CSS sont en outre portées encore des mentions pour l'espace à droite et en bas, de façon à ce que le texte qui suit ne "colle" pas trop au tableau. Les navigateurs supportent également des mentions semblables pour ce faire: avec <table align="center" hspace="10" vspace="6"> vous obtenez par exemple, qu'entre le tableau et le cours du texte soient imposés un espace horizontal de 10 Pixels et un espace vertical de 6 pixels. Les attributs hspace= et vspace= appliqués à des tableaux, n'ont cependant jamais fait partie du standard HTML.

Les deux exemples ci-dessus, montrent par ailleurs, comment il vous est possible d'interrompre le flux du texte pour forcer sa poursuite sous le tableau. Dans le premier tableau de l'exemple où tout est réalisé avec HTML, le repère <br clear="all"> a été noté à cet effet - à savoir un passage à la ligne avec un attribut qui assure la poursuite sous le passage de texte. L'attribut clear en HTML a toutefois été classé en cours d'abandon. Le texte sous le deuxième tableau de l'exemple montre comment atteindre le même effet avec des formats CSS.

Attention:

Si le tableau lui même a des contenus plus grands, vous devez forcer la largeur totale du tableau (<table width=>), de façon qu'il reste de la place à gauche ou à droite pour le texte.

Quand vous alignez un tableau à gauche ou à droite mais voulez empêcher par la même occasion que les contenus qui suivent entourent le tableau, alors insérez la totalité du tableau dans un élément de bloc commun (div) et alignez celui-ci avec align= ou une propriété CSS correspondante (style="text-align:").

Autres informations

L'élément caption peut aussi contenir des attributs universels .

Dans le sommaire de référence HTML vous trouverez des données précisant où les éléments et attributs HTML présentés ici peuvent être mis , et ce à quoi il faut veiller pour ces différents attributs :
référence pour les éléments et référence pour les attributs pour le titre d'un tableau (<caption>...</caption>)
référence pour les attributs pour les tableaux (<table>...</table>)


	Tableaux comme moyen pour la présentation de pages Web
	Relier des cellules

SELFHTML/Aides à la navigation

HTML/XHML

Tableaux