HTML Lesson 5

Nesting Tables Now that we have covered the basics within HTML ; we have looked at colors, cells, and tables...ahh...tables, yes, and now we are going to look at what is known as nesting tables. Nesting tables is when you create tables to reside within each other. You could have a main table that contains 2, 3, 4 or as many tables as you want inside of it. "Why would I want to do this?" you ask Sometimes it is the only way to get data or content into the specific format that you or your client is trying to achieve. To start off simply, we will build a single table that is 400 pixels wide and 300 pixels tall, and to make it a little easier visually, we are going to color it orange and add a piece of text inside it that says "Table 1". Code for orange table: <Table bgcolor="orange" width="400" height="300"> <tr> <td> Table 1 </td> </tr> </table> The code above sets up a table and then creates a main row and cell within it. The code would be viewed as below: Table 1 We are now going to add two tables within our orange table. We'll make a red table on the left and an aqua table on the right. Inside of each table, we are going to add four cells vertically and name them accordingly. HTML can sometimes be rather picky with how you lay things out. When using a table, cells will effect other cells unless you nest them. If you notice on the cells (borders were added to make this more visible) when compared to the other side (red vs. aqua) you'll notice that they don't match up. If you were to create this within one table, cells would change the height of the other side. That's why nesting of table comes in handy, it gives you, the developer, that much more control when data or images aren't even in size. View the browsers output of nested tables below: Code for tables is below tables in gray box. Table 2 cell 1 Table 2 cell 2 Table 2 cell 3 Table 2 cell 4 Table 2 cell 1 Table 2 cell 2 Table 2 cell 3 Table 2 cell 4 <table width="400" height="300" bgcolor="orange"> <tr> <td> <table bgcolor="red" width="200" height="300" border=1> <tr> <td border=1 height="20">Table 2 cell 1</td> <tr> <td border=1 height="20">Table 2 cell 2</td> <tr> <td border=1 height="100">Table 2 cell 3</td> <tr> <td border=1 height="60">Table 2 cell 4</td> </table> <td> <table bgcolor="aqua" width="200" height="300" border=1> <tr> <td border=1 height="60">Table 2 cell 1</td> <tr> <td border=1 height="100">Table 2 cell 2</td> <tr> <td border=1 height="20">Table 2 cell 3</td> <tr> <td border=1 height="20">Table 2 cell 4</td> </table> </td> </table> The blue code above replaces the line of text from the code at top of page (first gray box) where it was labeled Table 1 inside the cell inside the orange table. Hopefully this is making sense for you. Take extra careful notice of the opening and closing tags as well as the placement of cells. Anytime when you are designing tables, especially when nesting tables, it is always a good idea to draw out your design on a piece of paper, that way you know exactly what you are trying to achieve, and you can also label things. Scrapwork, notes and sketches always come in handy when things havn't quite worked out the way you expected.