Many layouts use the concept of "nesting tables". Simply put, this is putting a table area inside another table area.
One main use of this may be to have one big table creating the main layout, then having smaller tables within that structure to organize the data. HTMlite is a prime example of this. One table creates the navigation area and main area, then a second table organizes the links and contents in each area.
Keep in mind that using a tables layout is more of a "template" concept rather than a "frames" concept. It will give a uniform look to each page in your site.
Now you may be thinking this sounds all rather complicated to do, but it's actually simple if you stay organized in your coding. Let's go through it in steps...
First, setup a main table that covers the width of the screen and has two cells. Set the width of the first cell to 200 pixels and add a table border so you can visually see the results.
See the example in action! Click here!
Easy enough so far? Now comes the nesting part. All that is done for this is adding in a full table area within a td cell area. The new table is "nested" in the larger one. I will add in a table area into the first cell. It will contain 3 rows of 1 cell each.
See the example in action! Click here!
QUESTION : Whoa... stop the train! What's with that 100% setting in the nested table? Won't that mess up everything as it tries to go across the entire page?
ANSWER : Good question. No, the nested table will go to 100% of it's surrounding area. Since it is contained in the main table cell specified at 200 pixels, then the nested cell will only be 200 pixels wide. (Actually a bit less considering the border takes up a couple pixels, but that is just nit picking, lol.)
Now, what about having another "table area" appear after the first nested table area? Sure, no problem. Try this sample. I've added in a second nested table of 1 row and 2 cells...
See the example in action! Click here!
What about putting yet another table within one of those nested tables? Yes, that will still work. You can enter in as many as you like in whichever spaces. Just remember to include the entire table area and keep it together. If you start overlapping the tags of a nested table area with the tags of a main table area, all you will get is a big mess. IE5 is a very forgiving browser and probably skim over any mistakes, but Netscape is very strict. Any table tag coding errors and only a blank web page will appear! I usually use the indenting of tags (such as in the examples) to keep the specific areas in the right places.
One main use of this may be to have one big table creating the main layout, then having smaller tables within that structure to organize the data. HTMlite is a prime example of this. One table creates the navigation area and main area, then a second table organizes the links and contents in each area.
Keep in mind that using a tables layout is more of a "template" concept rather than a "frames" concept. It will give a uniform look to each page in your site.
Now you may be thinking this sounds all rather complicated to do, but it's actually simple if you stay organized in your coding. Let's go through it in steps...
First, setup a main table that covers the width of the screen and has two cells. Set the width of the first cell to 200 pixels and add a table border so you can visually see the results.
|
<table width="100%" border="1"> <tr> <td width="200"> cell one of main table </td> <td> cell two of main table </td> </tr> </table> |
Easy enough so far? Now comes the nesting part. All that is done for this is adding in a full table area within a td cell area. The new table is "nested" in the larger one. I will add in a table area into the first cell. It will contain 3 rows of 1 cell each.
|
<table width="100%" border="1"> <tr> <td width="200"> <table width="100%" border="1"> <tr> <td> cell one </td> </tr> <tr> <td> cell two </td> </tr> <tr> <td> cell three </td> </tr> </table> </td> <td> cell two of main table </td> </tr> </table> |
QUESTION : Whoa... stop the train! What's with that 100% setting in the nested table? Won't that mess up everything as it tries to go across the entire page?
ANSWER : Good question. No, the nested table will go to 100% of it's surrounding area. Since it is contained in the main table cell specified at 200 pixels, then the nested cell will only be 200 pixels wide. (Actually a bit less considering the border takes up a couple pixels, but that is just nit picking, lol.)
Now, what about having another "table area" appear after the first nested table area? Sure, no problem. Try this sample. I've added in a second nested table of 1 row and 2 cells...
|
<table width="100%" border="1"> <tr> <td width="200"> <table width="100%" border="1"> <tr> <td> cell one </td> </tr> <tr> <td> cell two </td> </tr> <tr> <td> cell three </td> </tr> </table> <table width="100%" border="1"> <tr> <td> left </td> <td> right </td> </tr> </table> </td> <td> cell two of main table </td> </tr> </table> |
What about putting yet another table within one of those nested tables? Yes, that will still work. You can enter in as many as you like in whichever spaces. Just remember to include the entire table area and keep it together. If you start overlapping the tags of a nested table area with the tags of a main table area, all you will get is a big mess. IE5 is a very forgiving browser and probably skim over any mistakes, but Netscape is very strict. Any table tag coding errors and only a blank web page will appear! I usually use the indenting of tags (such as in the examples) to keep the specific areas in the right places.
