Separation of Content and Space: Tables Split Up Web Page

By CHRISTINE FREY

March 29, 2001 12 AM PT

clfrey@aol.com

Most Web pages are divided into sections of content, often including colorful sidebars or navigation bars in addition to the main text area. Such designs are created with tables, a design technique that allows you to separate content into columns and rows.

Working within the body tag, you can create several tables on one page or construct one table that spans the entire browser screen.

Tables consist of at least three tags: TABLE, TR (table row) and TD (table data). Each tag, along with its corresponding end tag, is used to create specific elements. A table of two rows and two columns, for example, would use the following HTML code:

one

two

three

four

When formatting your table, it is best to include a border attribute in the table tag; this will guide your design and make it easier for you to spot errors. You can remove the attribute once you have completed the design if you do not want the border to appear on screen.

Headings, which use the TH tag, will add bold and centered titles to columns or rows. Substitute the heading tag for the data tag in the first row of your table so your HTML code resembles the following:

Column A

Column B

one

two

You also can create single cells that span the length or width of multiple cells to vary your table options. Include the colspan attribute, and the value for the number of columns you wish to span, in the data tag. The following example will produce one cell that extends the length of the two cells below it:

Cell spanning

one

two

In addition to cells that span several columns, you can also form cells that span several rows by replacing the colspan attribute with the rowspan attribute within the table data tag. Both attributes can modify the same tag, producing cells that span several columns and rows at once.

Unless you specify its height and width, your table will expand to fit its largest entry or the width of the browser screen. You can add height and width attributes to the entire table, individual rows or cells by working within their respective tags. Set their values in either pixels or percentages.

Once you have created the framework for your form, you can concentrate on how to display its content. Two attributes of the table tag, cellpadding and cellspacing, determine the amount of open space within a table. Cellpadding determines the number of pixels between the cell edges and the data it contains. Cellspacing determines the number of pixels between each cell. Both use numerical values.

Data contained in each cell--with the exception of cells that include table headings--are vertically centered and left-justified by default.

To change the horizontal alignment, add the align attribute to the table row, table data or table header tags; its values include left, right, center and justify. To change the vertical alignment, add the valign attribute; its values include top, bottom and baseline.

You also can adjust the placement of the entire table by including the align attribute within the table tag. Giving it a left or right value will wrap the page’s other content around the table.

To make your table stand out from the rest of your page, you could change its background color. Adding the bgcolor attribute to the table tag defines the color for the entire table; including it in the table row or table data tags will change those specific cells. If you decide to include a border on your table, you can set its color with the bordercolor attribute in the table tag.

Small to medium-size tables are useful for presenting information in an easy-to-read form, but Web designers use larger ones to create more sophisticated page design. Web pages that include navigation bars alongside content are usually achieved with tables that have one row and two or three columns.

The following HTML code, for example, creates a blue sidebar that is 200 pixels wide in the first column and a text area in the second:

I have already learned about:

1. Web page providers

2. HTML tags

3. HTML attributes

4. Links and images

5. Forms

6. Tables

Welcome to my first Web page.

Enjoy your visit!

Return soon for more HTML developments.

In this case, all of the content appearing in the sidebar is contained within the first set of table data tags; the content in the text area is contained within the second set of table data tags. Your table, however, can be more dynamic by adding links and images within each of the columns.

hristine Frey is a freelance writer.

(BEGIN TEXT OF INFOBOX / INFOGRAPHIC)

Building Your Own Web Page

1. Picking the right provider

2. Understanding HTML

3. More HTML

4. Adding links, photos and graphics

5. Creating forms

Today: Using tables

7. Navigating with frames

8. Getting yourself found

9. Making money on a personal site