As mentioned in Creating a Page Layout in Dreamweaver, the basic structure of Web pages are in tables. Although you can't always see the tables in a Web browser, you can see them while using Dreamweaver. With this in mind, understanding how tables work and how to use them is critical in Web design.

The Table/Cell Relationship:
This is a simple concept to understand and probably something you've learned before: tables are divided into cells. Look at the image below. Notice that it appears to be one image?

Well, it's actually five separate images each contained within their own cell. Why would someone want to do something like this? It's actually a very important and commonly used concept. First of all, these five images are now held strictly in place by the table. Secondly, each image can now be made into a link which would make this graphic useful as a navigation bar if it said something like Home, Contact, Links, etc. These cells are all contained within one table.

Here are the settings for the above table:

First of all, notice that the table dimensions are 1 row by 5 columns. That's because there were 5 blocks of the images to insert. Next, notice the width of the table is set to 400 pixels. This is because the total image width is 400 pixels. The border set to 0 makes it so that you can't see the table holding these images in a Web browser.

Cell Padding and Cell Spacing:
Cell spacing sets the distance that cells are from each other. Let's try the table from above exactly as it appears, but with cell spacing of 5:

Do you see how cell spacing works? This brings up another point. The table above had to be adjusted to 430 pixels wide since the images are in there (400 pixels wide total) along with the six 5-pixel-wide spaces, the table's width has been forcibly increased (5X6=30, 30+400=430). This is also important to remember when using cell padding.

Cell padding sets the distance you want the cell's content to be from the walls. Notice the difference in these two examples (The borders have been set to a value of 1 so that you can get a better idea of where cells and tables are):

This table has a cell padding of 5.	This table has a cell padding of 0.

Clearly, the one on the right looks correct. Cell padding, however, is useful when you want text to be away from a wall. Notice the difference in these two examples:

In this example, the one on the left looks correct.

You may not have noticed this, but the above two examples show another important concept of the table/cell relationship: tables within tables. Why make tables within tables when you could just make more cells? For the above two examples, cell spacing and cell padding are defined for a table, not for a cell. Look at the following example of the problem that would arise with cells:

The example above is a single table split into 3 cells. The cells on the left end and right end have been split into 2 rows. See how the blank space has been added to the cell on the right and it automatically increases the size of the cell on the left? This can become a huge problem with a big page layout. Instead, it is better to do this:

See how a blank space has been added to the bottom cell of the right table? The table stretches the cell it's in which stretches the cell on the left side, but the tables within them stay the right sizes.