HTML Encyclopaedia

Tables

HTML and all but the oldest browsers provide support for tables. A table is defined by the <table> container tag pair. Within the tag pair the table is defined as a series of rows using the <tr> tag. Each row consists of a sequence of <td> and <tr> tagged items. These are known as table detail and table heading items or cells.

Almost anything including paragraphs, lists, images and other tables may be used within a table cell. The displayed table will be retangular and will have a number of columns determined from the largest number of cells in the various table rows. Table items may span both rows and columns.

A simple table

Here is a simple table.

Column 1	Column 2
Item 1.1	Item 1.2
Item 2.1	Item 2.2

The HTML for the above table is

<table border=5>
<tr><th>Column 1<th>Column 2
<tr><td>Item 1.1<td>Item 1.2
<tr><td>Item 2.1<td>Item 2.2
</table>

strictly the <tr> is a container tag and should be used as <tr> ... </tr>. In practice this is almost never done. Note that the <th> items appear in bold and are centred whereas the <td> items are in normal text and are left justified.

Column spanning

Any table item can span several columns. This is achieved by using the colspan attribute associated with a <th> or <td> element. The value of the attribute is the number of columns to span.

Here's an example

Start		End
x	y	x	y
123	44	144	66
144	66	128	77

colspan=2 was used with the <th> elements on the first row.

Row spanning

A table item can also span several rows using the rowspan attribute. The value of the attribute is the number of rows to span. It is important, when writing out the list of items for subsequent rows, to remember that the "spanned" value will occupy one of the positions along the row.

Here's an example.

Group	Nationality	Numbers
Students	English	234
	Welsh	13
	Scottish	27
Staff	English	14
	Welsh	3
	Scottish	7

And here's the HTML used for the above example

<table border=5>
<tr><th>Group<th>Nationality<th>Numbers
<tr><td rowspan=3>Students<td>English <td>234
<tr>                      <td>Welsh   <td>13
<tr>                      <td>Scottish<td>27
<tr><td rowspan=3>Staff   <td>English <td>14
<tr>                      <td>Welsh   <td>3
<tr>                      <td>Scottish<td>7
</table>

The HTML has been laid with extra spaces here to clarify the rowspanning of the group titles. This can be useful when preparing a particularly complex table.

Column and row spanning

Column and row spanning can be combined to create some quite complex displays. Here's an example

ONE		TWO
FOUR	Piggy in the middle
	THREE

And here's the HTML

<table border=0>
<tr><td colspan=2 bgcolor=red align=center valign=middle>ONE
	<td rowspan=2 bgcolor=yellow align=center valign=middle>TWO
<tr><td rowspan=2 bgcolor=green align=center valign=middle>FOUR
	<td align=center valign=middle bgcolor=white>Piggy in the middle
<tr><td colspan=2 bgcolor=blue align=center valign=middle>THREE
</table>

Table Width

The determination of the width of a table is fairly complex task for the browser which has to examine the width of the various columns. In HTML 3.2 there is no way of specifying the width of column directly, this was proposed for HTML 3.0 but the standard was not accepted.

The overall width of a table can be specified using the width attribute of the <table> tag. The value specifies the table width either in pixels or as a percentage of the browser window.

The width of a column is determined from the greatest cell width. The width of a cell can be inferred from its contents, especially if the content is an image or another table. The width of a cell can be specified explicitly using the width attribute of the <td> tag. The value is the width either in pixels or as a pecentage of the table width.

Here are some examples

1. Table width = 50% Column width = 50%

   Province	Capital
   British Columbia	Victoria
   Alberta	Edmonton
   Saskatchewan	Regina
   Manitoba	Winnipeg

   The cell widths are actually set in the <th> tags. Notice that when the browser window is resized the table continues to occupy half the width of the window and the two columns continue to be of equal width.

2. Table width = 250 Column width = 50%

   Province	Capital
   British Columbia	Victoria
   Alberta	Edmonton
   Saskatchewan	Regina
   Manitoba	Winnipeg

   Here changing the browser window width has no effect on the table width. Horizontal scrolling may be necessary if the table width is large and the browser window is too narrow.

Neither Netscape 3.0 nor Microsoft Internet Explorer 3 seem to get the column widths quite right in the above examples.

Blank Cells

It is often the case that a table, perhaps derived from a data file or perhaps including a notes/comments column, contains cells that don't contain any data. Normal HTML rendering presents such cells as part of the "raised surface" rather than as empty cells. This can look rather unattractive as the following example shows.

Name	Function	Notes
strcmp	String Comparison
stricmp	Case insensitive string comparison	Not ANSI
strncmp	Limited string comparison
strcoll	Locale dependent comparison

It is, of course, possible to put a dash or similar character in these positions, however this is rather artificial. The HTML 3.2 standard says that a non-breaking space character should be used. This is encoded as &nbsp; Here's the same table as above with non-breaking spaces in the otherwise empty cells.

Name	Function	Notes
strcmp	String Comparison
stricmp	Case insensitive string comparison	Not ANSI
strncmp	Limited string comparison
strcoll	Locale dependent comparison

Column and Row properties

The <tr> tag has various attributes which provide considerable control over the properties of a table row. Unfortunately there is no way of specifying the properties of a table column, this very useful facility was included in the HTML 3.0 proposals but these were not accepted. Column property control can only be achieved, tediously, by setting the required properties separately for each cell in the column, even then there is no way of aligning numerical values on the decimal point.

Fonts and Tables

It may be required to use a distinctive font for the entries within a table. It is not possible to simply enclose the table within <font> .. </font> tags. It is not entirely clear why this should be so although it would seem that since the <font> tag is a text element, including block elements within it is a dubious practice. The <basefont> tag is also not effective, this is surely a browser bug.

The only way of changing the font of a table is to tediously change the font of each cell separately.

Nesting Tables

The HTML 3.2 standard implies that any (block) item can be included in a table cell. This includes another table as the following example shows

cell 11	cell 12
cell 21	cell 2211 cell 2212 cell 2221 cell 2222