La tabulation en html n’est pas aussi aisée que dans un document créé dans un éditeur comme Office Word ou OpenOffice car il n’existe pas un élément (
<tab></tab> par exemple) propre à créer une tabulation. Cependant si on désire tabuler en html on peut utiliser quelques techniques que cet article propose.
La balise table
Une tabulation évoque l’idée d’une colonne vide dans du texte. Il n’en faut pas plus pour nous amener à penser à l’élément
<table></table> pour créer notre tabulation.
Dans le premier cas on met notre texte à l’intérieur de la table comme une donnée de table, en prenant soin de l’ajuster convenablement.
Exemple:
<table style="border: 1px solid #F90;">
<tbody>
<tr>
<td bgcolor=#6C3 width=30px></td>
<td>Après la tabulation notre texte commence ici sur cette ligne </td>
</tr>
<tr>
<td colspan="2">et continue normalement sur la ligne suivante.</td>
</tr>
</tbody>
</table>
Effet rendu:
|
Après la tabulation notre texte commence ici sur cette ligne |
| et continue normalement sur la ligne suivante. |
Je ne sais pas pour vous mais j’aime bien quand mon texte est à l’extérieur. Dans le second cas donc, on sépare la table du texte.
Exemple:
<table style="border: 1px solid #FF9900; display: inline">
<tbody>
<tr>
<td bgcolor=#66CC33 width=30px></td>
</tr>
</tbody>
</table>On tabule une fois à l’aide d’une colonne de <span style="font-family: ‘Courier New’, Courier, monospace; font-size: 100%"><table></table> </span>
<br />Et le reste du texte suit.
Effet rendu:
Dans ce code notre texte réel se trouve à l’extérieur et autour de la table, non plus comme une donnée tabulaire.
Il faut aussi noter qu’on a utilisé l’attribut width pour indiquer une largeur fixe. La colonne ainsi définie peut être utilisée pour plusieurs tabulations de même dimension.
Exemple:
<table style="border: 1px solid #FF9900; display: inline">
<tbody>
<tr>
<td bgcolor=#66CC33 width="30px"></td>
<td bgcolor=#66CC33 width="30px"></td>
</tr>
</tbody>
</table>On tabule deux fois avec deux colonnes de même largeur.
Effet rendu:
Une autre possibilité consiste à augmenter la taille de la largeur de colonne pour une tabulation plus grande.
Exemple:
<table style="border: 1px solid #FF9900; display: inline">
<tbody>
<tr>
<td bgcolor=#66CC33 width="60px"></td>
</tr>
</tbody>
</table>Ici on tabule une seule fois avec une colonne deux fois plus grande; vous voyez?
Effet rendu:
Le code
Le code est le code pour un espace non tronqué. Il permet de conserver le caractère d’espace et peut donc servir à créer une tabulation.
Exemple:
On tabule à l’aide du code
Effet rendu:
On tabule à l’aide du code
On peut inclure directement des espaces dans le document à l’aide de la barre d’espace mais dans beaucoup de systèmes les espaces ainsi insérés sont effacés. Le code permet de conserver le caractère d’espace.
Il est intéressant de placer cette chaîne d’espaces dans la balise
<span></span>.
Exemple:
<span style="border: 1px solid #FF9900; background-color: #66CC33"> </span>Ce texte commence après une tabulation.
<br /><span style="border: 1px solid #FF9900; background-color: #66CC33"> </span><span style="border: 1px solid #FF9900; background-color: #66CC33"> </span>Ici on a tabulé deux fois. Cette double-tabulation équivaut chez nous à une distance d’environ 60px.
Effet rendu:
Ce texte commence après une tabulation.
Ici on a tabulé deux fois. Cette double-tabulation équivaut chez nous à une distance d’environ 60px.
La balise pre
La balise
<pre></pre>
est un élément html pour présenter du texte tel quel. Elle conserve du texte ayant une certaine disposition préétablie par l’auteur. Cette balise me paraît la plus indiquée pour l’objectif de tabulation ou d’indentation.
Exemple:
<pre style="font-family: Georgia; font-size: 100%; border: 1px solid #FF9900; background-color: #66CC33;"> Avec la balise <pre></pre> le texte apparaît tel que
pré-formaté. On arrange notre
texte
à notre convenance et la balise
le prend en charge. C’est
du WYTIWYG (What You Type Is What You Get)
en puissance, hé hé hé.
</pre>
Effet rendu:
Avec la balise <pre></pre> le texte apparaît tel que
pré-formaté. On arrange notre
texte
à notre convenance et la balise
le prend en charge. C’est
du WYTIWYG (What You Type Is What You Get)
en puissance, hé hé hé.
Le style text-indent
La déclaration de la règle de style avec text-indent permet d’indiquer une distance d’indentation pour un texte à imprimer dans le medium concerné.
Exemple:
<p style=" border: 1px solid #FF9900; background-color: #66CC33; text-indent: 30px">La déclaration de la règle de style avec text-indent permet <br />bla bla bla
<p>
Effet rendu:
Le style margin
Avec ce style on réserve une distance qui est une marge à gauche (margin-left) ou à droite (margin-right pour du texte écrit de la droite vers la gauche) de l’élément utilisé. Cette marge est la distance du bord extérieur de l’élément précédent dans le flux normal du document.
Exemple:
<p style="margin-left: 30px">On crée une marge de 30 pixels à gauche pour notre tabulation.</p>
Effet rendu:
On crée une marge de 30 pixels à gauche pour notre tabulation.
On peut combiner les styles text-indent et margin pour la tabulation (c’est même utile pour mimer une liste).
Note: J’ai spécifié une bordure en couleur et une couleur de fond pour les tabulations seulement dans le but de les mettre en lumière. Vous pouvez enlever cette partie de code. Vous pouvez également déclarer du style pour gérer la visibilité de la balise
<table></table> surtout.
Exemple:
<table style="visibility: hidden;"></table>
Le choix d’une technique peut dépendre
Ce sont là quelques techniques qu’on peut utiliser pour faire de la tabulation dans un document html. Votre choix peut dépendre de votre situation. Si vous êtes sur un système ou une plateforme où vous n’êtes pas autorisé à utiliser votre propre style, il vous reste les éléments html. Anyway, bonne implémentation à vous.
© Copyright 2011-2012. United Kingdom of Love - Tous droits réservés.
