(1)Tables for Page Layout

For many years tables were used as a means to control the positioning of content on a Web page.

Designers found that by dividing the page up as if it were a big table they could control the position of various elements by placing them within cells of the table.

In recent years people on the cutting edge of Web design have changed to a different system for controlling page layout based on advanced CSS coding. This system is much more complex and it is well beyond the scope of this program. However, it is also well beyond the requirements of basic design.

Using tables to set out your content is therefore still the simplest most effective way to position the various elements of your design.

Valid XHTML 1.0 Transitional

Tables

The ability to create tables is an important feature of html. Not only can they be used for displaying information in tabular form but they can also be used as a simple page layout tool(1).

By basing your page layout on a table format you can create a page with a banner image, a navigation bar or two and a center section that contains the main body of a page's text.

Table layout relies on several hierarchical tags:
<table> which informs the browser a table will follow
<tr> which signifies a table row
<td> which signifies a cell.

Defining the number of rows and columns is not necessary as the browser will put the table together based on these tags alone. However in order for your tables to exhibit full functionality it is necessary to insert this line of code above the <html> tag (just copy and paste it):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>

This piece of code simply identifies the specific rules that will apply to the page. In fact, it is a good idea to include it on all pages.

The reasoning and theories behind this are not especially complex nor interesting but if you'd like to read more the World Wide Web Consortium's Web page has lots of information about standards for the Web.

  1. Locate a point on your Web page where you'd like to enter a table. You will be using it to make a navigation bar so it might make sense to put it just below your <h1> tag.

    Although this table will have only a single row and 5 columns there is no upper limit for either of these parameters.

  2. Enter the tags to start and end a table:

    <h1>Bob's World of Trees</h1>
    <table>
    </table>

    <p>Trees are awesome. They are...

  3. Between these opening and closing tags for the table enter a paired set of table row tags

    <h1>Bob's World of Trees</h1>
    <table>
    <tr>
    </tr>

    </table>
    <p>Trees are awesome. They are...

  4. Between the row tags enter a pair of <td> tags. This creates a cell into which you can now place anything such as an image, some text or a hyperlink:

    <h1>Bob's World of Trees</h1>
    <table>
    <tr>
    <td>you can put anything in this cell</td>
    </tr>
    </table>
    <p>Trees are awesome. They are...

  5. A after putting some pertinent links into cells your finished coding should look like this:

    <table>
    <tr>
    <td><a href="http://www.yahoo.com">Yahoo</a></td>
    <td><a href="http://www.google.com">Google</a></td>
    <td><a href="http://www.bbc.co.uk">The BBC</a></td>
    <td><a href="http://www.msn.com">MSN</a></td>
    <td><a href="http://www.cnn.com">CNN</a></td>
    </tr>
    </table>

    The browser will display the html like this:

    Yahoo Google The BBC MSN CNN
  6. Once you've finished your steps save the document.
  7. Start your browser and click File→Open→Browse now choose your file whether it is on the server or on a floppy disk. Your Web page should now contain a table with some number of rows and columns.

    You will notice that the table is represented as a series of words and there are no borders on the table. Using the style= tag within the <table> tag allows you to format any table as much as you want. Refer to the style properties page to see the full range of styles that can be applied to a table layout.

    Example: adding borders and centering a table.

  8. Insert the cursor within the <table> tag and enter:

    <table style="border-style:solid; border-color: red; border-width: 1px; margin-left: auto; margin-right: auto;">
    <tr>
    <td><a href="http://www...

    The browser will display the html like this:

    Yahoo Google The BBC MSN CNN

Congratulations! You've completed the basic web design course. With these skills you can create attractive and functional Web pages.

The final step after page creation is to publish your page so that web users can view it.