How To Nest Tables And Join Cells

In this HTML lesson, let us learn the method to nest tables and join cells. Once you have a table set up, you'll quickly find that nesting smaller, simple tables within the large table is one of the best formatting tools you have available. This allows you to use a large table for your big formatting projects, and smaller tables as real tables or formatting for smaller areas of the page.

The code is simple. Using basically the same code as in the last lesson, insert a new, smaller table:

<table style="width: 100%; text-align: left;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">&ndsp;<br>
</td>
<td style="vertical-align: top;">&ndsp;<br>
</td>
<td style="vertical-align: top;">&ndsp;<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">&ndsp;<br>
</td>
<td style="vertical-align: top;">

<table style="width: 100%; text-align: left;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;" colspan=î2î>&ndsp;<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">&ndsp;<br>
</td>
<td style="vertical-align: top;">&ndsp;<br>
</td>
</tr>
</tbody>
</table>

</td>
<td style="vertical-align: top;">&ndsp;<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">&ndsp;<br>
</td>
<td style="vertical-align: top;">&ndsp;<br>
</td>
<td style="vertical-align: top;">&ndsp;<br>
</td>
</tr>
</tbody>
</table>

You can see in the code where the table shows up right in the center of the HTML page. If you look at this code in a browser, you'll notice something else: the cells and rows that do not have content will move to the sides, leaving more room for your content-containing cell.

This is a normal function of HTML, but it gets very frustrating if you're trying to have cells formatted perfectly. This issue will be addressed fully in the next tutorial, Using Tables to Create Layouts.

Something else you'll notice: the new table has one long top cell and two smaller cells on the lower row. This is accomplished by using the new attribute above, colspan. Your colspan is equal to the number of columns that one cell should occupy. You can do the same thing with rowspan:

<table style="width: 100%; text-align: left;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;" rowspan=î2î>&ndsp;<br>
</td>
<td style="vertical-align: top;">&ndsp;<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">&ndsp;<br>
</td>
</tr>
</tbody>
</table>

Assignment: Experiment with this table. Move your new table from cell to cell, add and delete rows and cells, and watch what happens to your table when you do this. When you're comfortable with the code to nest tables and join cells, please move to the next tutorial. You MUST understand what you are doing with tables on this level in order to follow everything going forward from here.