Make Your Own Website

Design With Tables

To put it simply, tables are boxes on a web page that can be divided into columns and rows.

There was a day when it was considered bad design to construct a web page using tables. Some browsers had a hard time displaying them and some search engines had trouble reading them.

Today most web designers and automatic page builders use tables in the construction and lay out of web pages.

If your tables are too complicated and your pages too large they will perform slowly on dial up, but the advance of high speed internet has caused most designers to disregard this flaw.

The basic code for a table is shown below:
<table>
<tr>
<td>
</td>
</tr>
</table>

The code follows the standard pattern of opening and closing tags. There is an open and close tag for the table itself, a row (tr), and a cell or column (td).

A cell (td) or group of cells must always be contained in a row (tr). You can define more than one column and more than one row in an individual table.

Later I'll show you how to dress up the appearance of your tables, but for now I'll add a simple border to demonstrate some of the designs that can be created with their code displayed beside.


cell 1

Single Row - Single Cell
<table width="100px" height="100px" border="1">
<tr valign="top">
<td align="center"></td>
</tr></table>

Some attributes for the table tag as shown are width, height and border.

I recommend, when building web pages, setting the width of the main table to 100%. This will allow your page to be adjusted by the viewing browser and your page will also adjust to the resolution of the viewing monitor.

I also recommend setting the resolution of your own monitor to 800X600 pixels before you start building your page. There are still people viewing web pages with their monitors set to 800X600. If you build your pages and your monitor is set to a higher resolution, then anyone viewing your page at 800X600 will have to use the horizontal scrolling function on their browser to read your page.

Most designers won't use the height tag unless they want all of their pages to be set to a specified height. If you leave it off the height of the table is determined by its content.

You can dress up your table borders by using the style tag to define them. I'll give examples for that later. If you don't want borders, just set the border tag to zero.

The row tag (tr) includes the valign attribute. It is set to top. This will cause the content of each cell contained in the row to rise to the top of its column. Other choices for the valign or vertical align attribute are middle and bottom.

The cell or column tag (td) includes the align attribute. It is set to center. Other choices are left and right.

Now I'll add a second column to the existing table code.

cell 1 cell 2

Single Row - 2 Cells or Columns
<table width="100px" height="100px" border="1">
<tr valign="top">
<td align="center"></td>
<td align="center"></td>
</tr></table>

I added a second column or cell to this table simply by adding a set of cell tags to the existing row. Because I didn't supply a width attribute for either cell the browser divides the available row space evenly.

When you start laying out your own pages, you can add a width attribute to each cell and tell the browser how wide you want the cell to be. Width can be defined in percentages of available space or in pixels.

In the next example I'll increase the width of the table and set the width of one of the cells using pixels.

cell 1 cell 2

Single Row - 2 Cells or Columns - Width Setting
<table width="200px" height="100px" border="1">
<tr valign="top">
<td width="50px" align="center"></td>
<td align="center"></td>
</tr></table>

The only change I made to produce the table shown above was to increase the width of the main table to 200 px. I then defined the width of the first cell as 50px or 50 pixels. The browser makes the second cell the width of the remaining undefined space.

I could add as many cells to this row as I wanted and set individual widths to each.

Building a Page

When building a page with tables I recommend using several single row tables stacked on top of each other.

The first table might one or two cells to display your logo and maybe a company slogan of some sort.

Follow this by another single row table with multiple cells to encase the body content and possibly a navigational tree made up of links.

A third single row table might include your footer information: company name, address information, URL, email address and if you desire a date telling when the page was last modified.

You could create a 3 row table to do all of this and it would look the same, but if the page has any size it will load about 3 times slower than a page using single row tables. I'm talking about people viewing the site on dial up connections. There are still a lot of them out there.

Summary

Before you start building your web page, set your monitor resolution to 800X600.

Set the width of each single row table that you build to 100%.

For faster pages, use several single row tables to build your page, as opposed to a single table with multiple rows and columns.

Code for the Web Page

<html>
<head>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td width="200px" align="center">Logo</td>
<td align="center">Slogan</td>
</tr></table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td width="150px" align="center">Links</td>
<td align="center">Content</td>
</tr></table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td align="center">Footer</td>
</tr></table>
</body>
</html>

Read this for enhancing your borders.

Read the lesson on Modifying Your Template.


Home

The Right Tool

Adding Content

Make Your Template

Publishing

Additional Helps

Modifying Your Template

More HTML Code

Color Schemes

Color Code Chart

Graphic Headings

Recommended Products

I Need Help


Make My Own Website is the Property of
Net Success 2000 Plus Inc
Po Box 1508
Somerset, KY 42502 USA
Copyright © 2006
Last Modified: May 30, 2007