Using Tables for Layout

The Problem with HTML

Using HTML is great if you have a lot of text and not many graphics (like if you were going to put a book online). It’s strong area is in allowing text to flow and fill the size of the browser, regardless of the type of computer or user preferences of the person viewing the web page. However, HTML is not designed for desktop publishing and has limitations on layout design. The HTML code does not lend itself well to specifying exactly where you want a picture, for example. We are limited to aligning images to either the right or the left, and cannot align anything to the bottom or the middle of a page.

The Table Solution

Graphic designers needing very precise layouts figured out early on how to “cheat” and use tables to layout everything on their pages the way they wanted to. The reason for using tables is that we have a lot of control over where everything lines up in each cell — much more control than we have in a regular page.

The first thing we can do with a table is specify the exact width that we want the text to display. Normally, the text will expand and contract depending on how big the browser window is. Sometimes we want to fix the text at a certain width so that it doesn’t move around. The way to do this is to put your text into a table and specify the width of the table.

Practice:

  1. Copy demo.html into your practice folder so we can modify it without changing the original.
  2. Just below the body tag, start a table that has only one cell.
  3. Set the width of the table to 300 pixels.
  4. Leave all of the existing body text in the cell and close the table at the bottom (before /body).

In the above practice exercise, how did the table affect the document?

Vertical Alignment

Another way we can use tables for layout purposes is to align items vertically. If you put text inside a table cell, you can use the valign property to center the cell contents from top to bottom.

Practice:

  1. In your practice folder, create a new document named tablealign.html.
  2. Write the basic HTML structure, using Table Align as the title.
  3. Create a single-cell table with both the width and height set to 100%.
  4. In the only cell, type your name.
  5. Set the cell alignment to be centered both horizontally and vertically.

In the above practice exercise, what happens when you resize the browser? Does your name remain centered?

Nesting Tables

Just like frames, tables can be nested, one inside another. This allows you to use one table for your overall page layout and still have other tables within.

Tip: Although tables used for layout should usually be invisible, you might consider setting border="1" while you are working on the design of the page, and simply changing the 1 to a 0 when everything is positioned where it should be.

Look at the following example to see one table nested inside another. The inner, visible table has been highlighted in red.

Example 1 
<html>
<head>
	<title>Nested Tables</title>
</head>
<body>
<table width="100%" height="100%" border="0">
<tr>
        <td align="center" valign="center">
                <img src="images/auntsally.jpg" alt="Aunt Sally">
        </td>
        <td align="center" valign="center">
                <table width="200" border="1">
                <tr>
                        <td align="center">About My Aunt Sally</td>
                </tr>
                <tr>
                        <td>Born on October 14, 1965</td>
                </tr>
                <tr>
                        <td>Lives in Kentucky</td>
                </tr>
                <tr>
                        <td>Makes good apple pie</td>
                </tr>
                </table>
        </td>
</tr>
</table>
</body>
</html>

In Example 1, the layout table (in black) is used to position text on the page. It contains two cells (one row and two columns). The left cell has a picture centered in it, and the right row has a nested table (in red) shown in it. The inner table is fully visible to the user.