Tables
Find out how to add tables, comprising rows and columns, to a ÈÕº«ÎÞÂë web page.
Tables are essentially made up of rows (the tr tag) and columns (the td tag). You can have special columns that act as header information (using the th tag). Collections of rows, columns and headers can be grouped together to form the table head (thead), the main part of the table body (tbody) or the table footer (tfoot).
We've set up several styles so you can change the look of your table.
Column headed table with no borders
This is an example of a simple data table. The data is arranged in columns with column headers. The column headers are linked to the data by the scope attribute. There is a caption to improve accessibility foe screen reader users.
A simple column headed data table
A simple column headed data table
| 2006 | 2007 | 2008 | 2009 | 2010 |
|---|---|---|---|---|
| 50p | £1 | £2 | £3 | £4 |
| 50p | £1 | £2 | £3 | £4 |
| 50p | £1 | £2 | £3 | £4 |
| 50p | £1 | £2 | £3 | £4 |
<table class="style1" border="0" summary="fees table">
<thead>
<caption>A simple column headed data table</caption>
<tr>
<th scope="col">2006</th>
<th scope="col">2007</th>
<th scope="col">2008</th>
<th scope="col">2009</th>
<th scope="col">2010</th>
</tr>
</thead>
<tbody>
<tr>
<td>50p</td>
<td>£1</td>
<td>£2</td>
<td>£3</td>
<td>£4</td>
</tr>
<tr>
<td>50p</td>
<td>£1</td>
<td>£2</td>
<td>£3</td>
<td>£4</td>
</tr>
<tr>
<td>50p</td>
<td>£1</td>
<td>£2</td>
<td>£3</td>
<td>£4</td>
</tr>
<tr>
<td>50p</td>
<td>£1</td>
<td>£2</td>
<td>£3</td>
<td>£4</td>
</tr>
</tbody>
</table>
Row headed table with borders
This is an example of a simple data table. The data is arranged in rows with row headers. The row headers are linked to the data by the scope attribute. There is a caption to improve accessibility foe screen reader users.
| 2006 | £1 | £2 | £3 | £4 |
|---|---|---|---|---|
| 2007 | £1 | £2 | £3 | £4 |
| 2008 | £1 | £2 | £3 | £4 |
| 2009 | £1 | £2 | £3 | £4 |
| 2010 | £1 | £2 | £3 | £4 |
<table class="style1 bordered" border="0" summary="fees table">
<thead>
<caption>A simple row headed data table</caption>
<tr>
<th>2006</th>
<td>£1</td>
<td>£2</td>
<td>£3</td>
<td>£4</td>
</tr>
</thead>
<tbody>
<tr>
<th>2007</th>
<td>£1</td>
<td>£2</td>
<td>£3</td>
<td>£4</td>
</tr>
<tr>
<th>2008</th>
<td>£1</td>
<td>£2</td>
<td>£3</td>
<td>£4</td>
</tr>
<tr>
<th>2009</th>
<td>£1</td>
<td>£2</td>
<td>£3</td>
<td>£4</td>
</tr>
<tr>
<th>2010</th>
<td>£1</td>
<td>£2</td>
<td>£3</td>
<td>£4</td>
</tr>
</tbody>
</table>
A column headed table with row striping
| 2006 | 2007 | 2008 | 2009 | 2010 |
|---|---|---|---|---|
| 50p | £1 | £2 | £3 | £4 |
| 50p | £1 | £2 | £3 | £4 |
| 50p | £1 | £2 | £3 | £4 |
| 50p | £1 | £2 | £3 | £4 |
<table class="style1 stripe" border="0" summary="fees table">
<thead>
<caption>A simple column headed data table</caption>
<tr>
<th scope="col">2006</th>
<th scope="col">2007</th>
<th scope="col">2008</th>
<th scope="col">2009</th>
<th scope="col">2010</th>
</tr>
</thead>
<tbody>
<tr>
<td>50p</td>
<td>£1</td>
<td>£2</td>
<td>£3</td>
<td>£4</td>
</tr>
<tr>
<td>50p</td>
<td>£1</td>
<td>£2</td>
<td>£3</td>
<td>£4</td>
</tr>
<tr>
<td>50p</td>
<td>£1</td>
<td>£2</td>
<td>£3</td>
<td>£4</td>
</tr>
<tr>
<td>50p</td>
<td>£1</td>
<td>£2</td>
<td>£3</td>
<td>£4</td>
</tr>
</tbody>
</table>