Lesson: Tables

Creating Tables

The syntax for creating a table in XSL-FO is as follows.

Code Sample:

<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>

fo:table

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.

fo:table-column

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.

fo:table-header, fo:table-body, fo:table-footer

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.

fo:table-row

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.

fo:table-cell

The fo:table-cell element contains the content of the cell, which is displayed in the output.

Let's look at an example.

Code Sample:

<?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>