Tables

A Very Brief Tutorial

By George Jaros


What Are Tables?

Tables are a way to structure information on a web page. You can use tables to layout information in rows and columns and really control where and how information is displayed on a web page.

Why Use Tables?

The proper way to lay out graphics and text on a web page is with Tables. Some people havve tried using Breaks (<BR>) and Non Breaking Spaces (&nbsp;), but as you will discover if you try using these, results are very unpredictable and difficult to control. You should be able to find some tutorials on the web for making tables. They can get pretty complex (our entire site and others we build are laid out in complex tables), but setting up simple tables is relatively simple.

In AbleCommerce, you can control the descriptions of your products, categories, web page content, and many other fields in the Administrator. Often you can greatly improve the look and feel of your web site by using tables to lay out your information.

For example, compare this information using an outline type list to the next one with tables:

Department of Transportation (DOT) Modes
    Federal Aviation Administration (FAA)
      2004 Random Testing Rate
      • Drug Testing Rate - 25%
      • Alcohol Testing - 10%
    Federal Transit Administration (FTA)
      2004 Random Testing Rate
      • Drug Testing Rate - 50%
      • Alcohol Testing - 10%

Department of Transportation (DOT) Mode 2004 Random Testing Rate
Federal Aviation Administration (FAA)
Drug Testing Rate 25%
Alcohol Testing 10%
Federal Transit Administration (FTA)
Drug Testing Rate 50%
Alcohol Testing 10%

As you can see, the information is much clearer and easier to read with tables. Especially if there is a lot of information. You can also use tables to control the layout of images. Look at this example:

  Tasklight 1 - This tasklight serves a variety of purposes. A super bright light will illuminate your work area while a separate magnifying glass is attached to a snake neck so you can easily see anywhere on your desktop.
Your Price: $29.95
  Tasklight 2 - This tasklight features a spring powered tension arm for easily lighting anywhere in your work area.
Your Price: $19.95
  Tasklight 3 - A combination tasklight and magnifying class for working with small parts or anywhere else you need a good close up view.
Your Price: $49.99
  Tasklight 4 - Our premium tasklight features a heavy base, solid construction, and a 36" extension arm so you can get light just where you need it. An included attachment allows the light to anchor firmly to the desk without the stand.
Your Price: $35.95

How To Use Tables

A table is composed of mainly three separate HTML tags (there are more, but they only come into play with complex tables).

Table Tags are nested within each other, they have a hierarchy. The <Table> tags must be on the outside. Next are <TR> tags. They define your table rows. Finally you use <TD> tags to define the cells within a row. Between the <TD> and </TD> tags you put your content.

Each start tag can have a series of parameters associated with it. Closing tags (</table>, </tr>,</td>) don't use any parameters.

<TABLE> tag can have parameters like:

  • border="1" - where 1 is the width of the border - 0 means no border
  • cellpadding="5" - where 5 is the space between the edge of the cells and the content. Kind of like a cell margin.
  • cellspacing="3" - where 3 is the space between cells. If you have a border displaying and the cellspacing is greater than 0 you will get double lines between cells.
  • width="90%" - where 90% is the width of the table. This is the percentage of the width of the table's container (the whole screen, or if this table is part of the contents of a cell of a different table, the width of that containing cell). You can also use width="200" to force the table to a certain width in pixels, in this case 200 pixels.

    <TD> tags can also have several parameters such as:
  • width="145" - you can also use a %. This will lock the width of a cell to a certain dimension, either a certain number of pixels, or a certain % of the table width.
  • height="50" - this works the same as width, but locks in the height of a cell.
  • align="center" - this sets how the content will align within the cell. You can use center, left or right.
  • valign="top" - this sets the vertical alignment of the cell contents. You can use top, bottom or middle.

    Sample Table

    Here is the code for a very simple table with two rows and three cells in each row:

    <TABLE border="1">
        <TR>
           <TD>A-1</TD>
           <TD>A-2</TD>
        </TR>
        <TR>
           <TD>B-1</TD>
           <TD>B-2</TD>
        </TR>
    </TABLE>

    Which will look like this:

    A-1 A-2
    B-1 B-2

    Complex Tables

    Here are examples of more complex tables and what they look like:


    <table border="4" bordercolor="blue" width="400" cellpadding="10" cellspacing="5" bgcolor="gray">
    <caption align="bottom"> caption contents </caption>
        <tr bgcolor="#FFDDCC">
           <th valign="bottom" width="25%"> headercell contents </th>
           <td valign="top" width="120"> data cell contents </td>
           <td rowspan="2" bordercolor="red"> data cell contents </td>
        </tr>
        <tr>
           <th align="right"> header cell contents </th>
           <td bordercolor="green"> data cell contents </td>
        </tr>
        <tr>
           <th colspan="2" height="250"> headercell contents </th>
           <td bgcolor="yellow" align="center"> data cell contents </td>
        </tr>
    </table>

    caption contents
    headercell contents data cell contents data cell contents
    header cell contents data cell contents
    headercell contents data cell contents

    A table within a table:


    <table border="1" bordercolor="red" width="300" cellpadding="2" cellspacing="0" bgcolor="#AACCEE">
        <tr height="10">
           <td valign="top" width="30%" height="10"> data cell </td>
           <td valign="top" height="10"> data cell </td>
        </tr>
        <tr>
           <td valign="top"> data cell </td>
           <td align="center">
             <table border="3" cellpadding="0" cellspacing="2" height="200" width="75%" bgcolor="#9DFB9F">
                 <tr>
                    <th colspan="2"> Inner Table </th>
                 </tr>
                 <tr>
                    <td valign="top"> data cell </td>
                    <td valign="top"> data cell </td>
                 </tr>
                 <tr>
                    <td valign="top"> data cell </td>
                    <td valign="top"> data cell </td>
                 </tr>
             </table>
           </td>
        </tr>
    </table>

    data cell data cell
    data cell
    Inner Table
    data cell data cell
    data cell data cell

    Conclusion

    Additionally you can use Cascading Style Sheets to get some really detailed formatting, both for tables and for other aspects of the web page. I won't get into CSS now, that's a whole other can of worms, but you should know that it exists and can give you even greater control of how pages look.

    Hopefully this will help you layout text and graphics within your site. There are a slew of other parameters that can be used for tables, like colspan, rowspan, bgcolor, background, etc. But they are used for creating more complex tables. There should be some tutorials on the web that can help you learn more about tables.


  •  

     

    Pages by George Jaros
    © 2004 George Jaros and Web 2 Market
    October 06, 2004