Publishing with XML - Herong's Tutorial Examples - v4.02, by Dr. Herong Yang
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
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
Adding a Frame for the Center Area
Controlling Web Page Appearance with CSS
Sharing HTML Codes with JavaScript Files
Generating Web Pages with hyPub
Formatting Printable Documents with XSL-FO