Page Layout

Page layout involves placing page elements (such as text and graphics) where you choose on a page.

Using Tables to Format a Page

Traditionally, most complex web pages use tables without borders to control the layout of a page. The idea is to divide up the page into chunks, where each chunk is placed in a table cell. The table dimensions are determined by the end look that is desired. The documentation pages of the CS110 site have a standard format, created by a table. Left column is 140 pixels, right is 380, total is 520: 

<table border="0" width="520">
  <tr>
   <td valign="top" width="140">
   ... navigation sidebar stuff
   </td>
   <td valign="top" width="380">
   ... all the main content
   </td>
  </tr>
</table>

Other sites that use tables are Wellesley's home page, the CS department's home page and the CS department's faculty page.

Note: When using a borderless table on a page here is a helpful hint: turn the borders on while debugging and then turn the borders off when you are satisfied with the table!

Exercise 1

Save this example web page to your desktop as cookie_table.html. Save its corresponding css page to your desktop as cookie_table.css. Note that the recipe has had minimal formatting. Modify cookie_table.html to layout the recipe such that the recipe name is centered, the ingredients are listed in two columns, and the recipe directions follow in paragraph form. Use a table with 3 rows and 2 columns. The first row spans both columns and lists the recipe name. The second row consists of two columns. Each column lists half the ingredients of the recipe. The third row spans both columns and gives the directions for the recipe. Be sure to experiment with turning the border "on" and "off" to see how the underlying table structure defines the page's layout.

Using CSS to Format a Page

It is also possible to format a page using CSS. On a high level, in terms of programming, it is not too different from using tables for page layout — both involve breaking up the page into chunks that you specifically place. With CSS, each element is given a name via the ID attribute of the DIV tag. Here is an example: 

<DIV ID="title"> ...title goes here... </DIV>
<DIV ID="intro"> ...introduction text goes here... </DIV>

Then, in the corresponding CSS file, each element is formatted individually. The syntax is to use the pound (#) sign followed by the element name. Then, in curly brackets, properties (such as position, top, left, width, among others) are listed. For example, in the preceding example, to place the title element at the position x = 200, y = 20 and the introduction element at the position x = 20, y = 50: 

#title {
        position: absolute;
        top: 20;
        left: 200;
}

#introduction {
        position: absolute;
        top: 50;
        left: 20;
}

Exercise 2

Let's return to our cookie recipe example. Now save the example web page to your desktop as cookie_css.html. Also, save its corresponding css page to your desktop as cookie_css.css. Modify cookie_css.html and cookie_css.css to layout the recipe such that the recipe name is centered, the ingredients are listed in two columns, and the recipe directions follow in paragraph form. Your page should consist of four elements. That is, it should be divided into four "chunks". The first element is the recipe name. The second element is half the ingredients of the recipe. The third element is the other half of the ingredients of the recipe. The fourth element is the directions for the recipe.

In CSS, you can place elements absolutely or relative to another element. Our examples illustrate absolute positioning. For details on how to use more advanced techniques including those where elements "float" on the page relative to one another, see yourhtmlsource.com. webreference.com.

Tables vs. CSS for Page Layout

It is tempting to use tables to control page layout and, as we've seen, many web authors do so. However, there is nothing that can be done in tables that cannot be done in CSS and there are compelling reasons to choose CSS over tables. One reason is that tables are not the most flexible page layout devices as they really weren't designed for this purpose. Secondly, a page that uses CSS for page layout is a fraction of the weight of an equivalent table-based page. A third reason concerns issues of accessibility. CSS is preferable because of the way that screen readers read a table for visually impaired users. Specifically, they linearize (or flatten) a table, spreading it out into one big line working from left to right across each row. This can result in a confusing presentation of the table's contents.

If you do choose to use a table (for page layout or for other reasons), it is important to keep in mind the way that screen readers read. In order to make tables more understandable to a person using a screen reader you should “think like a screen reader” by reading the table as a screen reader would. Sometimes a simple reorganization of the table or reordering of the table cells makes the reading of the table much more comprehensible. Including empty cells can be useful for this purpose. Additionally, the CAPTION tag and the SUMMARY attribute are helpful by providing descriptions of the table. Using TH instead of TD, where appropriate, also makes things more meaningful.

Solutions to Exercises

Learning more

These pages have some excellent tips on layout using CSS:

© Computer Science 110 Staff
This work is licensed under a Creative Commons License
Date Modified: Thursday, 24-Jan-2008 12:31:30 EST