This page has a variety of examples which illustrate some ways to improve the design of a basic page using tables. It is not the final word on this subject, but I hope you get some good ideas.
Using the Width Attribute for Tables
|
This is a two column table in which the column widths and heights have not been set. |
With no width set (in most editors leave the width set to auto), the width of the browser determines the width of the column. |
|
Try making your browser window wider and narrower and see what happens to the format of the text. |
However, at all times, the width of the table is set to the width of the brower window. |
|
This table has the width of the columns set using the percent attribute. This column is set to 40% |
This column is set to 60% of the width of the table. |
|
Which means that the table will always occupy 40% of the width at which the table is set. |
The table itself is set to 70%. That means the table will always stretch across 70% of the current width of the browser. |
|
The width of this table is set to a specific number of pixels, 580, and each column is set to the same percentages as the table above. |
You should see that the text does not change it's position. It displays exactly as I typed it originally. |
|
Now make your browser wider and narrower to see how that affects the contents of the cells. |
Whether you use no width, a percent width or a specific pixel width, depends on you. How much control do you want and need? |
If you are planning to use fixed width tables (pixels), 580 pixels is a good width if you want your page to display comfortably in a 640x480 pixel window. Use 750 pixels for an 800x600 window. I don't recommend designing for a 1024x768 pixel window at this time unless you're sure most of your audience has their display set to that resolution.
Tables can also have their own background colors and images. Take a look at this example of what that looks like.
There are other ways you can modify the way a table appears. Here are some examples of what you can do.
Finally, here is an example of a nested table - a table inside a table. This may be a little beyond what you can do right now but it's offered here as something to think about.