Contents | < Le Positionnement Absolu | Les Listes >
Les tables sont décrites en utilisant l'élément XSL-FO fo:table. Une table peut avoir un en-tête (fo:table- header),un corps (fo:table-body) et un titre de bas de page (fo:table-footer). Chacun de ces groupes contient des rangées (fo:table-row), qui contiennent à leur tour des cellules(fo:table-cell). Les colonnes sont décrites en utilisant les éléments fo:table-column.
<fo:table border-collapse="collapse" font-size="12pt" font-family="Arial" font-style="italic"> <fo:table-column column-width="3in" background-color="rgb(255,246,206)"/ > <fo:table-column column-width="50%"/ > <fo:table-column column-width="50%"/> <fo:table-header color="rgb(255,255,255)" background-color="rgb(125,73,2)" font-weight="bold"> <fo:table-row> <fo:table-cell padding="2pt" border="1pt solid black"> <fo:block>Name</fo:block> </fo:table-cell> <fo:table-cell padding="2pt" border="1pt solid black"> <fo:block>Quantity</fo:block> </fo:table-cell> <fo:table-cell padding="2pt" border="1pt solid black"> <fo:block>Price</fo:block> </fo:table-cell> </fo:table-row> </fo:table-header> <fo:table-body > <fo:table-row> <fo:table-cell padding="2pt" border="1pt solid black"> <fo:block>Cohiba red dot Corona Especiale Cigars</fo:block> </fo:table-cell> <fo:table-cell padding="2pt" border="1pt solid black"> <fo:block>25</fo:block> </fo:table-cell> <fo:table-cell padding="2pt" border="1pt solid black"> <fo:block>$226.95</fo:block> </fo:table-cell> </fo:table-row> <fo:table-row> <fo:table-cell padding="2pt" border="1pt solid black" number-rows-spanned="2" > <fo:block>Fuente Fuente Opus X</fo:block> </fo:table-cell> <fo:table-cell padding="2pt" border="1pt solid black"> <fo:block>single</fo:block> </fo:table-cell> <fo:table-cell padding="2pt" border="1pt solid black"> <fo:block>$28.95</fo:block> </fo:table-cell> </fo:table-row> <fo:table-row> <fo:table-cell padding="2pt" border="1pt solid black"> <fo:block>25</fo:block> </fo:table-cell> <fo:table-cell padding="2pt" border="1pt solid black"> <fo:block>$699.95</fo:block> </fo:table-cell> </fo:table-row> ... </fo:table-body> </fo:table>
| Pour le code source complet pour cet exemple de code voyez "Tutorial/Table.fo" situé dans le dossier XML Documents Samples/Tutorial. |
Figure 1
Choses à remarquer:
L'élément fo:table est défini. Cette table a l'attribut border-collapse réglé à "collapse", qui fera fusionner les bordures de cellule.
Les colonnes peuvent avoir une largeur fixe (column ) ou une valeur pourcentuelle (column ).
Nous définissons l'en-tête et le corps de la table. Si une coupure de page se produira, les en-têtes et les titres de bas de page seront montrés aussi sur la page sivante.
Chaque fo:table-cell peut enjamber des rangées et/ou des colonnes multiples.
La contenu de la cellule est alignée verticalement selon la propriété display-align.
Remarquez s'il vous plaît, que par défault une cellule ne coupera pas son contenu. Pour couper le contenu d'une cellule fixez l'attribut overflow sur la propriété caché.
L'échantillon suivant illustre ces attributs:
<fo:table border-collapse="collapse" font-size="14pt" font-family="Arial">
<fo:table-column column-width="50%"/>
<fo:table-column column-width="50%"/>
<fo:table-body>
<fo:table-row>
<fo:table-cell border="1pt solid black" display-align="center"
height="2.4cm" overflow="hidden" >
<fo:block font-size="48pt" color="red">Clipped Cell</fo:block>
</fo:table-cell>
<fo:table-cell border="1pt solid black" display-align="center">
<fo:block>Normal table cell.</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
| Pour le code source complet pour cet exemple de code voyez "Tutorial/Table Cell Clip.fo" situé dans le dossier XML Documents Samples/Tutorial. |
Le résultat du rendant est montré dans la figure suivante.
Figure 2
Cet exemple montre également comment créer des rangées à altitude fixe en employant l'attribut height (cell ).
Comme vous avez remarqué dans l'exemple ci-dessus, une colonne peut avoir une largeur proportionnelle ou fixe.
Une largeur fixe inclut les unités de longueur (in, pt, cm, par exemple <fo:table-column column-width="3in" />).
Une largeur proportionnelle est exprimée par l'intermédiaire de la fonction proportional-column-width (par exemple <fo:table-column column-width="proportional-column-width(20)" />) ou en employant un indice de pourcentage (<fo:table-column column-width="20%" />)
Il y a une troisième manière d'indiquer la largeur d'une colonne: en excluant l'attribut de largeur de colonne, la colonne se dimensionnera automatiquement, selon son contenu.
Une table peut mélanger des colonnes fixes, proportionnelles et automatiques. Quand une table contient seulement des colonnes proportionnelles, XF les changera même si la somme des pourcentages n'est pas 100. Par exemple:
<fo:table>
<fo:table-column column-width="50%"/>
<fo:table-column column-width="50%"/>
..
</fo:table>
et
<fo:table>
<fo:table-column column-width="proportional-column-width(1)"/>
<fo:table-column column-width="proportional-column-width(1)"/>
..
</fo:table>
et
<fo:table>
<fo:table-column column-width="proportional-column-width(60)"/>
<fo:table-column column-width="proportional-column-width(60)"/>
..
</fo:table>
produiront le même résultat.
Quand les colonnes fixes sont incluses, XF disposera d'abord les colonnes fixes, et ensuite l'espace restant sera distribué entre les colonnes proportionnelles, selon l'attribut de largeur de colonne.
Quand une table inclut des colonnes automatiques, XF disposera d'abord les colonnes fixes, et ensuite il calculera les pourcentages de largeur des colonnes automatiques basés sur leur contenu. Les colonnes automatiques ont maintenant une largeur de pourcentage, et l'espace restant est distribué entre ces colonnes et les colonnes proportionnelles qui ont un attribut de largeur de colonne.
Si une colonne est enlevée, si la table a toujours au moins une colonne proportionnelle, la largeur sera distribuée. Si la table avait seulement des colonnes fixes, la largeur totale de table sera réduite.
Considérez l'exemple suivant:
<fo:block background-color="rgb(225,225,225)">
<fo:table start-indent="1in" background-color="white">
<fo:table-column column-width="50%"/>
<fo:table-column column-width="50%"/>
<fo:table-body>
<fo:table-row>
<fo:table-cell>
<fo:block background-color="rgb(153,204,255)">
Cell 1 content
</fo:block>
</fo:table-cell>
<fo:table-cell>
<fo:block background-color="rgb(153,204,255)">
Cell 2 content
</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:block>
Le résultat du rendant est montré dans la figure suivante.
Figure 3
Qoique le start-indent soit indiqué seulement pour fo:table, vous pouvez remarquer que non seulement la table est découpée, mais l'enfant fo:block aussi.
start-indent est la propriété la plus rusée dans les specs de XSL-FO parce qu'elle se comporte au contraire à ce que la plupart des lotisseurs trouvent être le normale:
Vous espériez que le groupe (le bloc) découpé se déplacera vers la gauche et avec lui, ses enfants (dans notre exemple, la table et ses cellules).
Le comportement différent est cependant correct, parce que:
Pour découper seulement la table, vous pouvez:
Contents | < Le Positionnement Absolu | Les Listes >