Tables

One of the most common formatting techniques is the creation of tables. A myriad of information can be stored in tables, and as any HTML author is aware, tables can function as more than simply storage units for data, they can contain virtually any kind of text and images, sometimes in ways that are not even represented as tables.

Because of the formatting power of XSL-FO, there is no longer really a need to use tables to hack together page layouts. However, tables are still a very useful formatting element. There are a number of XSL Formatting Objects that are explicitly used in the creation and formatting of tables. They are

  • table-and-caption— This tag is only used to provide a container for a table and its caption. It should contain a table object and a caption object. You can use the table object without this if you do not need a caption.

  • table— The table object is used to create a table. Although it can be used within a table-and-caption object, it can also be used on its own to create a table.

  • table-caption— This object contains a block, which is the caption for a table.

  • table-column— This describes the columns of the table and their formatting.

  • table-header— This contains the first row (header), normally column titles for the table.

  • table-footer— This contains last row (footer) of a table, which can be used for titling, totaling, and so on. It acts much the same way as a table-header.

  • table-body— This contains the main body of the table. It holds the table-row objects.

  • table-row— This contains a single row of table data. It holds a set of table-cell objects.

  • table-cell— This describes a single cell (data contents of a particular column and row) and holds a block object. These are normally contained in a table-row object, but can be used on their own with the starts-row and ends-row properties.

Let's look at how these objects come together to create a table. We are going to create a table for some part numbers and information about the parts. We will have a table header and store the table data in individual cells. We start the table off using the table object, and we use some of its properties to establish a border style, color, and the width of the border—in this case, a 1-point line. (We will discuss border properties in greater detail later in the Borders and Padding section.)

<fo:table border-collapse="separate" border-style="solid" border-color="black"
 border-width="1pt"> 

Next, we need to establish the columns for our table:

<fo:table-column column-width="8pc"/> 
<fo:table-column column-width="12pc"/>
<fo:table-column column-width="8pc"/>
<fo:table-column column-width="4pc"/>

The column width can be specified using any of the units of measure we mentioned before (such as in, cm, mm, and so on). In this case, we have used picas.

Next, we establish the table header, and for the header we are using a background-color property and the color property to make the header a black band with red text:

<fo:table-header> 
 <fo:table-row background-color="black" color="red">
  <fo:table-cell number-columns-spanned="4" padding="2pt">
   <fo:block>Part Catalog</fo:block>
  </fo:table-cell>
 </fo:table-row>
</fo:table-header>

With the table structure established, we are ready to create the body for the table. Within the table-body, we will be defining each of the table rows, and the table cells that contain the actual data for our table:

 <fo:table-body> 
  <fo:table-row background-color="grey" color="white">
   <fo:table-cell padding="2pt"><fo:block>Part Number</fo:block></fo:table-cell>
   <fo:table-cell padding="2pt"><fo:block>Description</fo:block></fo:table-cell>
   <fo:table-cell padding="2pt"><fo:block>Unit Price</fo:block></fo:table-cell>
   <fo:table-cell padding="2pt"><fo:block>In Stock</fo:block></fo:table-cell>
  </fo:table-row>
 </fo:table-body>
</fo:table>

When we pull this all together and add the rest of our data, the result is the code shown in Listing 10.4.

