Welcome to our free Introduction to XSL-FO tutorial. This tutorial is based on Webucator's Introduction to XSL-FO course.
Lesson Goals
The syntax for creating a table in XSL-FO is as follows.
<fo:table table-layout="fixed" border-width="1mm" border-style="solid"> <fo:table-column column-width="3in"/> <fo:table-column column-width="3in"/> <fo:table-header text-align="center" background-color="silver"> <fo:table-row> <fo:table-cell padding="1mm" border-width="1mm" border-style="solid"> <fo:block font-weight="bold">Header</fo:block> </fo:table-cell> <fo:table-cell padding="1mm" border-width="1mm" border-style="solid"> <fo:block font-weight="bold">Header</fo:block> </fo:table-cell> </fo:table-row> </fo:table-header> <fo:table-body> <fo:table-row> <fo:table-cell padding="1mm" border-width="1mm" border-style="solid"> <fo:block>Content</fo:block> </fo:table-cell> <fo:table-cell padding="1mm" border-width="1mm" border-style="solid"> <fo:block>Content</fo:block> </fo:table-cell> </fo:table-row> <fo:table-row> <fo:table-cell padding="1mm" border-width="1mm" border-style="solid"> <fo:block>Content</fo:block> </fo:table-cell> <fo:table-cell padding="1mm" border-width="1mm" border-style="solid"> <fo:block>Content</fo:block> </fo:table-cell> </fo:table-row> </fo:table-body> </fo:table>
Let's examine this element by element.
The fo:table element contains the whole table. Common attributes include table-layout (fixed, auto, or inherit) and attributes controlling the borders (e.g, border-width) and background (e.g, background-color) of the table.
The fo:table-column elements are used to set the width of the column. The key attribute is column-width. The fo:table-column elements are the first children of the fo:table element and there should be one fo:table-column element for each column in the table.
The table is vertically divided into a fo:table-header, fo:table-body, and fo:table-footer. Only the fo:table-body is required. These elements are then divided into rows with the fo:table-row element.
The fo:table-row element is divided into one or more cells with fo:table-cell elements. The total number of cells in each row should equal the number of fo:table-column elements in the table, though cells can span columns, in which case they count for however many columns they span.
The fo:table-cell element contains the content of the cell, which is displayed in the output.
Let's look at an example.
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format"> <xsl:output method="xml" indent="yes"/> <xsl:template match="/beatles"> <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"> <fo:layout-master-set> <fo:simple-page-master master-name="table" page-height="11in" page-width="8.5in" margin-top=".5in" margin-bottom=".5in" margin-left=".5in" margin-right=".5in"> <fo:region-body margin-top="1in" margin-bottom="1in"/> <fo:region-before extent=".5in"/> <fo:region-after extent=".5in"/> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="table"> <fo:static-content flow-name="xsl-region-before" text-align="center"> <fo:block font-size="20pt" font-weight="bold"> The Beatles </fo:block> </fo:static-content> <fo:static-content flow-name="xsl-region-after"> <fo:block text-align="right" font-size="9pt"> Image borrowed from <fo:basic-link external-destination="url(' http://www.northwestern.edu/observer/issues/2011-06-05/images/beatles.jpg')" color="blue">here</fo:basic-link>. </fo:block> </fo:static-content> <fo:flow flow-name="xsl-region-body"> <fo:block> <fo:external-graphic src="url('beatles.jpg')" width="340px" height="238px"/> </fo:block> <fo:table table-layout="fixed" border-width="1mm" border-style="solid" font-size="26pt" space-before="20pt"> <fo:table-column column-width="3in"/> <fo:table-column column-width="3in"/> <fo:table-header text-align="center" background-color="silver"> <fo:table-row> <fo:table-cell padding="1mm" border-width="1mm" border-style="solid"> <fo:block font-weight="bold">First Name</fo:block> </fo:table-cell> <fo:table-cell padding="1mm" border-width="1mm" border-style="solid"> <fo:block font-weight="bold">Last Name</fo:block> </fo:table-cell> </fo:table-row> </fo:table-header> <fo:table-body> <xsl:for-each select="//beatle"> <fo:table-row> <fo:table-cell padding="1mm" border-width="1mm" border-style="solid"> <fo:block> <fo:basic-link external-destination="url('{@link}')" color="blue"> <xsl:value-of select="name/firstname"/> </fo:basic-link> </fo:block> </fo:table-cell> <fo:table-cell padding="1mm" border-width="1mm" border-style="solid"> <fo:block> <fo:basic-link external-destination="url('{@link}')" color="blue"> <xsl:value-of select="name/lastname"/> </fo:basic-link> </fo:block> </fo:table-cell> </fo:table-row> </xsl:for-each> </fo:table-body> </fo:table> </fo:flow> </fo:page-sequence> </fo:root> </xsl:template> </xsl:stylesheet>
The result would look like this.