University of Botswana History Department

Tables in HTML

HTML Index Page || Site Index

Contents


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>

Example:

<TABLE SUMMARY="Example" BORDER="1">
<TR>
<TD>Row 1, cell 1</TD>
<TD>Row 1, cell 2</TD>
<TD>Row 1, cell 3</TD>
</TR>
<TR>
<TD>Row 2, cell 1</TD>
<TD>Row 2, cell 2</TD>
<TD>Row 2, cell 3</TD>
</TR>
</TABLE>

This code will produce the following table:

Row1, cell 1 Row 1, cell 2 Row 1, cell 3
Row 2, cell 1 Row 2, cell 2 Row 2, cell 3

Back to contents || Back to top

Some important attributes:


Back to contents || Back to top

Attributes of TABLE:


Back to contents || Back to top

Attributes of TD (and TH, see below):

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

<TABLE SUMMARY="Example" BORDER="1" CELLPADDING="6" WIDTH="100%">
<TR>
<TD WIDTH="50%" BGCOLOR="#FFCCFF">Row1, cell 1</TD>
<TD WIDTH="25%" BGCOLOR="#FFCCCC">Row 1, cell 2</TD>
<TD WIDTH="25%" BGCOLOR="#FFFFCC">Row 1, cell 3</TD>
</TR>
<TR>
<TD WIDTH="50%" BGCOLOR="#FFCCFF">Row 2, cell 1</TD>
<TD WIDTH="25%" BGCOLOR="#FFCCCC">Row 2, cell 2</TD>
<TD WIDTH="25%" BGCOLOR="#FFFFCC">Row 2, cell 3</TD>
</TR>
</TABLE>

This will produce the following table:

Row1, cell 1 Row 1, cell 2 Row 1, cell 3
Row 2, cell 1 Row 2, cell 2 Row 2, cell 3

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:

<table summary="Example" width="100%" border="1"
cellpadding="6" bgcolor="#CCFFFF">
<caption>Caption</caption>
<tr>
<th bgcolor="#FFFFCC">*</th><th>9 a.m.</th><th>10 a.m.</th></tr>
<tr>
<th>Room 1</th><td>H101</td><td>H201</td>
</tr>
<tr>
<th>Room 2</th><td>H203</td><td>H202</td>
</tr>
<tr>
<th>Room 3</th><td>H303</td><td>H303</td>
</tr>
</table>

This will produce the following table:

Caption
*9 a.m.10 a.m.
Room 1H101H201
Room 2H203H202
Room 3H303H303

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:

Imaginary page heading

This is produced by the following code:

<table summary="Layout" width="100%" border="0" cellpadding="18">
<tr>
<td bgcolor="#CCFFFF" width="100%">
<center><h1>Imaginary page heading</h1></center>
</td>
</tr>
</table>



Back to contents || Back to top

Complex tables

(This is an advanced feature. Although it is simple in concept, many people find it tricky at first. We recommend that you practise setting up some ordinary tables to familiarize yourself with the normal table structure in HTML before trying this.)

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

       
ROWSPAN="3"      
  COLSPAN="2"
     

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:

A1 A2 A3
B1 B2 B3
C1 C2 C3

The code for the above grid would be like this:

<TABLE>
<TR> <TD>A1</TD> <TD>A2</TD> <TD>A3</TD> </TR>
<TR> <TD>B1</TD> <TD>B2</TD> <TD>B3</TD> </TR>
<TR> <TD>C1</TD> <TD>C2</TD> <TD>C3</TD> </TR>
</TABLE>

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:

<TABLE>
<TR> <TD>A1</TD> <TD>A2</TD> <TD>A3</TD> </TR>
<TR> <TD>B1</TD> <TD COLSPAN="2" ROWSPAN="2">B2</TD>   </TR>
<TR> <TD>C1</TD>     </TR>
</TABLE>

Thus, the code is as follows:

<TABLE>
<TR>
<TD>A1</TD> <TD>A2</TD> <TD>A3</TD>
</TR>
<TR>
<TD>B1</TD> <TD COLSPAN="2" ROWSPAN="2">B2</TD> <!--SPANNED-->
</TR>
<TR>
<TD>C1</TD> <!--SPANNED--> <!--SPANNED-->
</TR>
</TABLE>

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

1 2 3 4
5 6
7 8
9 10

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:


Dummy image Text Text Dummy image
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:

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