This was originally called 'Nesting Tables' but I have decided to add some other useful stuff, like wrapping text around tables etc. Hope you don't mind the name change !
As you remember from lesson 3, tables can be Aligned on the left, right & middle of the page, with text flowing around them, as in the following small examples :
| Cell one | Cell two |
| Cell three | Cell four |
This paragraph should flow nicely down the right side of the table on the left. This is because the table's ALIGN attribute is set to LEFT. Once the text reaches the bottom of the table, it flows nicely underneath it. If you cannot see this when looking at your browser's output, try reducing the width of the window until it all just happens.
| Cell one | Cell two |
| Cell three | Cell four |
It would be nice if this paragraph flowed nicely down the both sides of the table in the middle, but it doesn't. This is because the table's ALIGN attribute is set to CENTER and this causes text following the table not to flow around it. All of the text is simply rendered beneath the bottom of the table.
| Cell one | Cell two |
| Cell three | Cell four |
This paragraph should flow nicely down the left side of the table on the right. This is because the table's ALIGN attribute is set to RIGHT. Once the text reaches the bottom of the table, it flows nicely underneath it. If you cannot see this when looking at your browser's output, try reducing the width of the window until it all just happens.
With the exception of the middle table, the text flows nicely around each table and this is fine, but what if you don't want it to ? In the following two examples, I have added a <BR CLEAR="all"> tag immediately after the closing </TABLE> tag. This turns off wrapping and results in the following. (I have not shown the middle table, for obvious reasons !
| Cell one | Cell two |
| Cell three | Cell four |
This paragraph no longer flows nicely down the right side of the table on the left. This is because after the table's closing tag, there is a <BR CLEAR="all"> tag.
| Cell one | Cell two |
| Cell three | Cell four |
This paragraph no longer flows nicely down the left side of the table on the right. This is because after the table's closing tag, there is a <BR CLEAR="all"> tag.
Here is a bit of simple advice when you decide to nest a table within another, don't try to do it all at once !
The easiest way is to create the inner table first at the top of your document and then view it in the browser. Make sure it looks nice and the way you want it to look. Here is our inner table's code and how it looks in the browser :
<TABLE WIDTH="50%" BORDER="1">
<TR>
<TH>Inner column one</TH><TH>Inner column two</TH>
</TR>
<TR>
<TD>Inner cell one</TD>
<TD>Inner cell two</TD>
</TR>
<TR>
<TD>Inner cell three</TD>
<TD>Inner cell four</TD>
</TR>
</TABLE>
<BR CLEAR="all">
Inner column one Inner column two Inner cell one Inner cell two Inner cell three Inner cell four
So far, so good. Now we design our outer table, but put a placeholder into the cells where we wish to insert the inner table - still with me ? It looks like this :
<TABLE WIDTH="50%" BORDER="1">
<TR>
<TH>Outer column one</TH><TH>Outer column two</TH>
</TR>
<TR>
<TD>PLACEHOLDER</TD>
<TD>Outer cell two</TD>
</TR>
<TR>
<TD>Outer cell three</TD>
<TD>Outer cell four</TD>
</TR>
</TABLE>
<BR CLEAR="all">
Outer column one Outer column two PLACEHOLDER Outer cell two Outer cell three Outer cell four
And now that we have both tables looking good, we cut the inner table's code and paste it where we have the word 'PLACEHOLDER'. This makes life so easy and it saves much heartache when trying to do the whole thing in one go. I am a firm believer in the KISS principle - Keep It Simple, Stupid ! Here comes the code first, I have highlighted certain parts to make it stand out better :
<TABLE WIDTH="50%" BORDER="1">
<TR>
<TH>Outer column one</TH><TH>Outer column two</TH>
</TR>
<TR>
<TD> <TABLE WIDTH="50%" BORDER="1">
<TR>
<TH>Inner column one</TH><TH>Inner column two</TH>
</TR>
<TR>
<TD>Inner cell one</TD>
<TD>Inner cell two</TD>
</TR>
<TR>
<TD>Inner cell three</TD>
<TD>Inner cell four</TD>
</TR>
</TABLE> </TD>
<TD>Outer cell two</TD>
</TR>
<TR>
<TD>Outer cell three</TD>
<TD>Outer cell four</TD>
</TR>
</TABLE>
<BR CLEAR="all">
And how it looks :
| Outer column one | Outer column two | ||||||
|---|---|---|---|---|---|---|---|
|
Outer cell two | ||||||
| Outer cell three | Outer cell four |
Oh dear, it doesn't look as nice as it did as two separate tables, what has gone wrong ? It looks like the whole inner table has shrunk to fit into the outer one, but this is not the case. Look at the code for the inner table again, and you will see that the WIDTH attribute is set to 50%. When the table was free standing, this was 50% of the browser width, but now that the table is nested, it means 50% of the parent cell width. To fix the problem, change the width specifier on the inner table from 50% to 100% and we get the following :
| Outer column one | Outer column two | ||||||
|---|---|---|---|---|---|---|---|
|
Outer cell two | ||||||
| Outer cell three | Outer cell four |
Why would you want to nest a table inside another one ? How about using tables to define how your web page is to look. This works in all browsers (does it work with text based ones only I wonder ?) and can be used to create a non-frames based 'framed' web page. Simply draw what the page is to look like on a piece of paper, and define a table to match. This is the outer table. Within each cell, define an inner table with everything you want in it, merge the two and test. Continue nesting until you have a web page to be proud of. Don't forget about row and column spanning, this works for nested tables too.
| Previous Lesson | Home Page | Next Lesson |