Staff website templates

Tables

Find out how to add tables, comprising rows and columns, to a University of Sussex 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

20062007200820092010
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>&pound;1</td>
        <td>&pound;2</td>
        <td>&pound;3</td>
        <td>&pound;4</td>
    </tr>
    <tr>
        <td>50p</td>
        <td>&pound;1</td>
        <td>&pound;2</td>
        <td>&pound;3</td>
        <td>&pound;4</td>
    </tr>
    <tr>
        <td>50p</td>
        <td>&pound;1</td>
        <td>&pound;2</td>
        <td>&pound;3</td>
        <td>&pound;4</td>
    </tr>
    <tr>
        <td>50p</td>
        <td>&pound;1</td>
        <td>&pound;2</td>
        <td>&pound;3</td>
        <td>&pound;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.

A simple row headed data table
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>&pound;1</td>
        <td>&pound;2</td>
        <td>&pound;3</td>
        <td>&pound;4</td>
    </tr>
</thead>
<tbody>
    <tr>
        <th>2007</th>
        <td>&pound;1</td>
        <td>&pound;2</td>
        <td>&pound;3</td>
        <td>&pound;4</td>
    </tr>
    <tr>
        <th>2008</th>
        <td>&pound;1</td>
        <td>&pound;2</td>
        <td>&pound;3</td>
        <td>&pound;4</td>
    </tr>
    <tr>
        <th>2009</th>
        <td>&pound;1</td>
        <td>&pound;2</td>
        <td>&pound;3</td>
        <td>&pound;4</td>
    </tr>
    <tr>
        <th>2010</th>
        <td>&pound;1</td>
        <td>&pound;2</td>
        <td>&pound;3</td>
        <td>&pound;4</td>
    </tr>
</tbody>
</table>

A column headed table with row striping

A simple column headed data table
20062007200820092010
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>&pound;1</td>
        <td>&pound;2</td>
        <td>&pound;3</td>
        <td>&pound;4</td>
    </tr>
    <tr>
        <td>50p</td>
        <td>&pound;1</td>
        <td>&pound;2</td>
        <td>&pound;3</td>
        <td>&pound;4</td>
    </tr>
    <tr>
        <td>50p</td>
        <td>&pound;1</td>
        <td>&pound;2</td>
        <td>&pound;3</td>
        <td>&pound;4</td>
    </tr>
    <tr>
        <td>50p</td>
        <td>&pound;1</td>
        <td>&pound;2</td>
        <td>&pound;3</td>
        <td>&pound;4</td>
    </tr>
</tbody>
</table>