Home : Internet : HTML : Tables
HTML Tutorial: Introduction | HTML Basics | Hyperlinks | Images | Tables
On This Page: Table Basics | Rowspan & Colspan | Width & Height | Spacing & Padding

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

The most simple table HTML code looks like this...   ... and creates this:
<table>
<tr><td>Content goes here</td></tr>
</table>
=
Content goes here

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.

<table border="1">
<tr><td>Content goes here</td></tr>
</table>
=
Content goes here

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.

<Table border="1">
<tr><td>Cell 1</td><td>Cell 2</td></tr>
</table>
=
Cell 1 Cell 2

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

<Table border="1">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
</table>
=
Row 1
Row 2

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

<table border="1">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
=
1-1 1-2 1-3
2-1 2-2 2-3
3-1 3-2 3-3

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:

<table border="1">
<tr><td>1-1</td><td>1-2</td></tr>
<tr><td colspan="2">2-1</td></tr>
</table>
=
1-1 1-2
2-1

<table border="1">
<tr><td>1-1</td><td rowspan="3">1-2</td></tr>
<tr><td>2-1</td></tr>
<tr><td>3-1</td></tr>
</table>

=
1-1 1-2
2-1
3-1

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:


Spacing and Padding

There are two ways to set the spacing around cells.

Here are a few examples:

<table border="1" cellpadding="1" cellspacing="0">
<tr><td>1-1</td><td>1-2</td></tr>
<tr><td colspan="2">2-1</td></tr>
</table>
=
1-1 1-2
2-1
<table border="1" cellpadding="10" cellspacing="0">
<tr><td>1-1</td><td>1-2</td></tr>
<tr><td colspan="2">2-1</td></tr>
</table>
=
1-1 1-2
2-1

<table border="1" cellpadding="10" cellspacing="10">
<tr><td>1-1</td><td>1-2</td></tr>
<tr><td colspan="2">2-1</td></tr>
</table>

=
1-1 1-2
2-1

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.

Subscribe to us on YouTube