Designing Web pages with tables

Nested tables

Any set of a table can contain another table. Such tables are called nested. In the following example two tables are put into cells of an external (invisible) table consisting of one row and two columns.

Table 1
cell 1cell 2 cell 3
cell 4 cell 5 cell 6
  Cell 7
     
Table 2
cell 1cell 2 cell 3
cell 4 cell 5 cell 6
Cell 7

This layout is produces by the following HTML script:

HTML tagsComments
<table> <tr>
<td> <table border="1" bgcolor="lightyellow">
<caption>Table 1</caption>
<tr bgcolor="red"><td>cell 1</td><td>cell 2</td> 
<td>cell 3</td></tr> <tr><td>cell 4</td>
<td bgcolor="blue"><font color="white">cell 5</font></td>
<td>cell 6</td></tr>
<tr><td> &nbsp; </td><td colspan="2">Cell 7</td></tr>
</table> </td>
<td> &nbsp; &nbsp; &nbsp;</td>  
<td> <table border="1" bgcolor="lightyellow">
<caption>Table 2</caption>
<tr bgcolor="red"><td>cell 1</td><td>cell 2</td> 
<td>cell 3</td></tr> <tr><td rowspan="2">cell 4</td>
<td bgcolor="blue"><font color="white">cell 5</font></td>
<td>cell 6</td></tr>
<tr><td colspan="2">Cell 7</td></tr> </table> </td> 
</tr>
</table>

starting the outher (invisible) table
starting the left table
caption of the left table
the first row of the left table
starting the second row

completing the second row
the third row of the left table
the left table is completed
some space between the tables
starting the right table
caption of the right table
the first row of the right table
starting the second row

completing the second row
completing the right table

completing the outher table