HTML Tables

Tables are a way to arrange content on a web page. In the early days of the internet, tables were the only practical way to achieve any sort of advanced page layout. With the advent of CSS, tables have become less favoured. However they are still the preferred way to present certain types of information.

Whether or not you use tables for layout, they are an important part of web design and you need to know how they work. The HTML code for tables can be quite confusing at first but don't be put off - with a little practice it becomes quite easy.

The Basics

As you can see, there are several components which make up a table. Before we explain them, we'll add a common table attribute - the border. This will make it easier to see what's happening. We'll tweak the look of the border later.

Now let's break it down. There are three critical tags which make up any table:

<table> </table> Defines the beginning and end of the table.
<tr> </tr> Table Row - Defines the beginning and end of a horizontal row.
<td> </td> Table Cell - Defines an individual cell. Cells are always placed inside a row.

A table must have at least one row and one cell. In theory there is no upper limit to the number of rows and cells - you just need to be realistic about the size of the table on your page.

To add more cells, simply add more <td> tags. The example below has one row, 2 cells.

To add more rows, add more <tr> tags with their respective cells. The example below has two rows, each containing one cell.

Using the same system you can add rows and cells to your heart's content:

Rowspan & Colspan

The examples above work fine as long as each row contains the same number of cells. The complications start when rows or columns have different numbers of cells. (Note: Although there is no HTML tag for columns, vertical lines of cells are referred to as columns.)

In order to have different numbers of cells you must force a cell to spread out across two or more rows or columns, using the following cell attributes:

colspan - The number of columns the cell spans
rowspan - The number of rows the cell spans

These attributes are shown in the following examples:

This brings us to an important limitation. Cells can only span whole numbers of rows or columns, i.e. cells can't span half a row or part of a column. In fact tables have many such limitations which is partly why they are not the best method for general page layout. However they are very good for content which fits into normal rows and columns.

Note: If your table has an invalid number of cells, for example, 2 cells in the first row and 3 cells in the second row (with no colspan to compensate), the results will be unpredictable and probably very ugly.

If you've made it this far you've done well. The good news is that we've covered all the difficult things about tables. From here on it's all about tweaking and making the table look neater.

Width and Height

The size of a table can be defined in two ways - as a fixed pixel value or as a percentage. If no percentage sign is used then the value is taken to mean pixels. The following examples are fairly self-explanatory.

<table width="90%">
<table width="640" height="300">

The same system can be used for individual cells, e.g. <td width="90%">Content</td>

Notes:

• Although the height attribute is widely supported, it isn't actually part of the official HTML standard. It may not always work as you expect.
• If no size values are specified, the browser will decide on an appropriate size. Results will vary between browsers.
• If a table width is wider than the browser window, the page will not fit on the screen and horizontal scroll bars will appear.
• The percentage value applies to whatever "container" the table is in, meaning that if the table is nested inside another table or page element, the width will be a percentage of the containing cell or element. If there is no containing element, the table width will be a percentage of the page width.

Spacing and Padding

There are two ways to set the spacing around cells.

• cellspacing - Defines the space between cells. If a border is used, the spacing will widen the border.
• cellpadding - Defines the space inside each cell, i.e. the space between the edges of the cell and the content within it.

Here are a few examples:

Note: These attributes apply to the entire table - you can't specify spacing or padding for individual cells.

That's currently the end of this tutorial. We hope to expand and add much more information at a later date. In the meantime return to our internet section for more goodies.