HOME
   HTML TUTORIALS
   HTML EDITOR
   COLOR CHART
   TEMPLATES
   RESOURCES
   PROMOTION
   HOSTING
 
 
 
   SEARCH
   LINK TO US
 

Do you find this website helpful?
Help us by making a donation.
All donations go back to promote ebay stores.


 




Cash Register, POS, Credit Card Printer Ink Ribbons
 

 

 

 
 
 




Multiple tables, nested tables:

 

Why use multiple tables on a page?

Generally I use multiple tables to contain a header graphic and to get the desired look within a table.

Since most load time is caused by graphics, and as we know you only have a few seconds to grab the attention of your viewer, by using a separate table for graphics and a separate table for content, the content will be loaded while the graphics are loading.

Example:
 

TABLE 1
This could be a header graphic

 

TABLE 2
This could be your description or other text

 

TABLE 3
This could be your pictures


Nested tables:

Nested tables can be confusing depending on how you look at them.  Rather than looking at the "Whole" look at each piece that makes up the "Whole".

Let me explain with the following example.  We start with table 1 that has two cells, A and B.  Lets say we want to add a table inside (a nested table) cell A.
 

This is table 1 cell A
 
This is table 2
This is table 1 cell B


And here is the code for the above example.

center>
<!---------------- Start of table 1------------------------>
<table border="1" cellpadding="0" cellspacing="0"  bordercolor="#111111" width="90%">
<!-----------------Start of cell A of table 1-------------->
<tr>
<td width="50%" height="100" align="center" valign="top" bgcolor="#FFFFCC">
This is table 1 cell A<br>
<!-----------------Start of table 2------------------------>
&nbsp;<table border="1" cellpadding="0" cellspacing="0"  bordercolor="#111111" width="50%">
<!------------------Start of cell 1 of table 2 ----------->
<tr>
<td width="100%" height="50" bgcolor="#D2D2CA" align="center">
This is table 2</td>
</tr>
</table> <! this is the end of table 2-->
</td> <!--this is the end of cell A that we put table 2 into--->

<!---this is the start of cell B in table 1--->
<td width="50%" height="100" align="center" valign="top" bgcolor="#FFFFCC">
This is table 1 cell B</td>
</tr>
</table><!--- and this is the close of table 1-->
</center>

So, with the above example we built table 1 first, then we inserted table 2 into cell A, it's like building a layer cake.

Speaking of layers, lets see how we can layer tables.

Table 1
Table 2
Table 3
Table 4

 

Not pretty but I think you get the idea of how we can do virtually anything in a layout using tables.
 

That concludes tables and our HTML tutorial.  I hope you had fun and learned a few basic concepts of HTML.  Like anything it takes practice, don't get discouraged.


Tozo
5-13-2003


 
 

Google



Home | HTML Tutorials | HTML Editor | Templates |  Resources | E-mail
 Copyright 2004 - 2008 xample.net


 
 



More help sites

 
Need Help?
checkout
Bob's
Tips


 

Lesley Feeney
Resources