Tables

Tables are often thought to be one of the trickiest areas of html to master - even by those using WYSIWYG tools and word processors to make their pages! However, once you have a grasp of how they work, they will seem simple.

Before we get onto how to use tables, first a note on when to use them. HTML Tables are obviously useful for displaying tables of data. If you need to display a data table, then use an HTML table! Tables are also useful for helping with page layout by defining a grid which can control where certain page elements are displayed. If you find yourself using a table purely for layout, try to think of a different way of doing things, and only use a table for layout as a last resort. The reason for this is that the use of a table may prevent people viewing your site through non-desktop browsers, from understanding what you mean. Normally, in the browser window, your information will be laid out logically and grouped together sensibly, but on a device with a small screen, or even no screen, this layout will be different, and items you have grouped together on screen may no-longer be grouped together. If you have to resort to using a table for layout purposes only, make sure that when you read your HTML in a text editor, and ignore the tags, it still makes sense in the order you read it on the page.

Here are the tags which are used to define tables in HTML.

In HTML, tables are defined a row at a time. For each row in the table, all the cells are defined in turn from left to right. Each row is enclosed inside <tr> tags, and each table element is surrounded by <th> or <td> tags. Although HTML allows the table headers (<th>) tags to occur at any position in a table, it usually makes sense for these to occur as the cells on the top row of the table and/or the first cell on each row. Also, to give the web browser a decent chance of drawing the table neatly (and predictably!) it makes sense for each row to have the same number of cells (although there are exceptions to this rule which we will look at later).

This code for a simple table...

<table>
 <caption>An example table</caption>
 <tr>
  <th>Heading for column 1</th>
  <th>Heading for column 2</th>
  <th>Heading for column 3</th>
 </tr>
 <tr>
  <td>Row 1 column 1</td>
  <td>Row 1 column 2</td>
  <td>Row 1 column 3</td>
 </tr> 
 <tr>
  <td>Row 2 column 1</td>
  <td>Row 2 column 2</td>
  <td>Row 2 column 3</td>
 </tr> 
 <tr>
  <td>Row 3 column 1</td>
  <td>Row 3 column 2</td>
  <td>Row 3 column 3</td>
 </tr> 
 <tr>
  <td>Row 4 column 1</td>
  <td>Row 4 column 2</td>
  <td>Row 4 column 3</td>
 </tr> 
</table>

...is rendered by the browser like this:

Note that the colours, font styles and border you see here are controlled by the stylesheet. In the absence of a stylesheet, the table would look plainer. Click here to see the table rendered in your browser without a stylesheet

Copy and paste the HTML code above into one of your own web pages. Experiment with changes - for example, by making all the entries in column 1 table headings, or by adding an extra column.

When a table goes wrong - i.e. doesn't do what you expect on screen, more often than not, validating the html will highlight the mistake. Typically this will be a forgotten closing tag or similar. If this does not help, then you might get more clues by turning on borders to the table cells. You would notmally do this in your stylesheet, but as a temporary debugging solution, you can change your <table> to read <table border="1">. This will cause the browser to draw a border, and might help identify any extra or misplaced cells you have.

Sometimes you will need a table cell to span more than one column or one row (for example in a school timetable with some single lessons and some double lessons). To cater for this, the <th> and <td> tags can contain extra attributes which tell the cell how many rows and/or columns to span. The attributes are colspan and rowspan. The example below illustrates their use (note the use of border="1" to temporarily highlight the cell layout using borders):

<table border="1">
 <tr>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
 </tr>
 <tr>
  <td rowspan="2">Row 1 column 1 - spanning two rows</td>
  <td>Row 1 column 2</td>
  <td>Row 1 column 3</td>
 </tr> 
 <tr>
  <td>Row 2 column 2: Note that the first cell is 'missed out' out of the HTML for this row as the first cell on the row above spans two rows</td>
  <td>Row 2 column 3</td>
 </tr> 
 <tr>
  <td colspan="3">Row 3 column 1 - but spanning three columns</td>
 </tr> 
 <tr>
  <td>Row 4 column 1</td>
  <td colspan="2" rowspan="2">Row 4 column 2 - spanning two rows and two columns</td>
 </tr> 
 <tr>
  <td>Row 5 column 1</td>
 </tr> 
</table>

This HTML code is rendered by the browser like this:

Note that this course was written in 2003, and things have moved on since then! You might like to check out this site for a more up to date html overview.

© Dial Solutions 2003
Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; A copy of the license can be found at www.gnu.org/copyleft/fdl.html