Using Tables in Web Page Design

A Web Hosting Article Contributed by Frances Rhea

Web Page Design Using Tables

Although tables weren't meant to contain lots of text, they can be used to create margins and control the layout of your web page design. Although they can help with your design, if used incorrectly, they cause problems.

Using Smart Tables to Design a Web Page

Tables can be very confusing. A smart table can see everything placed in it and will balance the objects inside it. The more you learn to control tables, the easier it is to design a good web page.

Controlling a Table in Your Web Page Design

Think of a table as a large box with smaller boxes inside it. These are rows and columns. When no constraints are present, the information in shown in an unpredictable manner. Instead, use either relative or absolute sizing. The ideal table uses both absolute and relative sizing. This is so some boxes (cells) stay a certain size to avoid looking messy while other expand or contract as the page is viewed in different window resolutions.

Relative table sizing uses a percentage as the WIDTH for the window. A full browser window is 100%. This type of table width provides flexible tables that change when the window is re-sized.

An absolute table width is specified in pixels. To see the difference, make a table with both relative and absolute widths. If you change the browser window you can see what will happen. Do not apply height dimensions so your table will expand to contain anything you put into it.

Individual columns or cells can have relative widths. This allows the cell to grow with the table. It will not get smaller than the largest object it contains.

A basic table for a web page is one large table with a relative width that contains three rows. The first row contains the page header information. This row has a relative width. The second row is divided into two columns. The first is smaller and is usually absolute to contain the menu information. This way your menu will not get too narrow but stay the way you designed it. The second column contains the main text content for the web page.

This column has a relative width so it can adjust for any browser size. The last row contains any footer information and should also have a relative width. With this type of table any browser size will be able to see the full width of your design.

Nesting Tables in Web Page Design

You can place a table inside a table cell to make more complicated designs. If you build your tables with both relative and absolute features you can maintain control of how your visitors view your web page design.

As in the example above, you could place a new table within the cell for the main content. This should be set to a relative width. This way you can add several rows or columns within the main content area and still control the way it is viewed.