Contents

• Some important attributes:
  • Attributes of TABLE:
  • Attributes of TD and TH:
• Additional elements:
• Further notes:
• Complex tables
• Layout tables

Tables are an extremely useful method of formatting. A basic table is structured as follows: Each table <TABLE> contains one or more table rows <TR>, each of which contains one or more table data cells <TD>

This code will produce the following table:

Back to contents || Back to top

Some important attributes:

Back to contents || Back to top

Attributes of TABLE:

• SUMMARY="brief description of the table" (this is required, i.e. you must include this or the HTML is invalid)
• BORDER: sets the thickness of the border in pixels. If you set BORDER="0" then no border will be shown.
• CELLPADDING: sets the padding between the edge of the cell and the text. E.g. CELLPADDING="5" (5 pixels). In the example above no CELLPADDING was set and the text is hard up against the lines.
• BGCOLOR: sets background colour for the entire table. E.g. BGCOLOR="#CCFFFF"
• CELLSPACING: sets spacing between cells.
• WIDTH: sets the total width of the table. Can be a number of pixels (e.g. WIDTH="500", not recommended) or a percentage of the page width (e.g. WIDTH="80%"). It is common to set WIDTH="100%"

Back to contents || Back to top

Attributes of TD (and TH, see below):

• BGCOLOR: sets background colour for a cell. E.g. BGCOLOR="#FFFFCC". This overrides any BGCOLOR set for the table as a whole.
• WIDTH: width of the cell. Can be a number of pixels (e.g. WIDTH="100", not recommended) or a percentage of the table row (e.g. WIDTH="25%")
• ALIGN: sets the alignment of the text within the cell. ALIGN="left" sets it left-justified, "center" makes it centred, "right" makes it right-justified.

Using these, we can now make the table more elegant:

This will produce the following table:

Back to contents || Back to top

Additional elements:

There are a number of additional (optional) elements which can be used in tables.

Caption: a table can include one <CAPTION> </CAPTION> element. This gives a caption to the whole table. Unless you are using style sheets, it is not easy to format a CAPTION satisfactorily and it may be better just to use a H1-6 heading.

Table header cells: If your table has headers to its rows or columns (and in most cases, with tabular data, it should) use TH instead of TD for the relevant cell. For example, suppose we have a table of classrooms and times:

This will produce the following table:

Notice that the table headers (TH, defining what the row or columns are) are distinguished from the table data cells (TD, actual data).

Back to contents || Back to top

Further notes:

A table data cell can contain not only text but other things such as images (<IMG>).

Until the introduction of style sheets (which many browsers still do not render correctly) tables were often the best method of setting formatting such as colour to parts of a document. This is because a table cell can be given a background colour, whereas a paragraph cannot (without the use of style sheets). In this web-site such "layout tables" have been used for many page headings, using a table containing a single data cell to provide a colour background to the page title. For example, consider the following heading:

This is produced by the following code:

Back to contents || Back to top

Complex tables

The most common sort of table is the simple grid. But sometimes you want a more irregular structure, like the example below:

The way to construct such tables is by adding the COLSPAN and ROWSPAN attributes to the TD element.

The value of COLSPAN is the number of cloumns which the TD cell "spans" or covers. The default value is "1"; i.e. if you do not include a COLSPAN attribute, the cell is just in one column - the normal situation. However, if you set COLSPAN="2", then the cell spans two columns.

Similarly, ROWSPAN indicates how many rows the cell is to span.

In the example above, note the cell labelled "ROWSPAN="3" ". The code for this cell is
<TD ROWSPAN="3">(text)</TD>
This indicates that it will span three rows, instead of the normal one.

The next question is, in what order do we write the cells' code? This is quite easy: we go one row at a time, and left to right within rows. Consider the following table:

The code for the above grid would be like this:

We want to combine the cells B2, B3, C2 and C3 in a single large cell.

We go row by row, and within each row left to right:

• if the space is to be occupied by a simple cell, we write the code for the cell as usual
• if the space is the start of a large cell (i.e. the point where we first reach the cell) we code it using ROWSPAN and/or COLSPAN
• if the space is to be occupied by a large cell already coded, we omit the <TD>

Thus, the code is as follows:

For another example of the left-to-right rule, consider the following table. The cells are coded in the order of the numbers shown:

Have a look at the source code for this page (by using the "View - Source" or "View-Page source" command on your browser) and see how the above table was coded.

Back to contents || Back to top

Layout tables

Before the introduction of style sheets (which, as has already been noted, still do not work correctly in many browsers) tables were the only practical way of laying out material on a page. For example, consider the following:

	Text	Text
	Text

This is produced by the following code:

<table summary="Layout example" width="100%" border="0">
<tr>
<td width="25%" rowspan="2" valign="top">
<img src="dummy1.jpg" alt="Dummy image" width="60" height="60">
</td>
<td width="25%">Text</td>
<td width="25%" align="left">Text</td>
<td width="25%" rowspan="2">
<img src="dummy1.jpg" alt="Dummy image" width="60" height="60">
</td>
</tr>
<tr>
<td width="50%" align="left">Text</td>
</tr>
</table>

Such layout tables are regarded as somewhat undesirable. They are sometimes hard to avoid, though, and you will find quite a few on this site. If you do need to use one, remember:

• Indicate in the TABLE's SUMMARY attribute that this is a layout table
• Try to arrange for a user without tables to be able to understand the content. E.g. provide an alternative non-table-format text.

If you are just using layout tables for headings and arrangement of images, etc., then it is unlikely to matter.

Back to top

Copyright © 2000 University of Botswana History Department
Last updated 9 October 2000