We now need to add the following code below the header tags to create the data (td) cells:

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

Your code should now look like this:

<table>
<tbody>
<tr>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Click on Preview and your table should now look like this:

That's it, you've just created a basic table! Now things start getting interesting, it's not exactly what we need, so let's do some formatting.

Obviously, the width of the table needs to be increased. How do we do that? By adding some code to the table tag.

For the purpose of this tutorial we'll increase the width of the table and make it 580px wide, which is the width of the content area that I am using. Now add the following code to the table tag: style="width: 580px; (don't forget to add a space between table and style). Your code should now look like this:

<table style="width:580px;">
<tbody>
<tr>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Again, click on Preview and your table should now look like this:

Now we have the table width we need, plus header, sub-header, and a data cells. But what about the headers, they're not the full width of the table? So, how do we increase them? By adding the "colspan" attribute to your th tags.

Place the following code in your main header: colspan="4"

Place the following code in your sub-headers: colspan="2"

Your code should now look like this:

<table style="width:580px;">
<tbody>
<tr>
<th colspan="4"></th>
</tr>
<tr>
<th colspan="2"></th>
<th colspan="2"></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
And your table should now look like this:

That's ok, but what about the borders? You can hardly see them. See next page.