Contents
Home
Revision
Tables
Colours
Styles
Javascript

Tables

Tables are one of the main ways of controlling layout on a page. You can enclose the entire page in a table (as in this page), or use smaller tables on their own, or nested within bigger tables (as below).

**Basic table tags**
Compulsory Tag	Function
<table></table>	Defines a table
<tr></tr>	Table Row - a row within the table
<td></td>	Table Data - a cell within the table
Optional Tag	Function
<caption></caption>	Table caption
<th></th>	Table header cell

Example 1

<table border="1">
    <caption align="left"><strong>Example Table</strong></caption> 
    <tr>
    	<th>Column1</th>
    	<th>Column2</th>
    </tr>  
    <tr>
    	<td bgcolor="#ffff66">Row1 Column1</td>
    	<td>Row1 Column2</td>
    </tr>
    <tr>
    	<td>Row2 Column1</td>
    	<td>Row2 Column2</td>
    </tr>
</table>

Which displays as: -

**Example Table**
Column1	Column2
Row1 Column1	Row1 Column2
Row2 Column1	Row2 Column2

Note how the browser controls the format of the heading cell. If you want full control of the table appearance use only the <td> tag within tables, and specify the colours and font size etc. yourself.

Table Attributes

The table tag can take the following attributes: -

Attribute	Description	Example
WIDTH, HEIGHT	Specified as a number of pixels or as a percentage of the available space	<table width="400" height="90%">
BORDER	Width in pixels of the border around each cell of a table	This table has a border of 1 pixel <table border="1">
CELLSPACING	Distance between cells expressed in pixels	<table cellspacing="1">
CELLPADDING	Distance in pixels between the cell contents and border	<table cellpadding="3">
BGCOLOR	Table background colour	<table bgcolor="#FFFFFF"> White background colour for the table
BORDERCOLOR	Colour for the table border	<table bordercolor="#000000"> Black border for table
ALIGN	"left\|right" aligns the table with the left/right margin (NB text can flow around)	<table width="50%" align="right">
VALIGN	"top\|bottom" vertical alignment of text in cells (if not entered default is centre)	<table valign="top">

If you want to center your table reliably, then the best method is to enclose it in a division tag: -

<div align="center"><table>.....</table></div>

Row and Cell Attributes

Both rows and cells can take the following attributes: -

Attribute	Description	Example
Align	="left\|right\|center" Horizontal text alignment	<td align="right">
Valign	="left\|right\|center" Vertical text alignment	<tr valign="top">
Bgcolor	="#FFFFFF" Background colour of the cell	<td bgcolor="#0000ff">
Bordercolor	="#FFFFFF" Colour of the cell border	<td bordercolor="00ff00">

In addition, cells can also specify: -

Attribute	Description	Example
width, height	Specified as a number of pixels. Browsers don't display these attributes reliably, unless the total width of all of the cells equals the table width.	<td width="135" height="18">
rowspan	="number" number of rows cell extends across	<td rowspan="2">
colspan	="number" number of columns cell extends across	<td colspan="3">
nowrap	Forces the contents of the cell to be displayed without wrapping. Use with caution as it can force a cell beyond right margin of screen	<td nowrap>

Complex tables

Tables can become complex, with tables within tables or involving cells which span several rows or columns. These are usually best constructed using a WYSIWIG HTML editor, rather than trying to work out the code for yourself. However, if you want to give it a go, make full use of levels of indentation (as shown in Example 2 below) to make it easier to pick out which code belongs to which row or column.

<td bgcolor="#FFFF66" colspan="4">
<td rowspan="5" bgcolor="#0000FF">
		<td colspan="2" rowspan="2" bgcolor="#008000">
		<td colspan="2" rowspan="2" bgcolor="#008000">

The table above would be coded as: -

Example 2

<table border="1" cellpadding="3" cellspacing="1" width="80%">
    <tr>
    	<td bgcolor="#FFFF66" width="100%" colspan="4">&nbsp;</td>
    </tr>
    <tr>
    	<td width="25%" rowspan="5" bgcolor="#0000FF">
        &nbsp;</td>
    	<td width="25%">&nbsp;</td>
    	<td width="25%">&nbsp;</td>
    	<td width="25%">&nbsp;</td>
    </tr>
    <tr>
    	<td width="25%">&nbsp;</td>
    	<td width="50%" colspan="2" rowspan="2"
        bgcolor="#008000">&nbsp;</td>
    </tr>
    <tr>
    	<td width="25%">&nbsp;</td>
    </tr>
    <tr>
    	<td width="25%">&nbsp;</td>
    	<td width="25%">&nbsp;</td>
    	<td width="25%">&nbsp;</td>
    </tr>
    <tr>
    	<td width="25%">&nbsp;</td>
    	<td width="25%">&nbsp;</td>
    	<td width="25%">&nbsp;</td>
    </tr>
</table>

HTML Workshop