Tables

Tables are an effective and easy way of ordering information. HTML offers plenty of possibilities.

Table basics

This is the most elementary example of a table:

<TABLE SUMMARY="an overview of what is here" BORDER="4" CELLPADDING="5" CELLSPACING="5" WIDTH="200">
<TR>
<TD>Here is Cell 1</TD>
<TD>Here is Cell 2</TD>
</TR>
<TR>
<TD>Cell 3</TD>
<TD>And there is the final cell, number 4</TD>
</TR>
</TABLE>

<TABLE> and </TABLE> indicate that the data in between them forms a table. The attributes WIDTH, CELLPADDING, CELLSPACING and BORDER are explained below.

The SUMMARY attribute is used to give an overview of the table's purpose and contents for use by braille or speech synthesizers.

<TR> and </TR> enclose the data for one row in a table. The total number of rows is defined by the number of <TR> tags you use. <TD> and </TD> enclose the data for one cell. The total number of cells in a row defines the number of columns in the table. In principle you can omit the closing tags for rows and cells as they are implied by other tags.

In this example there is only plain text in each cell. You can also put in images or links, or even another table.

Most browsers will automatically adept the size of the table and the width of the columns to the contents of each cell, as in this example. If you define different number of columns in different rows, the browser will try to make sense out of it but the result may not be very nice.

Cellpadding: space around the contents of cells

The CELLPADDING attribute sets how much space is put around the contents of a cell:

<TABLE BORDER="2" CELLPADDING="2">
<TR><TD>Padding is 2</TD></TR>
</TABLE>

<TABLE BORDER="2" CELLPADDING="20">
<TR><TD>Padding is 20</TD></TR>
</TABLE>

As you can see, the CELLPADDING attribute controls the space put between the contents of a cell and its borders. The default for the padding is zero. Unless you give it an higher value, the borders of the cells will be drawn directly around the contents.

Cellspacing: space between cells

The CELLSPACING attribute sets how much space is put between the cells. These two examples should be fairly self-explanatory:

<TABLE BORDER="2" CELLSPACING="20">
<TR><TD>One cell</TD>
<TD>Another cell</TD></TR>
</TABLE>

<TABLE BORDER="2" CELLSPACING="2">
<TR><TD>One cell</TD>
<TD>Another cell</TD></TR>
</TABLE>

The border around tables

The BORDER attribute control the border drawn around tables. If you leave out the BORDER attribute, the table and cells will have no border around them:

<TABLE>
<TR><TD>One</TD><TD>Two</TD></TR>
<TR><TD>Three</TD><TD>Four</TD></TR>
</TABLE>

You can set the BORDER attribuut to any value as long as it is an integer:

<TABLE BORDER="24">
<TR><TD>One</TD><TD>Two</TD></TR>
<TR><TD>Three</TD><TD>Four</TD></TR>
</TABLE>

Width of a table

Using the WIDTH attribute you can set the width of a table.

<TABLE WIDTH="400" BORDER="1">
<TR><TD>One</TD><TD>Two</TD></TR>
<TR><TD>Three</TD><TD>Four</TD></TR>
</TABLE>

The value for WIDTH can either be an integer for width in pixels or a percentage for width relative to the surrounding element:

<TABLE WIDTH="50%" BORDER="1">
<TR><TD>One</TD><TD>Two</TD></TR>
<TR><TD>Three</TD><TD>Four</TD></TR>
</TABLE>

As you can see, the table above gets a width of 50% of the surrounding box.

THEAD, TBODY and TFOOD elements

You can divide a table into header, footer and body by using the THEAD, TBODY and TFOOD elements.

<TABLE>
<THEAD><TR><TD COLSPAN="2">Header</TD></TR></THEAD>
<TFOOT><TR><TD COLSPAN="2">Footer</TD></TR></TFOOT>
<TBODY>
<TR><TD>One</TD><TD>Two</TD></TR>
<TR><TD>Three</TD><TD>Four</TD></TR>
</TBODY>
</TABLE>

The header is always printed at the top, the footer is always printed at the bottom of the table. With longer tables the browser repeats the header at the top of every page and the footer at the bottom of every page. Some browsers also put extra space between the header, body and footer.

Table header cell

The TH element can be used to define a table header cell:

<TABLE WIDTH="50%" BORDER="1">
<TR><TH>Employee</TH><TH>Salary</TH></TR>
<TR><TD>Tom Jones</TD><TD>$40,000</TD></TR>
</TABLE>

Browsers will display TH distinct from TD. How exactly, depends on the browser. You can use the TH element in combination with the THEAD element.

