Sizing and Position.

In the second part of this tutorial I gave you a little insight on how to tweak a table. In this step you will learn a little more detail about sizing and positioning of cells within a table.

When sizing a cell or row, you can size it two different ways. You can size it by pixel count or percent. You can make a table 100% wide or just 100 pixels wide. The same attributes can be used within a cell or you can change the height of a row. Be careful when sizing and put some planning into it. If the total widths add up to more than 100% you will not get consistent results.

Sizing can be very useful when using images or background images. If you can control the size of the table or cell you can prevent your image from being tile. This entire page is created using a table. The top left corner image is in a cell of a specific size. The top header is in a wide cell of a specific height. The height is the exact same of the background image of that cell. The image is 100 pixels high but only a few pixels wide. This allows the image to tile itself across the cell to act as a single image but remains flexible. Using a small image also keeps the download time to a minimum. The right hand side was created with the same philosophy. The main section is in a tall cell and grows with the body of the page. The background image of that cell tiles several time depending on how large the body of the page is.

You can also change position of a cell to align it. A cell will sort-of float and flex with a page unless it is told to be in a specific place. The code to do this is shown below.

<table valign=top align=left>
<tr valign=top align=left>
<td valign=top align=left>

The valign controls the alignment vertically and it can use the values of top, middle, bottom, or baseline. The align attribute refers to the horizontal alignment of the tag. It values can be left, center, right, justify, or char.

In the second page of this tutorial I taught you how to make a cell span columns but we didn't discuss how to make a cell span rows. This is the same as colspan except you need to use the word rowspan.

This should be more than enought to get you started on using tables. Please play with the table tag. It will give you great control over the layout of your pages. If you desire more features within the table tags go to the next step.

Now lets go to Step 5