Using a Table for Page Layout

So far your personal Web site contains the following pages: homePage.html, about.html, books.html, links.html and friends.html. All the pages are displayed at full window width. This is not the most attractive display format. Also, when the pages are printed, the margins will be cut off. It is advisable to have some space between the content of the page and the edges of the window.

In this chapter you will:

Format your page with a table.

The figure below illustrates the homePage.html page before the change (as it is now) and following the change, which you are about to make:

How do you create space between the content of the page and the edge of the window?

You will format the entire page as a table with 1 row and 1 column, but:

The width of the table will be less than 100%.
The table will be in the center of the window (left/right).

So, the outcome of this is that there will be a space between the table and the edge of the window, and that is exactly what we want!

The content will be inside the column.

The code for creating the table will be as follows:

<body...>
<table border="0" width="76%" align="center">
<tr>
<td>
content here
</td>
</tr>
</table>
</body>

Explanation:

The table consists 1 row and 1 column.
The width of the table is 76% of the browser window's width and it appears in the center (left/right). You can change this % as you wish.
The content of the cell can be anything you want: text, tables, images...

So how do you do this?

Open Windows Explorer.
Go to drive C, navigate to the justin folder which contains the homePage.html file.
Double click on the homePage.html file to view it on the browser.

Viewing the source code of the HTML page

Return to Windows Explorer, highlight the file homePage.html, right-click with the mouse and choose Open With, and then choose Notepad.

Building the page layout

Place the cursor following the <body> tag, press Enter and type:
```
<table border="0" width="76%" align="center">
<tr>
<td>
```
Press Ctrl+End on the keyboard to go to the end of the source code displayed in the Notepad window.
Place the cursor before the </body> tag and press Enter. Place the cursor at the beginning of the new line that you have just created, and type the following:
```
</td>
</tr>
</table>
```
Save the changes you made in the homePage.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made in the homePage.html file.

Figure 8.1: The page layout formated with a table.
Close the browser window displaying the homePage.html file.
Close the Notepad window displaying the homePage.html file.

You used a table for the homePage.html page layout. Now it is time to format the other Web pages to create a uniform page layout for your Web site.

To apply the new layout to all the Web pages that you created, repeat items 1 to 7 for each individual Web page that you made: about.html, books.html, links.html and friends.html. Make sure that you "wrap" the existing content for each page with table tags. Notice that these changes do not replace any existing tag, you just add tags.

Note - The default value of the border attribute in the <table> tag is 0 (zero), so it is not really necessary to write border="0" in the code. If you would like to view the table's border, you can change the value from 0 to 1, view the border, and then when you want to hide the border just place the value with 0 again.

Part I

Part II