Using Tables to Position Things

You may think that tables are just used for columns of figures. In HTML this could not be further from the truth. Although this may have been how the table markup was originally conceived, in practice it provides the most useful way of positioning items on a web page, and of adding graphic elements to emphasise their relationship.

Like a list, a table contains a number of items within an overall container. However with a table there are two levels of structure. The table contains one or more rows and each row contains one or more data items. So the HTML required for a simple table with two rows each of two colums, would look like:

        <TABLE border=1>
                <TR>
                        <TD>Row 1, Column 1</TD>
                        <TD>Row 1, Column 2</TD>
                </TR>
                <TR>
                        <TD>Row 2, Column 1</TD>
                        <TD>Row 2, Column 2</TD>
                </TR>
        </TABLE>

Which would result in a table looking like;

Row 1,Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 1

An alternative to the <TD> (Table Data) tag is the <TH> (Table Heading) tag. The only difference is that the contents of this cell are by default centered in the cell and emboldened, whereas the Table Data cell contents are by default left aligned and in a normal typeface.

The power of the table lies chiefly in the plethora of attributes that may be applied to the various tags. Here, we will just describe the most useful ones. If you want to know all the possibilities, you should consult a more detailed reference work. One word of warning, there are a some attributes and additional table tags, that only work with certain makes of browser. We won't include any of these here.

The border attribute for the <TABLE> tag adds a border around the cells of the table and the table as a whole. I used it in the example above to show you how the cells are positioned. The value specifies the width of the border. Try the effect of different values. If you include the word "border" with no value, a default of 1 will be assumed. If you omit the border attribute altogether a value of 0 will be assumed and the table will have no borders.
This can be very useful when you want to force a particular layout on a page, without it being apparent that a table is being used for this purpose. However it is quite often a good idea to add a border=1attribute when developing such a table. It allows you to see exactly where your table cells are positioned. When you are happy with the layout, you remove the border attribute and the "table" disappears, but the required layout remains.
The bgcolor attribute can be applied to the <TABLE>, <TR> and <TD> tags, with results which you can probably predict, from its behaviour when applied to the <BODY> tag. A background colour applied to an individual cell, over-rides a colour specified for an entire row, which in turn over-rides the background colour specified for the entire table.
The width attribute can be applied to both the <TABLE> and the <TD> tags. It may take a numeric value of pixels, but much more usefully it can be expressed as a percentage of the screen width. This is done by following the number with a % symbol. Thus a particularly common idiom when using a table to define page layout is:-
```
        <TABLE width=100%>
```
This ensures that the complete table occupies the full width of your browser window.
Browsers are good at working out the best cell widths for themselves, so it is usually unnecessary to specify the widths of individual cells. All the cells in a column have the same width, so the overall width of a column will be set by the space needed for the largest item in the column. If the required space is not available without exceeding the table width, data will be wrapped within the cells to fit.
The height attribute can be applied to both the <TABLE> and the <TD> tags, in the same way. Again it may take a numeric value of pixels or a percentage of the screen height.
The colspan attribute can be applied to a <TD> tag to make that cell span two or more columns. (By default, there must be the same number of cells in each row. If any row has less cells than the others, the browser will add extra dummy cells at the end of the row). The value of the attribute is the number of columns the cell is to span.
The rowspan attribute can be applied to the <TD> tag in the same way, to force that cell to span two or more rows. You need to plan the cells in the next row, to leave space for the tall cell.
The align and valign attributes can be applied to the <TD> and <TR> tags, to specify the horizontal and vertical alignment of the items within the individual cells. When applied to the <TR> tag, it affects all the cells in the row.
The align attribute can take the values, left, center and right, whilst the valign attribute can take the values bottom, middle and top.

In the absence of an align attribute the contents of a <TD> cell will be left aligned, and of a <TH> cell will be centered. In the absence of a valign attribute, the contents of all cells will be in the middle of the cell.

Note that it is not possible to apply these cell alignment attributes to all the cells in a table, by applying them to the <TABLE> tag. This tag can take an align attribute, but its affect is to align the whole table horizontally within the browser window. There is a snag with this however. Just as with the <IMG> tag, not all browsers respect its align attribute. It is therefore better, if you want to center your table, to put the whole table within a set of <CENTER> and </CENTER> tags.

In a similar vein, there is a <TBODY> tag which allows default alignment and colour attributes to be set for all the cells in a table. Unfortunately it too is not supported in some of the common browsers, so is best avoided.
The final attributes I shall describe are cellpadding and cellspacing. These both apply only to the <TABLE> tag and affect all the cells within the table. Cellpadding determines the space within each cell between the cell contents and the edges of the cell. Cellspacing determines the space between cells. The values for both these attributes are specified in pixels.

Occasionally you may want one of your cells in a table to be empty. If you have nothing between your <TD> and </TD> tags or just leave a space between them, then instead of the empty cell you wanted, the table's bgcolor will spread right across the cell. The way around this is to place   between the tags. This is the "non-breaking space" character entity which we introduced on the "Add Some Variety" page. The example table below uses this technique to create the empty yellow cell.

If the table properties described so far are not sufficient to enable you to achieve that perfect layout, you can always make life a little more complicated by placing tables within tables! Any <TD> item may itself be a complete table (or a list, or an image) so it is possible to achieve just about any conceivable layout with a little thought. If you do attempt this, it is a good idea to ensure that you indent your source text carefully to make sure that you end inner tables before outer ones etc.

The only way to get familier with table mark up is to practice, so have a play with some tables on your web pages and see which ones you like. Also have a look at the source code for some of the pages on this tutorial section and my main Shotover web site, and see how I have used tables. Even a simple single cell table can be useful. This is the way I achieve the nice 3-D border effect for the headings on the main web site.

To finish off, here is an example of a really crazy table, including some of the mark up that has been described here. It is followed by a listing of its markup. See if you can work out what is happening.

A Wacky Table

Row 1,Column 1

Row 1, Column 2

Row 2, Column 1

A
B	C

Here is the HTML for this table:-

<CENTER>
<TABLE border="10" bgcolor="99cccc" cellspacing="10" cellpadding="20">
        <TR>
                <TH colspan="2">A Wacky Table</TH>
        </TR>
        <TR bgcolor="669999">
                <TD>Row 1,Column 1</TD>
                <TD bgcolor="996699">Row 1, Column 2</TD>
        </TR>
        <TR bgcolor="pink">
                <TD>Row 2, Column 1</TD>
                <TD align="center">
                        <TABLE border="1" bgcolor="red" cellpadding="5">
                                <TR>
                                        <TD bgcolor="cyan">A</TD>
                                        <TD bgcolor="yellow">&nbsp;</TD>
                                </TR>
                                <TR>
                                        <TD bgcolor="#00ff00">B</TD>
                                        <TD bgcolor="white">C</TD>
                                </TR>
                        </TABLE>
                </TD>
        </TR>
</TABLE>
</CENTER>

Back to index.

Forward to next page.

Last Updated 2007-10-30