sommaire
indexpage précédentepage suivante
imprimer
envoyer
marquer
Éléments <table> de mise en page: découpage en tableaux |
L'insertion d'un tableau se fait à l'aide d'un élément <table>, comme en html. Celui-ci contient, comme en html, des éléments <tr> pour définir des lignes dans le tableau. Ces éléments <tr> contiennent à leur tour des éléments <td> pour définir des cellules dans les lignes en question. Le contenu de ces cellules <td> est un ensemble d'éléments d'information dans une page. Exemple <table>
<tr>
<td><p>première ligne, cellule 1</p></td>
<td><p>première ligne, cellule 2</p></td>
<td><p>première ligne, cellule 3</p></td>
</tr>
<tr>
<td><p>deuxième ligne, cellule 1</p></td>
<td><p>deuxième ligne, cellule 2</p></td>
<td><p>deuxième ligne, cellule 3</p></td>
</tr>
</table>Ce qui donne :
Comme on le voit, les cellules sont affichées avec une couleur de fond pour les faire ressortir du reste de la page, un espace est utilisé entre les cellules, ainsi qu'entre le bord d'une cellule et le contenu de celle-ci. Tous ces paramètres peuvent être modifiés en utilisant différents attributs expliqués ci-après. |
Position du tableauL'exemple précèdent montre qu'un tableau est automatiquement centré là où il est défini (dans la page, dans une zone, dans un bloc comme dans cet exemple, etc.). On peut changer cela grâce à un attribut position à placer dans la balise <table> (comme pour les images). Cet attribut peut valoir gauche, centre ou droite pour aligner le tableau à gauche, au centre ou à droite (de la page, de la zone, du bloc, etc.). Exemple à gauche <bloc style="cadre1" bords="arrondis">
<table position="gauche">
...
</table>
</bloc>Ce qui donne :
Exemple au centre <bloc style="cadre1" bords="arrondis">
<table position="centre">
...
</table>
</bloc>Ce qui donne :
Exemple à droite <bloc style="cadre1" bords="arrondis">
<table position="droite">
...
</table>
</bloc>Ce qui donne :
Largeur du tableauLes exemples qui précèdent montrent également que la largeur du tableau est automatiquement adaptée à la taille de son contenu. Au plus ce contenu occupe de la place, au plus larges seront les cellules. Lorsque le tableau atteint la taille maximale de la colonne où il est défini, son contenu se mettra automatiquement sur plusieurs lignes (en passant à la ligne là où c'est nécessaire). La largeur de tableau peut être fixée grâce à un attribut largeur à placer dans l'élément <table> (ou le synonyme width pour une question de compatibilité avec le langage html). largeur (ou width) s'exprime en pourcentage (exemple largeur="33%") ou en pixels (exemple largeur="200"). Il est souvent préferrable de travailler en pourcentage. Exemple <table largeur="100%"> ... </table> <table largeur="50%"> ... </table> <table largeur="80%"> ... </table> Ce qui donne :
Largeur des cellulesOn peut également placer cet attribut largeur (ou width) au niveau d'une cellule, dans un élément <td>, pour fixer la taille de cette cellule. largeur (ou width) s'exprime en pourcentage (par rapport à la taille du tableau) ou en pixels (utiliser un pourcentage est toujours préférable). Seule la première définition de taille rencontrée sera utilisée. Il n'est donc pas nécessaire de répèter cet attribut dans toutes les cellules de toutes les lignes du tableau: il suffit de le définir dans les cellules de la première ligne. Exemple <table largeur="100%">
<tr>
<td largeur="50%"><p>première ligne, cellule 1</p></td>
<td largeur="10%"><p>première ligne, cellule 2</p></td>
<td largeur="40%"><p>première ligne, cellule 3</p></td>
</tr>
<tr>
<td><p>deuxième ligne, cellule 1</p></td>
<td><p>deuxième ligne, cellule 2</p></td>
<td><p>deuxième ligne, cellule 3</p></td>
</tr>
</table>Ce qui donne :
Espacement entre les cellulesL'espacement entre les cellules peut être modifié grâce à l'attribut espacement-entre-cellules (ou cellspacing comme dans le langage html) à placer sur l'élément <table>. La valeur de cet attribut se donne en pixels (nombre de points). Par défaut, il vaut 3. Exemple <table espacement-entre-cellules="1">
<tr>
<td><p>première ligne, cellule 1</p></td>
<td><p>première ligne, cellule 2</p></td>
<td><p>première ligne, cellule 3</p></td>
</tr>
<tr>
<td><p>deuxième ligne, cellule 1</p></td>
<td><p>deuxième ligne, cellule 2</p></td>
<td><p>deuxième ligne, cellule 3</p></td>
</tr>
</table>
<table espacement-entre-cellules="20">
<tr>
<td><p>première ligne, cellule 1</p></td>
<td><p>première ligne, cellule 2</p></td>
<td><p>première ligne, cellule 3</p></td>
</tr>
<tr>
<td><p>deuxième ligne, cellule 1</p></td>
<td><p>deuxième ligne, cellule 2</p></td>
<td><p>deuxième ligne, cellule 3</p></td>
</tr>
</table>
<table espacement-entre-cellules="0">
<tr>
<td><p>première ligne, cellule 1</p></td>
<td><p>première ligne, cellule 2</p></td>
<td><p>première ligne, cellule 3</p></td>
</tr>
<tr>
<td><p>deuxième ligne, cellule 1</p></td>
<td><p>deuxième ligne, cellule 2</p></td>
<td><p>deuxième ligne, cellule 3</p></td>
</tr>
</table>Ce qui donne :
Espacement à l'intérieur d'une celluleL'espacement entre le bord d'une cellule et son contenu peut être modifié grâce à l'attribut espacement-dans-cellules (ou cellpadding comme en html). La valeur de cet attributs se donne en pixels (nombre de points). Par défaut, il vaut 2. Exemple <table espacement-dans-cellules="4">
<tr>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
</tr>
<tr>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
</tr>
</table>
<br/>
<table espacement-dans-cellules="20">
<tr>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
</tr>
<tr>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
</tr>
</table>
<br/>
<table espacement-dans-cellules="0">
<tr>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
</tr>
<tr>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
<td><p>Lorem ipsum dolor sit amet, ...</p></td>
</tr>
</table>Ce qui donne :
Alignement vertical à l'intérieur d'une celluleL'alignement vertical à l'intérieur des cellules peut être modifié grâce à l'attribut alignement-vertical (ou valign comme dans le langage html) à placer sur l'élément <table>, l'élément <tr> ou l'élément <td>. La valeur donnée dans <td> est prioritaire à celle donnée dans <tr> qui est prioritaire à celle donnée dans <table>. La valeur de cet attribut peut être haut (ou top), pour aligner le contenu en haut de la cellule, centre (ou centrer, ou center ou middle), pour l'aligner au centre, et bas (ou bottom), pour l'aligner en bas. Exemple <table>
<tr>
<td><br/><br/><br/></td>
<td alignement-vertical="haut"><p>première ligne, cellule 1</p></td>
<td alignement-vertical="centre"><p>première ligne, cellule 2</p></td>
<td alignement-vertical="bas"><p>première ligne, cellule 3</p></td>
</tr>
<tr alignement-vertical="centre">
<td><br/><br/><br/></td>
<td><p>deuxième ligne, cellule 1</p></td>
<td><p>deuxième ligne, cellule 2</p></td>
<td><p>deuxième ligne, cellule 3</p></td>
</tr>
<tr alignement-vertical="bas">
<td><br/><br/><br/></td>
<td><p>deuxième ligne, cellule 1</p></td>
<td alignement-vertical="haut"><p>deuxième ligne, cellule 2</p></td>
<td><p>deuxième ligne, cellule 3</p></td>
</tr>
</table>Ce qui donne (la première cellule de chaque ligne, contenant des <br/>, sert à créer de l'espace vertical):
Alignement horizontal à l'intérieur d'une celluleL'alignement horizontal à l'intérieur des cellules peut être modifié grâce à l'attribut alignement-horizontal (ou alignement, align comme dans le langage html, ou encore halign) à placer sur sur l'élément <table>, l'élément <tr> ou l'élément <td>. La valeur donnée dans <td> est prioritaire à celle donnée dans <tr> qui est prioritaire à celle donnée dans <table>. La valeur de cet attribut peut être "gauche" (ou "left"), pour aligner le contenu à gauche de la cellule, "centre" (ou "centrer", ou "center" ou "middle"), pour l'aligner au centre, et "droite" (ou "right"), pour l'aligner à droite. L'alignement horizontal a peu d'importance, contrairement en html, car la plupart des objets à insérer dans un tableau possèdent leurs propres règles d'alignement et s'étendent généralement sur toute la largeur de la cellule qui les contiennent. Cellule étendue sur plusieurs lignes ou plusieurs colonnesComme en html, on peut définir des cellules qui vont s'étendre sur plusieurs lignes ou colonnes du tableau, grâce aux attributs nombre-lignes et nombre-colonnes. nombre-lignes donne le nombre de lignes à couvrir, tandis que nombre-colonnes donne le nombre de colonnes à couvrir. Pour rester compatible avec les tableaux en html, on peut également utiliser les synonymes rowspan et colspan. Exemple
<table>
<tr>
<td nombre-colonnes="3"><p>première ligne, cellule 1</p></td>
</tr>
<tr>
<td nombre-lignes="2"><p>deuxième ligne, cellule 1</p></td>
<td><p>deuxième ligne, cellule 2</p></td>
<td><p>deuxième ligne, cellule 3</p></td>
</tr>
<tr>
<td><p>troisième ligne, cellule 2</p></td>
<td><p>troisième ligne, cellule 3</p></td>
</tr>
</table>Ce qui donne :
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Couleur de fond des cellulesPar défaut, les cellules utilisent un fond bleu-gris (qui correspond à la couleur clair). On peut changer cette couleur de fond à l'aide d'un attribut style à placer, soit au niveau <table>, soit au niveau <tr>, soit au niveau <td>. La couleur définie au niveau <td> est prioritaire à celle définie au niveau <tr>, qui est elle-même prioritaire à celle définie au niveau <table>. Cet attribut doit contenir le nom d'une des couleurs choisies pour le site de l'ULB. Il n'est pas possible en effet de choisir n'importe quelle couleur, ceci afin de garder une certaine cohérence dans l'ensemble des pages de l'université. Néanmoins, la palette est suffisament large pour ne pas se sentir frustrer. Toutes les couleurs disponibles sont décrites ici. Pour ne pas avoir de couleur de fond, il suffit de préciser style="transparent". Exemple <table style="voile">
<tr style="voileTitre">
<td nombre-colonnes="3"><p>première ligne, cellule 1</p></td>
</tr>
<tr>
<td nombre-lignes="2" style="postit2"><p>deuxième ligne, cellule 1</p></td>
<td><p>deuxième ligne, cellule 2</p></td>
<td><p>deuxième ligne, cellule 3</p></td>
</tr>
<tr>
<td style="important"><p>troisième ligne, cellule 2</p></td>
<td><p>troisième ligne, cellule 3</p></td>
</tr>
<tr style="clair">
<td><p>quatrième ligne, cellule 1</p></td>
<td><p>quatrième ligne, cellule 2</p></td>
<td><p>quatrième ligne, cellule 3</p></td>
</tr>
</table>Ce qui donne :
|
|
|||||||||||||||||||||
Le choix de la couleur de fond d'une cellule va influencer toutes les autres couleurs utilisées pour le contenu de cette cellule. Par exemple, si vous choisissez la couleur bleuULB qui est un bleu foncé, les titres qui d'habitude sont affichés dans cette même couleur, seront affichés automatiquement en blanc. Vous ne devez pas vous en soucier, ces changements de couleurs sont pris en charge automatiquement par sitemanager. Dans l'exemple qui suit, les mêmes éléments <titre2> et <p> seront affichés avec des couleurs différentes lorsque la couleur de fond des cellules change. Le résultat est visible dans la colonne de droite. |
Cet attribut style peut également prendre le nom d'un des styles utilisés dans les blocs. La couleur de fond utilisée sera alors la même que celles utilisées dans ces blocs (pour le contenu ou pour le titre). L'avantage, c'est que si les couleurs de fond de ce blocs changent, vos tableaux resteront toujours en harmonie avec celles-ci. Pour prendre la couleur de fond utilisée pour afficher le contenu d'un bloc, il suffit de mentionner le nom de son style (par exemple, style="voile-cadre1"). Pour prendre la couleur de fond utilisée pour afficher le titre d'un bloc, il suffit de prendre le nom de son style en y ajoutant l'extension "+titre" (par exemple, style="voile-cadre1+titre"). L'ensemble des styles disponibles est décrit ici. |
Exemple <table>
<tr>
<td style="cadre1">
...
</td>
</tr>
<tr>
<td style="cadre1+titre">
...
</td>
</tr>
<tr>
<td style="cadre2+titre">
...
</td>
</tr>
<tr>
<td style="voile">
...
</td>
</tr>
...
</table>
|
|
Mise en page à l'aide de tableauxComme en html, les tableaux peuvent servir à mettre en page du texte et/ou des images, comme le montre l'exemple suivant : Exemple <table style="transparent" espacement-entre-cellules="6">
<tr>
<td largeur="20%">
<p style="léger" alignement="droite">L'Institut de biologie et de ...</p>
</td>
<td largeur="0%">
<image file="img/ibmm1.jpg"/>
</td>
<td largeur="80%">
<p>L'Institut de biologie et de médecine moléculaires (IBMM)...</p>
<p>90% du génome humain est actuellement déchiffré...</p>
<p>Des milliers de chercheurs contribuent à écrire...</p>
p>Ils oeuvrent chaque jour à repousser un peu plus loin...</p>
</td>
</tr>
</table>Ce qui donne :
Remarquez dans cet exemple l'utilisation de l'attribut width pour forcer la taille des colonnes du tableau. Dans le cas de la deuxième colonne, sa taille est fixée par l'image qui y est placée (malgré le largeur="0%"). Définir un lien sur le contenu d'une celluleVous pouvez rendre le contenu d'une cellule cliquable, en ajoutant un attribut de liens hypertextes à l'élément <td>. |
Exemple <table cellspacing="16" style="voile" largeur="60%>
<tr>
<td href="http://www.ulb.ac.be/">
<titre2>homepage de l'ULB</titre2>
<p>En cliquant sur cette cellule, vous retournez à la homepage de l'ULB</p>
</td>
<td docref="site:help:format-xml-ulb:xmlulb">
<titre2>Aide format xml ULB</titre2>
<p>En cliquant sur cette cellule, vous retournez au sommaire de ce document</p>
</td>
</tr>
</table> |
Section optionnelle dans une tableauUne partie du tableau (des lignes ou des cellules) peut être affichée de manière optionnelle, grâce à un élément <section> placé dans l'élément <table>. Pour plus d'information, consultez la documentation consacrée aux sections optionnelles. |
