Ahhh ..... You've completed your basic web page, successfully uploaded it, and all the links work. You can sit back and relax, right? Trust me, it won't be long before you start thinking of changes and additions you want to make to your first effort. As your pages become more complex, you will look for more ways to control both your text layout and your page design.
One answer is tables. This page layout uses one large TABLE, with smaller tables nested inside for examples. For more suggestions on using tables for page design, see Rod Neep's Web Page Design.
The Basic Table
While tables are a basic tool for page design, they are probably the
most difficult to understand and use of the basic tags. TABLE tags
the same rules we've already discussed in
VERY Basic HTML.
can still be confusing because of the way they the code is arranged.
The code for a simple, two row, two column TABLE looks like this:
Note the cell contents appear horizontally, across the row, but the code for each cell is written below the preceding cell in the row. Once you get the hang of looking down the code to find the cell that want to add or edit, you'll be able to find and correct any forgotten or misplaced closing tags for individual rows and cells. If a page containing table code becomes invisible in your browser, you'll know you overlooked one of those tags.
But after looking at the above example, you're probably asking, why bother? That's a lot of code to write and I could do the same thing by centering the text. The answer is, of course, more tags! The formatting tags that can be used with tables (and your imagination) allow you to create a wide variety of layouts and effects. Let's look at just a few things you can do with that basic table.
First, let's display the border. It's always there. You just have to decide whether or not you want it to show. Visible borders are useful when you want to display information in a chart. It will also make it easier for you to see the results of some of the other tags we're going to discuss.
Borders can be 0 pixels wide (invisible) as on this page, 1 pixel wide for definition, or much wider for special effects. BORDER is (you guessed it) an attribute for the TABLE tag, and the value is the width of the border expressed in pixels:
The examples above look a little crowded; so, let's pad the cells. Cellpadding creates empty space around whatever is contained within the cells. Specify the number of pixels (space) by adding the attribute to the TABLE tag:
Tag to modify: table
You can also create empty space between the cells. The cellspacing attribute can be used with different border widths to create a nice effect:
Tag to modify: table
Add a background color or image to the entire table by adding
the background attribute to the TABLE tag (same as adding the attribute
Add background colors or images to individual cells
by adding the attribute to the cell
The colspan and rowspan attributes can be added to individual cells to create variations in the number of cells in a column or row.
Alignment and Cell Size
Control the placement of cell content by adding the
alignment attribute(s) to the
Horizontal alignment: align="left|center|right"
Cells will adjust automatically to accommodate the largest item in a row or column. To balance your table, you may want to change this default size. Add the width or height attribute. The value may be specified in pixels, or as a percentage: 20%, 50%, etc.
Tables can be used for a variety of things besides alignment. A friend once told me, "You can do anything with tables.... well, almost"
Nesting tables inside the cell of another table can create some
interesting and useful effects. Need a button? A graphic will add
kilobytes to your page size. Use a table instead
and link the cell text to the appropriate page. Better yet, nest a
How about that row of buttons you'd like to put on each of your pages?
Tired of those plain grey borders produced by the BORDER tag?
Need a special frame for a special photograph?
One word of caution.... Historically, no two browsers rendered tables exactly the same way. There were even differences between different versions of the same browser. The left button below is constructed using two tables. The one on the right is constructed using three tables. They look very different when viewed in Internet Explorer 5.5, but are virtually identical when viewed in Netscape 4.08. If you are trying for a specific effect using tables, check your page in several different browsers to be sure they all render your tables in a way you find acceptable.
View source code for the examples.
Congratulations! You're a Webmaster
Writing or editing the HTML for tables is not the easiest part of
HTML. Which is why many experienced web authors use a WYSIWYG editor to
create their table outlines. It is very easy to
overlook a closing row
Whether or not you choose to write the code yourself, you'll find TABLES one of the most useful tools in your web authoring kit.