In the previous HTML Tables chapter, we demonstarted how to construct ROWS and CELLS in a Table.
However, if you want 2 CELLS in one ROW, and only 1 CELL in the next ROW which spans the same width as the 2 CELLS, you need to use colspan="".
If you want 2 CELLS in a COLUMN, and only 1 CELL in the next COLUMN which spans the same height as the 2 CELLS, you need to use rowspan="".

Now that probably sounds really complicated, but it's not. It's just difficult to explain in a simple paragraph.

Lets start with an example table: <table width="500" bgcolor="#000080" border="1" bordercolor="#FFFFFF" cellspacing="2" cellpadding="5">
<tr>
<td align="center" width="250"><font color="#FFFFFF">Hello</font>
</td>
<td align="center" width="250"><font color="#FFFFFF">There!</font>
</td>
</tr>
<tr>
<td align="center" width="250"><font color="#FFFFFF">Hello Again!</font>
</td>
</tr>
</table>

This is what the above code will produce:

As you can see, we've added an extra row to the Table we demonstrated in the previous HTML Tables chapter, but have only given it 1 CELL.
Rather than making that CELL span the same width as the 2 CELLS above it, the Table simply keeps the COLUMNS in alignment with those above, and because we haven't specified a 2nd CELL in the new ROW, the Table assumes we simply want a blank CELL there.

So how do we get that CELL in the 2nd ROW to span the same width as the 2 CELLS above it?

We have to use the colspan="" ATTRIBUTE inside the <td> TAG for the CELL in the 2nd ROW.
Because the 1st row has been split into 2 CELLS, or 2 COLUMNS, we have to use the number 2 in the colspan="".
EXAMPLE: <td colspan="2"><font color="#FFFFFF">Hello Again!</font>
Basically, we're telling the CELL in the 2nd ROW to span (go across) the same width as the 2 CELLS or COLUMNS above it (to span 2 COLUMNS).

Here is the revised code: <table width="500" bgcolor="#000080" border="1" bordercolor="#FFFFFF" align="left" cellspacing="2" cellpadding="5">
<tr>
<td align="center" width="250"><font color="#FFFFFF">Hello</font>
</td>
<td align="center" width="250"><font color="#FFFFFF">There!</font>
</td>
</tr>
<tr>
<td align="center" colspan="2"><font color="#FFFFFF">Hello Again!</font>
</td>
</tr>
</table>

And this is what the revised code above would produce:

Now lets looks at how to use the rowspan="" ATTRIBUTE to make a CELL span the height of 2 ROWS

Another Table example, but with another row added: <table width="500" bgcolor="#000080" border="1" bordercolor="#FFFFFF" align="left" cellspacing="2" cellpadding="5">
<tr>
<td align="center" width="250"><font color="#FFFFFF">Hello</font>
</td>
<td align="center" width="250"><font color="#FFFFFF">There!</font>
</td>
</tr>
<tr>
<td align="center" rowspan="2"><font color="#FFFFFF">Hello</font>
</td>
<td align="center" width="250"><font color="#FFFFFF">There!</font>
</td>
</tr>
<tr>
<td align="center" width="250"><font color="#FFFFFF">Again!</font>
</td>
</tr>
</table>

This is what the code above would produce:

The rowspan="2" ATTRIBUTE in the above example has told the 1st CELL in the 2nd ROW to span across the CELL in the next ROW below (to span 2 ROWS).