Tables for Beginners

Tables can be one of the easiest things to master, and at the same time be very complicated.

The basic table layout consists of a row divided into columns

You can add as many rows as you like

Or as many columns as you like

Now, to get a little more complicated
Spanning Columns or Rows

Tables can also have a different colour background in each cell

Right, that's enough examples to get started on.

How to Make Them

The simple 2 column table at the top

<table width="400" cellspacing="2" cellpadding="2" border="1">
<tr>
    <td>Column 1</td>
    <td>Column 2</td>
</tr>
</table>

Now, let's look at the code.
All tables start with <table> and end with </table>. This is most important, if the closing tag </table> is left off some browsers will not show anything on the page at all.

The opening table tag can have other attributes added, such as width= . This can be in pixels, or a percentage of the window width.
The border can be off = 0 (no border), or set to a number if you want a wider border.
The cellspacing and cellpadding I will explain later.

The next item in the table is the row tag <tr>. This defines the row that the column (and therefore cells to hold the content) tags go in.
As many columns as required can go here, with regard to the width of the page of course.

All rows must end with the closing tag </tr>

Next come the column tags <td> content here </td>

Column widths can be left to automatically adjust across the width of the table, or set to a pixel or percentage width, as long as the total is the same as the width the table is set at.

Table widths are only a suggestion, tables can adjust to suit the width and height of the content, and the width of the browser window, so although you may set a table up nicely, it may change depending on the browser window size, and the text size. You will notice that there is no height set, this is because the height of the rows will adjust for the amount of content.

Adding more rows is simply a matter of repeating the

<tr>
    <td>Column 1</td>
    <td>Column 2</td>
</tr>

A word of caution - you cannot just add an extra row with a different number of columns in it.
Look at this code, and then the table that results.

<table width="400" cellspacing="2" cellpadding="2" border="1">
<tr>
    <td>Column 1</td>
    <td>Column 2</td>
</tr>
<tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
</tr>
</table>

You will notice that the table still works, but the third column in the top row is not really there. If you want the top row to continue to the end, then it is necessary to tell either the first or second column to span an extra column in the bottom row.

The code for this is :-

<td colspan=2> </td>

This results in a table that now looks like this

Here is the full code (without the colour info)

<table width="400" border="1" cellspacing="2" cellpadding="2">
<tr>
    <td>Column 1</td>
    <td colspan="2">Column 2</td>
</tr>
<tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
</tr>
</table>

The same applies to spanning rows with a column

Just tell the column that you want to span a row or more, how many rows to span

The important thing to remember here, is that the column spanning works from left to right, and the row spanning works from top to bottom, so it is no good expecting to set the bottom cell in a column to span several rows, or the right hand cell to span several columns.

Always set out your layout on a piece of paper first, then plan your code.

<td rowspan=2>

Again, here is the full code, this time with the colour left in.

<table width="400" border="1" cellspacing="2" cellpadding="2" bgcolor="#00ffff">
<tr>
    <td rowspan="2" bgcolor="#88ff88">Column 1, Rows 2 and 3</td>
    <td>Column 2, Row 1</td>
</tr>
<tr>
    <td>Column 2, Row 2</td>
</tr>
</table>

Here is a table with extra content in one of the cells to show word-wrap and the automatic height adjustment

Hmmm - notice how the cell expanded wider as well. This is because no width was specified for the columns. Let's try that again with a percentage width set. Let's set the first column to 25%, the second to 35% and the last to 40%

Under Control !!

I actually set the widths to the bottom row, because the top 2 rows had cells that spanned others. All columns stay the same width all the way down.

Here is the part of the code - the bottom row - with the width set.

<tr>
    <td width="25%" bgcolor="#00FF00">Row 3, Col 1</td>
    <td width="35%" bgcolor="#C0C0C0">In this cell there is a lot more text.
    Enough to go around and around.
    Notice how the cell expands downwards to accomodate the text.</td>
    <td width="40%" bgcolor="#00FF00">Row 3, Col 3</td>
</tr>

This is the trick that is used to keep page content off a background border. At it's simplest, the whole page is a 2 column table, with the width of the left hand column set to the width of the border graphics, and then the other column holds all the page content.

Right, now some explanation and demonstration of the cellpadding and cellspacing attributes.

Here is the same table with cellspacing set to 5

Notice that the spacing between the cells is greater.

<table width="400" cellspacing="5" cellpadding="2" border="1">

Now let's change the spacing back to 2, and increase the cellpadding to 15.

Notice now that the cells are nice and close, but the content is spaced away from the cell sides.

<table width="400" cellspacing="2" cellpadding="15" border="1">