Creating HTML Tables

CIW Website Design Manager Course Section 1, Part B, Chapter 5

Introduction

The use of tables for layout purposes is discouraged in HTML 4.01 for reasons of accessibility. It is recommended that stylesheets are used for all layout and appearance related items, and that tables are only used for the presentation of tabular data. However, tables are widely used for layout, this page is no exception, and can be useful. The key is to keep the tables simple. Too many tables, or tables nested within tables will, significantly, slow the rendering of the page.

HTML Table Elements

Tables can be simple, or they can be very complex. Complex tables can appear wonderfully on screen but, they can take quite some time to render in your browser.

The code for a simple table, such as the one shown above would look like this:

<TABLE>
<TR>
<TH>Price</TH>
<TH>Quantity</TH>
</TR>
<TR>
<TD>13.95</TD>
<TD>72</TD>
</TR>
</TABLE>

You may note that the header cells use the <TH> element and the data cells use the <TD> element. The difference between the two is the default formatting. The header cells by default, use bold, centred text while the data cells use normal, left-aligned text.

Caption Element

Including the <caption> element within the <table> </table> tags allows a title to be given to the table. It has an align property which may be set to top, bottom, left or right. This is seldom used and is not well supported across different browsers.

Column and Row Spanning

Sometimes you will want a heading across several cells, or you may wish a cell to span more than one row. This is achieved by using the ROWSPAN and COLSPAN attributes. The table below is an example:

Single Heading Cell
	Date	Comments
	6 January	Today, the day I put this page together.
	14 February	Valentines day, not a day I remember too often.
	4 June	My Birthday, so don't anyone forget it! Notice I missed out the year.