Using "table" Elements for Page Layouts

<< Designing Web Page Layouts with Tables

<< Publishing Books Using XML Technologies

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 CSS formatting properties on HTML "div" elements.
• Using nested HTML "table" elements.

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>

Sections in This Chapter

Using "table" Elements for Page Layouts

Border Layout for Web Pages

Adding a Frame for the Center Area

Adding Headers and Footers