1. What tables do for you
One of the challenges novice web builders face is keeping their content from shifting unexpectedly in a web browser. You prepare a page in a "what-you-see-is-what-you-get" HTML editor (FrontPage, Dreamweaver, PageMill), and it looks perfect. You upload it, view it in a browser and gasp. Pictures have gone south, text has gone zany. You're pretty sure demonic possession is at play.

The truth is a little less scary. HTML, the language of the web, was created for text communication instead of design. Despite many changes and adaptations to HTML that make possible the fancy web sites you see today, web pages look different to different users. Content may appear differently depending on the size of the user's browser windows. The size and resolution of monitors, the user's default font size, and a host of other issues further complicate the situation.

This is why almost every good web site you see out there uses tables in its design. Think about a table like Velcro. It holds your content in place

You usually don't see the tables, because their borders can be invisible. That means you don't see ugly lines interrupting your design. And here's more good news: Tables in HTML are not the static, boring looking stuff of spreadsheets in dusty accounting offices. Table cells hold text, images, multimedia content -- anything you want on the web.

There are other means of positioning web content in a site. Tables are the best choice, however, because almost every browser in use out there can see them. There are, of course, exceptions, but if you're looking for a lowest common denominator solution, tables are it.

2. What a table looks like

Below is a table. Its borders are visible so you can see it, but again, most tables are invisible to the end user.

This particular table has two "rows," and three "columns." Rows go across. Columns go down.

The table has a total of six "cells," that is six boxes which may hold content. The content can be aligned vertically and horizontally within each box to create interesting and functional designs. For example:

	The cell to the left of this one contains a bullet image, which is aligned to right, and also to the bottom of the cell.
Text aligned left	Text aligned right	Text in the middle

Below is the same table again, but a second table has been added into the lower left cell. That smaller, "nested" table contains one column and four rows. Its four cells might be used for menu choices. A parish logo image and a picture of Harry the Angel occupy other cells. Cells expand to hold the content you place within them.

Item 1 Item 2 Item 3 Item 4	Text aligned right

You also probably noticed that the cells in the nested table are yellow. The background and borders of tables and individual table cells can be colored to your liking.

Here's one more generation of this table, just to prove to you that you don't always see the tables. The menu items have been replaced by images, the background of the nested table has been changed back to white, and the text in the lower middle cell has been centered within the cell. Most noticeably, the borders have been removed.

	Welcome to our new site!

Creating Tables

Like everything in HTML, tables are created with "tags." You need not learn HTML to make tables . Table tags look like this:

So, the above table would have one row and two cells. With some text in each cell, it would look like this:

Not a very interesting table. But tables can take on more personality and aid in design when "attributes" are used within the existing tags and new tags are added. Suppose we revised this table to look like this:

Here's what the resulting table would look like:

Tools for Tables

You could hand-code a very fancy and complicated table with hundreds of cells, many nested tables and all sorts of attributes. This tutorial is not going to show you how, though, because you do not need to hand-code your tables.

There are many reasonably priced "HTML Editors" that make tables for you. You may already be familiar with Microsoft FrontPage, Macromedia Dreamweaver, Adobe PageMill or some other brand of HTML editor. All of them will allow you to insert tables into an HTML file with a simple interface. For example, Dreamweaver 4's insert table command gives the user this window.

Rows, alignment within cells, cell spacing and padding, background color and other table attributes can be adjusted with similar interfaces.

Dreamweaver 4 allows web builders to draw table cells in a layout mode, and then click on a "standard view" button to turn the cells into tables. The technique allows novices to create complex tables quickly and easily.

So which tool is right for you? Here are some resources to help you make the right decision. Ask your colleagues about their experiences in The Upper Room online community's Parish Web Development conversation.

Or, if you're ready to move, on proceed to our "Links" page.