Listing 10.4. A Complete Table Built Using XSL Formatting Objects
<?xml version="1.0"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
 <fo:layout-master-set>
  <fo:simple-page-master master-name="Catalog"
      page-width="6in" page-height="8.0in"
      margin-top="0.5in" margin-bottom="0.5in"
      margin-left="0.5in" margin-right="0.5in">
   <fo:region-before extent="1.0in"/>
   <fo:region-body margin-top="1.0in" margin-bottom="1.0in"/>
   <fo:region-after  extent="1.0in"/>
  </fo:simple-page-master>
 </fo:layout-master-set>
 <fo:page-sequence master-name="Catalog">
  <fo:static-content flow-name="xsl-region-before">
   <fo:block text-align="center" font-family="sans-serif"
       font-size="18pt" font-weight="bold">
    Widgets, Inc.
   </fo:block>
  </fo:static-content>
  <fo:static-content flow-name="xsl-region-after">
   <fo:block text-align="center" font-family="sans-serif"
       font-size="12pt" font-style="italic">
     Last updated January 1, 2002
   </fo:block>
  </fo:static-content>
  <fo:flow flow-name="xsl-region-body">
   <fo:block>
    Please consult your product manual for part numbers.
   </fo:block>
   <fo:table border-collapse="separate" border-style="solid"
       border-color="black" border-width="1pt">
    <fo:table-column column-width="8pc"/>
    <fo:table-column column-width="12pc"/>
    <fo:table-column column-width="8pc"/>
    <fo:table-column column-width="4pc"/>

    <fo:table-header>
     <fo:table-row background-color="black" color="red">
      <fo:table-cell number-columns-spanned="4" padding="2pt">
       <fo:block>Part Catalog</fo:block>
      </fo:table-cell>
     </fo:table-row>
    </fo:table-header>

    <fo:table-body>
     <fo:table-row background-color="grey" color="white">
      <fo:table-cell padding="2pt"><fo:block>Part Number</fo:block></fo:table-cell>
      <fo:table-cell padding="2pt"><fo:block>Description</fo:block></fo:table-cell>
      <fo:table-cell padding="2pt"><fo:block>Unit Price</fo:block></fo:table-cell>
      <fo:table-cell padding="2pt"><fo:block>In Stock</fo:block></fo:table-cell>
     </fo:table-row>
     <fo:table-row background-color="white" color="black">
      <fo:table-cell padding="4pt"><fo:block>AB2992</fo:block></fo:table-cell>
      <fo:table-cell padding="4pt"><fo:block>Casters</fo:block></fo:table-cell>
      <fo:table-cell padding="4pt"><fo:block>$19.99</fo:block></fo:table-cell>
      <fo:table-cell padding="4pt"><fo:block>Yes</fo:block></fo:table-cell>
     </fo:table-row>
     <fo:table-row background-color="white" color="black">
      <fo:table-cell padding="4pt"><fo:block>CY9932</fo:block></fo:table-cell>
      <fo:table-cell padding="4pt"><fo:block>Handle</fo:block></fo:table-cell>
      <fo:table-cell padding="4pt"><fo:block>$5.99</fo:block></fo:table-cell>
      <fo:table-cell padding="4pt"><fo:block>Yes</fo:block></fo:table-cell>
     </fo:table-row>
     <fo:table-row background-color="white" color="black">
      <fo:table-cell padding="4pt"><fo:block>DF9921</fo:block></fo:table-cell>
      <fo:table-cell padding="4pt"><fo:block>Drawer</fo:block></fo:table-cell>
      <fo:table-cell padding="4pt"><fo:block>$9.99</fo:block></fo:table-cell>
      <fo:table-cell padding="4pt"><fo:block>Yes</fo:block></fo:table-cell>
     </fo:table-row>
     <fo:table-row background-color="white" color="black">
      <fo:table-cell padding="4pt"><fo:block>XV2201</fo:block></fo:table-cell>
      <fo:table-cell padding="4pt"><fo:block>Storage Unit</fo:block></fo:table-cell>
      <fo:table-cell padding="4pt"><fo:block>$99.99</fo:block></fo:table-cell>
      <fo:table-cell padding="4pt"><fo:block>No</fo:block></fo:table-cell>
     </fo:table-row>
     <fo:table-row background-color="white" color="black">
      <fo:table-cell padding="4pt"><fo:block>FG2231</fo:block></fo:table-cell>
      <fo:table-cell padding="4pt"><fo:block>Print Manual</fo:block></fo:table-cell>
      <fo:table-cell padding="4pt"><fo:block>$2.99</fo:block></fo:table-cell>
      <fo:table-cell padding="4pt"><fo:block>Yes</fo:block></fo:table-cell>
     </fo:table-row>
    </fo:table-body>
   </fo:table>  </fo:flow>
 </fo:page-sequence>
</fo:root>

The results of the rendered file are shown in Figure 10.6.

Figure 10.6. A fully formatted XSL-FO table, which makes use of colors and borders.


XSL-FO table objects are very powerful, especially when combined with XSLT, which allows for the automatic creation and population of tables using XSL. We will take a closer look at using XSLT and XSL-FO later in the “Integrating XSLT and XSL-FO” section.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.128.204.5