Two levels of rows in a HTML table with fixed width <thead>?

Question

I have a table with fixed width columns:

<table width="100%" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>Title</th>
            <th>Description</th>
            <th>Hours</th>
            <th>Rate</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="width:100px"></td>
            ...
    </tbody>
</table>

Which is fine but now I want to have description appear on the line below "Title, Hours, Rate" so that it can be longer, probably the width of the table. Something like this:

|    Title    |    Hours    |    Rate    |
------------------------------------------
| A title     | Some hours  | A rate     |  <- This is a row
| A long description would go here...    |  <- This is the same row
------------------------------------------
So on...

I would still like to refer to this as a single "row" in the table. This is just a display preference. What would I need to do to achieve this?

Answer 1

Colspan will do what you want it to do.

<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td colspan="4">long description</td>
</tr>