Tables in HTML |
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:
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
Back to contents || Back to top
SUMMARY="brief description of the table"
(this is required,
i.e. you must include this or the HTML is invalid)BORDER="0"
then no border will be shown.CELLPADDING="5"
(5 pixels). In the example above no CELLPADDING was set and the
text is hard up against the lines.BGCOLOR="#CCFFFF"
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
BGCOLOR="#FFFFCC"
. This overrides any BGCOLOR set for the
table as a whole.WIDTH="100"
, not recommended) or a percentage of the table row
(e.g. WIDTH="25%"
)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:
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
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:
* | 9 a.m. | 10 a.m. |
---|---|---|
Room 1 | H101 | H201 |
Room 2 | H203 | H202 |
Room 3 | H303 | H303 |
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
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:
|
Back to contents || Back to top
(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
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:
If you are just using layout tables for headings and arrangement of images, etc., then it is unlikely to matter.
Copyright © 2000 University of Botswana History Department
Last updated 9 October 2000