Publishing with XML - Herong's Tutorial Examples

∟Designing Web Page Layouts with Tables

∟Using "table" Elements for Page Layouts

This section describes the HTML output files generated by hyPub from your book source file.

Using "div" or "table" for Web Page Layouts

When you publish your book on your Website, you may want to apply a specific layout to divide the Web page display area into multiple parts. There are two simple ways to implement Web page layouts:

Using nested HTML "table" elements to implement Web page layouts seems to be more straight forward. I have used this approach for all my books at http://www.herongyang.com. I will explain to you how I did it in the following sections.

HTML "table" Elements

In order to use HTML "table" elements to implement Web page layouts, we need to understand a few details about the "table" elements.

1. HTML "table" elements allow you to divide a presentation area into rows and columns. Table rows can be defined as "tr" elements inside a "table" element. Columns in each row can be defined as "td" elements inside a "tr" element. Here is a simple "table" element example: 

<table>
<tr>
<td>row 1, column 1</td>
<td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td>
<td>row 2, column 2</td>
</tr>
</table>

2. For layout purpose, you need to remove the spacing effects from of a "table" element as shown in this example: 

<table cellspacing="0" cellpadding="0">

3. For layout purpose, you may want to merge multiple columns into a single column in row by using the "colspan" attribute as in this example: 

<table>
<tr>
<td colspan="2">row 1, column 1 and 2</td>
</tr>
<tr>
<td>row 2, column 1</td>
<td>row 2, column 2</td>
</tr>
</table>

4. For layout purpose, you may want to merge multiple rows into a single row by using the "rowspan" attribute as in this example: 

<table>
<tr>
<td rowspan="2">row 1 and 2, column 1</td>
<td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 2</td>
</tr>
</table>

5. For layout purpose, you may want to nest tables together, where one table is inserted into another table. Here is a simple example: 

<table>
<tr>
<td>row 1, column 1</td>
<td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td>
<td>

<table>
<tr>
<td>row 1, column 1</td>
<td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td>
<td>row 2, column 2</td>
</tr>
</table>

</td>
</tr>
</table>

Table of Contents

 About This Book

 Ideas on Publishing Books using XML

 Overview of hyPub - A Simple XML Publishing Tool

 Writing Book Contents in XHTML Source Files

 Transforming Book Source Files with XSL Technology

►Designing Web Page Layouts with Tables

►Using "table" Elements for Page Layouts

 Border Layout for Web Pages

 Adding a Frame for the Center Area

 Adding Headers and Footers

 Controlling Web Page Appearance with CSS

 Sharing HTML Codes with JavaScript Files

 Generating Web Pages with hyPub

 Formatting Printable Documents with XSL-FO

 Generating PDF Documents with hyPub

 Areas of Future Improvements

 References

 Full Version in PDF/ePUB