Web Standards Home

Conditions of Use

Content style guide

Plan your site

Develop your site

	Using Server Side Includes

	Using style sheets

	Using headings

	Using tables

	Set up email address for enquiries

Upload your pages

Extend your site

Visual Identity

Contact us

Online Media Request

Online Media Unit Level 7, Old Classics Wing THE UNIVERSITY OF ADELAIDE SA 5005 AUSTRALIA Email Telephone: +61 8 8303 3280 Facsimile: +61 8 8303 4829

Using tables

HTML tables are designed to present tabular information in a webpage and can also be used to enhance the appearance and readability of content on a page. Tables can be created within tables to provide many possible options. For example, the standard University templates use tables to define the layout of pages.

When to use tables

If you have a quantity of information which naturally divides into rows and columns, then a table is likely to be the best way to display it, both in terms of appearance and readability.

Formats for tables

It is often useful to use background colour to aid in the readability of tables, for example by shading the heading row, or the first column, of information. Background colours should be chosen to highlight information without making the text unreadable. The Online Media Unit has created several options for table colour schemes.

Option 1

Table heading
sub-heading 1	sub-heading 2
table content	table content

The source code you would need in your webpage to create this table looks like:

<table width="75%" border="0" cellspacing="2" cellpadding="3">
<tr> 
<td class="ta1" colspan="2">Table heading</td>
</tr>
<tr> 
<td class="ta2">sub-heading 1</td>
<td class="ta2">sub-heading 2</td>
</tr>
<tr> 
<td class="ta3">table content</td>
<td class="ta4">table content</td>
</tr>
</table>

Option 2

Table heading
table content	table content

The source code you would need in your webpage to create this table looks like:

<table width="75%" border="1" cellspacing="0" cellpadding="5">
<tr> 
<td class="tb1" colspan="2" height="24">Table heading</td>
</tr>
<tr> 
<td class="tb2">table content</td>
<td class="tb2">table content</td>
</tr>
</table>

For tables which are to appear with borders around the information, the recommended settings are

border = 1
cell spacing = 0 and
cell padding = 5

Further options and updates will become available as required. Contact the Online Media Unit for more information.