HTML Tables – when and how to use tables in HTML

Example HTML Table

Correct Semantic use of Tables in HTML

HTML tables should only be used for rendering data that belongs naturally in a grid, in other words where the data describe a number of objects that have the same properties.

This data may be enterable by the user in a form, as long as each column and row contains similar content.

HTML Table Example

Tables should not be used for layout

For several years, web designers used tables as the only way to structure web pages, but CSS now makes their use redundant.

It is true that there remain a few things that are easier to do using tables.
The main benefit of tables is that all cells in a row, and all cells in a column, stretch together as the row or column stretches.
This effect is sometimes achievable in CSS, sometimes achievable with difficulty, and sometimes impossible.

However, don’t use tables for layout because:

1. It is semantically incorrect, and
2. Tables are less flexible than divs etc.

e.g. It is possible to rearrange the order in which boxes are displayed on a page, even make them stack, just by changing a few CSS properties.
This is impossible with tables, which are rigid and immovable.

How to do tables

We’ll go through how to construct tables in HTML, including a few useful tricks.

The basic elements of tables are:

<table> </table>

The start and end of the table.

<thead> </thead>

The start and end of the table head section, which includes column headers

<th> </th>

A table heading cell, which is a column header or row header

<tbody> </tbody>

The start and end of the main body of the table, which contains the actual data

<tr> </tr>

Table row; used in both the table head and table body

<td> </td>

Table cell (stands for "table data"), which holds the actual data

Example table HTML

Walk-through the table code

<table>

This tells us a table is starting.

In normal HTML, there are a few parameters you can use.
However, these are not permitted in xHTML.

<thead>

The table head section does not contain actual data, just header cells for columns (<th> tags).

If you want column header cells, these should go inside a <thead>, not in a table row (<tr>).

<tr>

The first table row in the table head section indicates a row of header cells.

<th>

These table head cells appear both in the table head section (<thead>) and in table rows (<tr>.

In the table heading section, they are column headers; in table rows, they are effectively row headers.

The content between the start and end tags will appear in the header cell.

<tbody>

After the <thead> has been closed, put the main body which will contain your rows of data.

You don’t have to use a <tbody> section, but you should if you use a <thead> section with column headers.

<tr>

Each row in the table body has to be defined with start and end table row tags.

<td>

Start and end tags define an actual table data cell.

Table tricks

Here are a few useful techniques you’ll need when creating HTML tables.

• Making cells span across columns or rows.
• Setting properties of columns and groups of columns.

Making cells span across columns or rows

You can use the properties colspan and rowspan for a <td> to make that cell span across more than one column or row.

The trick is making sure you remove the relevant cells in adjacent rows or columns, which are being merged.
Trial and error is the only way to get these right.

Example of colspan and rowspan

Code for example above

Setting properties of columns and groups of columns

You can define certain properties for whole columns at the top of your table (between the <table> and <thead> tags), using the <col /> or <colgroup /> tags.

<col /> is for setting the properties of one column at a time.
<colgroup /> is for setting properties for several columns together.

(Note that both tags are self-closing, so if you’re using xHTML, you must use the trailing forward-slash.)

Where I find these tags most useful is for setting the widths of columns (without having to set widths for particular cells).
What’s great about it is that you can use the same settings for a series of tables, and be sure that relevant columns will line up, even if the amount of content in cells varies.

(If you don’t set widths for columns, then your browser should squish the columns of a table around in order to minimise the table’s overall length.)

Example

Table 1

Table 2

Code for above example

A more flexible way to do the above would be to use CSS, assigning classnames to the different columns, e.g.

You could then set all the column-widths centrally in your stylesheet, and they would apply to every table.

<colgroup />

Use column groups for setting the properties of numerous consecutive rows, using the span property, as follows.
(You can mix up single cols and colgroups.)

The example above would apply to a table with 5 rows.

• The first row would be 20% of the width of the table.
• The next 3 rows would be 15% each.
• The last 5th row would be 35% width.

What other properties can you set using <col /> or <colgroup />?

Not every CSS style property you set in a column definition gets applied to every cell in the column, and other properties will easily override them.

This code…

produces this result…

The result will vary according to your browser.
Most browsers will show the background-color.