Tell a Friend About Our Cool Software
Chapter 4: Embedding a Table in Another Table
Some of the most flexible page design techniques involve the use of nested tables. This technique is surprisingly simple--all you need to do is create the main table (the outer table) and then insert another table (the inner table) in one of the cells. Here's a very simple example of HTML that nests one table in another, with the rendering shown in Figure 4-9.
<table border="1" cellpadding="5" width="250">
<tr>
<td width="50%">
<table border="1" cellpadding="5" width="100%">
<tr>
<td>inner</td>
<td>inner</td>
</tr>
<tr>
<td>inner</td>
<td>inner</td>
</tr>
</table>
</td>
<td width="50%" height="12">outer</td>
</tr>
<tr>
<td>outer</td>
<td>outer</td>
</tr>
</table>
Figure 4-9. Nesting one table within another.
The size of the inner table, and the size of the cell it is in, interact as follows:
- If the inner table's width is specified as a percent, it's width will be that percentage of the width of the cell it is in.
- If the inner table's width is specified in terms of pixels, it will display at that width. The cell it is in will expand if needed to accommodate.
- The inner table's height will be determined by its content or by the height attribute of the <td> elements it contains.
- The containing cell's height will expand, if needed, to accommodate the inner table.
You may have already realized that these two distinct techniques, merging cells and embedding tables in tables, are similar in some respects. They are both techniques that let you escape from the strict rectangular grid structure of a basic table. Which should you use for a given design task? There's no real answer to this question. Many layouts could be created either way. As you work with HTML tables and gain additional experience, you'll gain an intuitive feel for which technique would be better for a particular layout. Also, remember that you can combine merged cells and embedded tables, providing you with even more flexibility.
CoffeeCup Software started in a real Coffee House 1996. Our first program was the HTML Editor. Over the last 10 years we have created a lot more Web Design & Flash Software. Our philosophy has always been to create software and services so you can make better Websites. We are dedicated to helping you by offering extraordinary support so we can succeed together. Consider us a partner and a friend, because we really are about Fresh Software and Warm People.
