Table with Caption

This section provides a tutorial example on how to create a table with a caption with table-and-caption and table-caption formatting objects. By default, caption is placed before the table.

If you want to add a caption to a table, you need to use the following formatting object structure:

<fo:table-and-caption caption-side="after" ...>
 <fo:table-caption>
  <fo:block text-align="center" margin="6pt" ...>
   ... Caption Text ...
  </fo:block>
 </fo:table-caption>
 <fo:table ...>
  ...
 </fo:table>
</fo:table-and-caption>

Here is my tutorial example, Table-with-Caption.fo, that has a caption placed "after" the table:

<?xml version="1.0" encoding="utf-8"?>
<!-- Table-with-Caption.fo
 - Copyright (c) 2006 HerongYang.com. All Rights Reserved.
-->
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
 <fo:layout-master-set>
  <fo:simple-page-master master-name="page" 
   margin="0.1in" page-height="5in" page-width="5in">
   <fo:region-body region-name="body" background-color="#eeffff"/>
  </fo:simple-page-master>
 </fo:layout-master-set>
 <fo:page-sequence master-reference="page">
  <fo:flow flow-name="body">
<fo:table-and-caption caption-side="after" 
 border-width="2px" border-style="solid">
<fo:table-caption>
 <fo:block text-align="center" margin="6pt"
  font-weight="bold">Table 1. Nice Web Page Layout</fo:block>
</fo:table-caption>
<fo:table margin="6pt">
 <fo:table-column border-width="1px" border-style="dotted"
  column-width="20%"/>
 <fo:table-column border-width="1px" border-style="dotted"
  column-width="30%"/>
 <fo:table-column border-width="1px" border-style="dotted"
  column-width="30%"/>
 <fo:table-column border-width="1px" border-style="dotted"
  column-width="20%"/>
 <fo:table-body>
  <fo:table-row border-width="1px" border-style="dotted">
   <fo:table-cell padding="8pt" background-color="#ffddff">
    <fo:block text-align="center">Logo</fo:block></fo:table-cell>
   <fo:table-cell padding="8pt" background-color="#ffffdd"
    number-columns-spanned="3">
    <fo:block text-align="center">Top Menu</fo:block></fo:table-cell>
  </fo:table-row>
  <fo:table-row border-width="1px" border-style="dotted">
   <fo:table-cell padding="8pt" background-color="#ffffdd"
    number-rows-spanned="2" display-align="center">
    <fo:block text-align="center">Side Menu</fo:block></fo:table-cell>
   <fo:table-cell padding="8pt">
    <fo:block text-align="center"
     line-height="500%">World News</fo:block></fo:table-cell>
   <fo:table-cell padding="8pt">
    <fo:block text-align="center"
     line-height="500%">Financial</fo:block></fo:table-cell>
   <fo:table-cell padding="8pt" background-color="#ffddff"
    number-rows-spanned="2" display-align="center">
    <fo:block 
     text-align="center">List of Ads</fo:block></fo:table-cell>
  </fo:table-row>
  <fo:table-row border-width="1px" border-style="dotted">
   <fo:table-cell padding="8pt">
    <fo:block text-align="center"
     line-height="500%">Technology</fo:block></fo:table-cell>
   <fo:table-cell padding="8pt">
    <fo:block text-align="center"
     line-height="500%">Sports</fo:block></fo:table-cell>
  </fo:table-row>
  <fo:table-row border-width="1px" border-style="dotted">
   <fo:table-cell padding="8pt" background-color="#dddddd" 
    number-columns-spanned="4">
    <fo:block text-align="center">Footer</fo:block></fo:table-cell>
  </fo:table-row>
 </fo:table-body>
</fo:table>
</fo:table-and-caption>
  </fo:flow>
 </fo:page-sequence>
</fo:root>

Since Apache FOP does not support "table-caption" formatting objects, you need to use RenderX XEP to process the above example. The output looks pretty good:

Table with Caption
Table with Caption

Table of Contents

 About This Book

 Introduction of XSL-FO

 Apache™ FOP (Formatting Objects Processor)

 RenderX XEP as an XSL-FO Tool

 Introduction of Area Model

 XSL-FO Document Basics and Examples

 Page Layout Masters

 Block-Level Formatting Objects

 Inline-Level Formatting Objects

 Including Graphics in XSL-FO document

Table of Rows and Columns

 Table Formatting Object Tree

 Table Cell Borders Collapsed and Separated

 Table Row Borders and Column Borders

 Table Column Headers and Footers

 Table and Column Width Control

 Table Column and Row Merge or Span

Table with Caption

 List, Item, Label, and Body

 Floating Blocks - "float" and "footnote"

 Hyperlinks, Table of Contents and Indexes

 Headers and Footers using "static-content"

 Font Attributes and Font Families

 Apache FOP Font Configurations

 RenderX XEP Font Configurations

 Converting HTML to PDF

 References

 Full Version in PDF/ePUB