|
|
|
When you create a table inside another table, it is called "nesting". This is a great alternative to merging cells if the situation requires it.
However, nesting tables can become very confusing when coding manually and can sometimes even become confusing in WYSIWYG Editors. There are two ways of making easy to work with nested tables, the first is by cleaning up your code.
Example of messy nested table code:
<TABLE cellpadding="0" cellspacing="10" border="5"><TR><TD>
<TABLE cellpadding="0" cellspacing="10" border="5"><TR><TD>
Content Goes Here</TD></TR></TABLE>
</TD><TD>More content goes here</TD></TR></TABLE>
|
|
Did you find that code difficult to understand? Actually, it's very simple, especially if we format it uniformly and with indents to allow people to see how deep the tables are:
<table cellpadding="0" cellspacing="10" border="5">
<tr>
<td> <!-- // BEGIN NESTED TABLE // -->
<table cellpadding="0" cellspacing="10" border="5">
<tr>
<td>Content Goes Here</td>
</tr>
</table> <!-- // END NESTED TABLE // -->
</td>
<td>More content goes here</td>
</tr>
</table>
|
|
The code above is easier to read because of two-space indents and clear comment tags. Dreamweaver, a popular WYSIWYG Editor, formats code similar to this, and for a good reason. The code above looks like this:
There is a nested table inside the left cell, and text inside the right cell.
|
|
|
|
"Better Than Books - As Easy As It Gets!"