Tables

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:

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:

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> </TABLE> - This is the main Table Tag
<TR> </TR> - This designates a Table Row
<TD> </TD> - This designates a Table Data Cell - This is the meat of a table. In a Table Data Cell you can include any other HTML code, including (but not limited to) text, links, images and other tables.

Seldom used tags - listed most common to least common:
<TH> </TH> - This designates a Table Header Cell - This is the same as a TD tag but will automatically bold any included text.
<CAPTION> </CAPTION> - This designates a Caption Cell
<TBODY> </TBODY> - This designates a Table Body Area
<THEAD> </THEAD> - This designates a Table Head Area
<TFOOT> </TFOOT> - This designates a Table Foot Area
<COLGROUP> </COLGROUP> - This designates a Table Column Group
<COL> </COL> - This designates a Table Table Foot

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.