What Is Tabular Formatting?

Tabular formatting is uses tables to visually organize the content of your web pages. There are two main reasons why a web page needs some thoughtful layout.

First, not all content is equal. Some items like trivial details, notes, certain images, and link lists are best set apart from the main content of the page. This helps viewers determine what's important, what's less important, and how to navigate your page. A good layout doesn't interrupt the main content with trivia and site navigational links.

Secondly, a well formatted page just looks better. A consistent page layout on your site lets the viewer know that they are still on your site. It can also help set the tone of your site.

Tabular layout is no big trick and is almost as old as the Web. C-Net was the first site that got a lot of attention for using a table to lay out their whole page. They used a table to make a column of links -- a formatting practice that's very common today.

HTML has no native way to make columns. There's no tag for columns. Tables, however, will let you position your content any way you'd like by putting the content in <table> cells and positioning the cells anywhere you can code them.

Tabular formatting is no different than making any other table. In fact, most layout tables are simpler than the examples you've coded so far. The big difference is in keeping up with which cell holds what content.

2-Column Layout

By far one of the most popular and useful tabular page layouts is the 2-column layout and its variants. Below is an undersized example of a 2-column page layout:

Normally, the red border would be turned off (BORDER=0). CELLSPACING is almost always set to zero to insure that the cells all butt up against each other without any gaps. CELLSPACING is generally set to 0 or a very low number representing a base margin. Margins are generally determined by the styling and overall content of the cell.

Also notice that both cells have a vertical alignment VALIGN="top". This is needed because one column will almost always be longer than the other. The content of the shorter column might get pushed out of sight with the default VALIGN="middle".

Click here to see an example of a simple two-column page. Notice here that the BORDER and CELLSPACING are set to zero. There is a small CELLPADDING of 5 pixels used to make a small margin for the links column to the left. The margin of the content area comes from styling the paragraph with CSS, not the layout table's code.

The code for the sample page is just like any other table with two cells side-by-side:

<table width="100%" cellspacing=0 cellpadding=5 border=0>

<tr>
<td width="20%" align="center" valign="top" bgcolor="#000000">
<a href="#">Link#1</a><br><br>
<a href="#">Link #2</a><br><br>
<a href="#">Link #3</a><br><br>
</td>

<td width="80%" align="left" valign="top" bgcolor="#ffffff">
<p>This is the main content. The broad margin here is made with CSS and not CELLPADDING. I only added a 5 pixels of CELLPADDING to make a small margin for the links column.</p>

<p>This page doesn't stretch far enough to scroll at most resolutions. Don't worry. With real content, the page will get a lot taller.</p>
</td>

</tr>
</table>

Again, the three most important items here are that BORDER and CELLSPACING are set to zero in the <table> tag and VALIGN is set to "top" in both <td> tags.

We could just as easily move the links column to the right side of the page by coding it after the content column. In other words, just switch places in the code and the links column will appear on the right.

Like with any table, it's important to note that the WIDTHs add up. The links column is 20% of the table wide and the content column is 80% of the table wide. This adds up to 100%. The table might be skewed or side-scrolling might be required if the WIDTHs didn't add up.

3-Column Layout

The 3-column layout is about as simple as the two-column one. The most common use for a three-column layout is to have the main content in the center, links in one outside column and notes in the other outside column.

To design the layout table, some consideration must be given to each cell's WIDTH. You want the WIDTH to be adequate enough to hold its content. Above all, you want to prevent making the viewer side-scroll if at all possible.

Click here to see an example of a 3-column layout.

You can see that all we did was code another narrow column after the main content column. I took the space for this new column from the main column by resizing the main column from 80% to 60%. This gave me the 20% WIDTH I used for the third column. Here's the code:

<table width="100%" cellspacing=0 cellpadding=5 border=0>

<tr>
<td width="20%" align="center" valign="top" bgcolor="#000000">
<a href="#">Link#1</a><br><br>
<a href="#">Link #2</a><br><br>
<a href="#">Link #3</a><br><br>
</td>

<td width="60%" align="left" valign="top" bgcolor="#ffffff">
<p>This is the main content. The broad margin here is made with CSS and not CELLPADDING. I only added a 5 pixels of CELLPADDING to make a small margin for the links column.</p>

<p>This page doesn't stretch far enough to scroll at most resolutions. Don't worry. With real content, the page will get a lot taller.</p>
</td>

<td width="20%" align="left" valign="top" bgcolor="#00ff00">

<p class="small">Gee, this looks like a good place for notes or maybe some inset boxes.</p>

</td>

</tr>
</table>

The only thing to note here is that the WIDTHs still have to add up to the table's overall width.

Exercises

Make some pages with two and three columns. Make at least three from scratch. Explore ways to present links and notes in a column to make them look good. Put inset boxes inside narrow columns.

To Next Advanced HTML Lesson

Back To Advanced HTML Index