<TABLE WIDTH="50%" BORDER="1">
<THEAD><TR><TH>Employee</TH><TH>Salary</TH></TR></THEAD>
<TBODY>
<TR><TD>Tom Jones</TD><TD>$40,000</TD></TR>
</TBODY>
</TABLE>

The THEAD element always has to come before the TBODY element.

Aligning the contents of cells

The ALIGN and VALIGN attributes can be used in a TR, TD and TH elements as well as with the TBODY, THEAD and TFOOT elements. This depends if you want to define the alignments per cell, per row or for a whole part of the table. ALIGN controls the horizontal alignment. Possible values are "left", "center", "right", "justify" or "char". VALIGN controls vertical alignment. Possible values are "top", "middle", "bottom" or "baseline". Here is an example of the use of VALIGN:

<TABLE BORDER="1">
<TR>
<TD>One<BR>Two<BR>Three</TD>
<TD VALIGN="top">One</TD>
<TD>Two</TD>
<TD VALIGN="bottom">Three</TD>
</TR>
</TABLE>

The defaults are "left" for ALIGN and "middle" for VALIGN. Normally, you would not use these values with one exception. If you set either two for a whole row, by including this attribute in the <TR> tag, you can overrule it for one cell by using the same attribute in a <TD> tag. In the following example VALIGN is set to "top" for the whole row, with the third cell as an exception:

<TABLE BORDER="3">
<TR VALIGN="top">
<TD>One<BR>Two<BR>Three<BR>Four</TD>
<TD>One</TD>
<TD>Two</TD>
<TD VALIGN="middle">Three</TD>
<TD>Four</TD>
</TR>
</TABLE>

The ALIGN attribute can be used in a very similar manner:

<TABLE WIDTH="80%" BORDER="5">
<TR>
<TD ALIGN="right">Right</TD>
<TD>Default is left</TD>
<TD ALIGN="center">Center</TD>
</TR>
</TABLE>

"Justify" works well only with longer texts, when the left and right margins can be aligned:

<TABLE WIDTH="80%" BORDER="4" CELLSPACING="0" CELLPADDING="5">
<TR>
<TD ALIGN="justify">Semper ubi sub ubi ...... cum periculo deicerentur.</TD>
</TR>
</TABLE>

Also look at the use of CELLSPACING and CELLPADDING in this example. By setting the spacing to zero, the white space between the border and the content of the cell disappears.

Cells that span more than column or row

The COLSPAN attribute tells the browser that a cell should span more than one column. The ROWSPAN attribute does the same for rows:

<TABLE BORDER="2">
<TR ALIGN="center">
<TD>One</TD>
<TD>One</TD>
<TD>One</TD>
<TD ROWSPAN="2">Two rows</TD>
</TR>
<TR ALIGN="center">
<TD COLSPAN="2">Two columns</TD>
<TD>One</TD>
</TR>
</TABLE>

As you can see, the fourth cell of the first row spans two rows and the first cell of the second row spans two columns. You have to make sure the number of cells, rows and columns fit together or you will get very chaotic results.

Table captions

A caption tag can be used to put an explanation above a table:

<TABLE BORDER="3">
<CAPTION>List of e-mail addresses</CAPTION>
<TR><TH>Name</TH><TH>E-mail</TH></TR>
<TR><TD>Jan Weijers</TD><TD>nojunk@weijers.net</FONT></TD></TR>
</TABLE>

There can only be one CAPTION element in a table and it needs to be immediately following the TABLE element. The default positioning of the caption is over the table but you can change that using style sheets.

Text wrapping in a cell

By default text in a cell is wrapped to fit the table within the margins of the screen (or the window, to be precise) and to fit the cells within the table:

<TABLE BORDER="2">
<TR>
<TD>Semper</TD>
<TD>Semper ... deicerentur.</TD>
</TR>
</TABLE>

Using a table to put text in columns

You can use a table to put text in multiple columns:

<TABLE WIDTH="80%">
<TR VALIGN="top">
<TD STYLE="width:50%;">Semper ubi sub ubi ... tenere posset,</TD>
<TD STYLE="width:50%;">sed aliae eodem ... deicerentur.</TD>
</TR>
</TABLE>

As you can see, the first <TD> tag has a STYLE="width:50%;" attribute. This is because normally the browser will adjust the size of the cells to the text that you put in it. If you want the columns to have the same width, you either put exactly the same amount of text in it or -which is easier- use the WIDTH attribute to force equal columns. The 50%, by the way, is a percentage of the width of the table, not of the window.