HTML Nested Table
Table of Content:
As with many other HTML elements, it is possible to nest tables. That is, part or all of the contents of one cell of an outer table may be another entire table.
However, you need to exercise caution when nesting tables. Even if your HTML is absolutely correct, some people still may not see what you intended. Some browsers may not support nested tables at all, and those that do may not support more than one level of nesting (in other words, a table inside of a table may work, but not a table inside of a table inside of a table).
The good news is that nesting tables are usually unnecessary. You can often re-think the table layout in a way that uses a single, slightly more complex table, and cells joined by COLSPAN and ROWSPAN, to achieve the desired result.
For example, examine the following table layout:
Live Preview
One way to conceptualize this layout is as a set of three nested 2 x 2 tables. The outermost table consists of the cells numbered 1, 2, and 3, plus another cell in the lower right quadrant that is further subdivided. The next table consists of the cells numbered 6, 9, and 10, plus another cell in the upper left quadrant that is again further subdivided. This final, innermost, table consists of the cells numbered 4, 5, 7, and 8. Thus it is as if the following three 2 x 2 tables were nested inside each other (the word "next" in the HTML below is replaced by the code for the entire next table):
Step 1:
<table border="1">
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
<tr>
<td> 3 </td>
<td> next </td>
</tr>
</table>
Live Preview
Step 2:
<table border="1">
<tr>
<td> next </td>
<td> 6 </td>
</tr>
<tr>
<td> 9 </td>
<td> 10 </td>
</tr>
</table>
Live Preview
Step 3:
<table border="1">
<tr>
<td> 4 </td>
<td> 5 </td>
</tr>
<tr>
<td> 7 </td>
<td> 8 </td>
</tr>
</table>
Live Preview
<table border="1"> <tr> <td> next </td> <td> 6 </td> </tr> <tr> <td> 9 </td> <td> 10 </td> </tr> </table>
Live Preview
Step 3:
<table border="1">
<tr>
<td> 4 </td>
<td> 5 </td>
</tr>
<tr>
<td> 7 </td>
<td> 8 </td>
</tr>
</table>
Live Preview
The complete resulting HTML code for this way of looking at this layout is:
<table border="1" height="300" width="400"> <tr> <td> 1 </td> <td> 2 </td> </tr> <tr> <td> 3 </td> <td> <table> <tr> <td> <table> <tr> <td> 4 </td> <td> 5 </td> </tr> <tr> <td> 7 </td> <td> 8 </td> </tr> </table> </td> <td> 6 </td> </tr> <tr> <td> 9 </td> <td> 10 </td> </tr> </table> </td> </tr> </table>
Live Preview
In this view, the cell numbered 2 occupies the same position as three horizontally-adjacent cells would in a full 4 x 4 table, so it uses COLSPAN=3. Likewise, the cell numbered 3 occupies the same position as three vertically-adjacent cells would in the full table, so it uses ROWSPAN=3. The cells numbered 6 and 9 also represent combined cells (two cells each), so they use ROWSPAN=2 and COLSPAN=2, respectively. The HTML code for this way of looking at this layout is:
<table> <tr> <td> 1 </td> <td COLSPAN=3> 2 </td> </tr> <tr> <td ROWSPAN=3> 3 </td> <td> 4 </td> <td> 5 </td> <td ROWSPAN=2> 6 </td> </tr> <tr> <td> 7 </td> <td> 8 </td> </tr> <tr> <td COLSPAN=2> 9 </td> <td> 10 </td> </tr> </table>
Live Preview
This is shorter, simpler, and much easier to maintain. In addition, it avoids table nesting altogether. Notice that the cell order differs between the two versions, for browsers which do not support tables at all: the nested version presents cells as 1 2 3 4 5 7 8 6 9 10 (cell 6 is out of sequence), whereas the other version presents them in the order they were numbered for this example. Which ordering is correct, of course, depends on your point-of-view (the numbers are arbitrary).
<table border="1" height="550" width="100%"> <tr> <td bgcolor = "yellow" height="100"> 1 </td> <td COLSPAN=3 bgcolor = "yellow" height="100"> 2 </td> </tr> <tr> <td ROWSPAN=3 bgcolor = "yellow"> 3 </td> <td> <table border="1" height="500" width="100%"> <tr> <td> <table border="1" height="500" width="100%"> <tr> <td bgcolor = "#f2eded"> 4 </td> <td bgcolor = "#f2eded"> 5 </td> </tr> <tr> <td bgcolor = "#f2eded"> 7 </td> <td bgcolor = "#f2eded"> 8 </td> </tr> </table> </td> <td COLSPAN=2 bgcolor = "pink"> 6 </td> </tr> <tr> <td ROWSPAN=2 bgcolor = "pink" height="50"> 9 </td> <td ROWSPAN=2 bgcolor = "pink" height="50"> 10 </td> </tr> </table> </td> </tr> </table>
Live Preview
Final Result
<table height="550" width="100%"> <tr> <td bgcolor = "yellow" height="100"> 1 </td> <td COLSPAN=3 bgcolor = "yellow" height="100"> 2 </td> </tr> <tr> <td ROWSPAN=3 bgcolor = "yellow"> 3 </td> <td> <table height="500" width="100%"> <tr> <td> <table height="500" width="100%"> <tr> <td bgcolor = "#f2eded"> 4 </td> <td bgcolor = "#f2eded"> 5 </td> </tr> <tr> <td bgcolor = "#f2eded"> 7 </td> <td bgcolor = "#f2eded"> 8 </td> </tr> </table> </td> <td COLSPAN=2 bgcolor = "pink"> 6 </td> </tr> <tr> <td ROWSPAN=2 bgcolor = "pink" height="50"> 9 </td> <td ROWSPAN=2 bgcolor = "pink" height="50"> 10 </td> </tr> </table> </td> </tr> </table>
Live Preview
Another Example
<table> <tr> <th> </th> <th> Morning </th> <th> Afternoon </th> </tr> <tr> <th> Saturday </th> <td> Cycling </td> <td> Fishing </td> </tr> <tr> <th> Sunday </th> <td> Rowing </td> <td> <table> <tr> <th> Group 1 </th> <th> Group 2 </th> </tr> <tr> <td> Water ski-ing </td> <td> Wake boarding </td> </tr> </table> </td> </tr> </table>