Using Table Attributes

Now that you've got to grips with the basics of tables, we can start to get more complicated using table attributes.

This is probably a good time to remind you that not all browsers interpret HTML in the same way. Always check how things look in the main browsers, just to be sure everything looks how you expect.

Column Sizing

One thing that you'll want to do a lot with your tables is control their width. The attribute to use for this is WIDTH You can specify a value either in pixels or as a percentage (of the screen for entire tables, or of the table for individual columns). You can also use a value of "*" if you want to column to just take up the remaining available space. You can't use that too often though - for example, you can't tell two columns to take up the remaining space.

Here's an example:

<TABLE WIDTH="300">
<TR>
<TD WIDTH="25%">Row 1 Cell 1</TD>
<TD WIDTH="*">Row 1 Cell 2</TD>
</TR>
<TR>
<TD>Row 2 Cell 1</TD>
<TD>Row 2 Cell 2</TD>
</TR>
</TABLE>

You can get away with only specifying widths in the first row - all the cells below will adjust to the same size.

NB: When using more complicated tables it is not always possible to force a table cell to be wider than the data within it. You can get around this problem by inserting a transparent GIF image in the cell of the width required. For a cell 300 pixels wide, insert an image 300x1 pixels in size. This should be enough to force the browser and will not considerably increase the file size. This is normally referred to as using spacer images.

Table Alignment

You can use the ALIGN attribute within any of the table tags with the values LEFT, CENTER or RIGHT.

A useful attribute of the TD and TR tags is VALIGN - this defines how to align the table contents vertically. The values are TOP, MIDDLE and BOTTOM. It's MIDDLE for Vertical references and CENTER for horizontal ones.

<TABLE HEIGHT="100" WIDTH="300" ALIGN="CENTER">
<TR>
<TD VALIGN="TOP">Row 1 Cell 1</TD>
<TD ALIGN="CENTER">Row 1 Cell 2</TD>
</TR>
<TR>
<TD VALIGN="BOTTOM">Row 2 Cell 1</TD>
<TD ALIGN="RIGHT" VALIGN="TOP">Row 2 Cell 2</TD>
</TR>
</TABLE>

Cell Spacing

If you want to put some space in between your cells, you can use the CELLPADDING and CELLSPACING attributes of the TABLE tag. These attributes take number values (from 0 for no spacing) and generally have very similar affects. The difference between them is that CELLSPACING adds space actually between the cells and CELLPADDING adds space within the cells. The following examples should make things clearer:

<TABLE CELLPADDING="20">
<TR>
<TD>Row 1 Cell 1</TD>
<TD>Row 1 Cell 2</TD>
</TR>
<TR>
<TD>Row 2 Cell 1</TD>
<TD>Row 2 Cell 2</TD>
</TR>
</TABLE>

<TABLE CELLSPACING="20">
<TR>
<TD>Row 1 Cell 1</TD>
<TD>Row 1 Cell 2</TD>
</TR>
<TR>
<TD>Row 2 Cell 1</TD>
<TD>Row 2 Cell 2</TD>
</TR>
</TABLE>

Read on to the next section for more table attributes.