|
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Stacking TablesSometimes a table defies normal analysis. In these cases, it's a good bet that "stacked" or "nested" tables are being used. Stacked tables are tables coded on top of one another with no space between them. Nested tables are tables that are placed inside other, parent tables. Both are common techniques. Look at the table below:
You may have be wondering how I got this unusual spanning to make an "L" shaped table. Well I didn't use COLSPAN or ROWSPAN. I used two different tables. If you look carefully, you'll see a thick border where the horizontal and vertical tables meet. I made two tables and stacked one beneath the other. Stacking is the easiest way to make "L" and "C" shaped tables. The code is really simple. Just code one table and then the other. There should be no code between the closing </table> tag of the first table and the opening <table> tag of the one beneath with two exceptions. You may have to add a <br clear="all"> tag to make a line break to get one table beneath the other. You can also add comments, which is heartily recommended. Here's the code that made the stacked tables above:
<!-- Top Table --> Everything is pretty self explanatory. I've coded two tables with nothing between them except some comments and a single <br clear="all"< tag. It's the <br> tag that makes the second table render below the first one. If the <br> is removed the tables would try to render side-by-side:
Tables coded like this will act as one large table relative to any text flowing around them. Some very neat effects can be made like this. The key to getting tables to butt up against each other is to code them one after the other with only <!-- comments --> and <br clear="all"> tags placed between the tables as needed. Whether or not you need to add a <br clear="all"> tag may take some trial and error. The real power behind stacking tables is that each <table> can be sized and positioned independently of the other(s). This gives a freedom to data layout that a single table just can't beat even with complex spanning and sizing techniques. Nesting TablesNested tables are just tables that are coded inside other tables. The "child" tables are coded in a cell (<td>) of a parent table. This technique is used frequently to make columns that will show two tables side-by-side. One parent table is coded for the layout (columns) and then the two content tables are coded inside the parent table for actual display
Above you see the tables side-by-side. Both tables are inside a parent "layout" table. I'll add a black border to the layout table to make this clearer:
It's now easy to see that the red and blue tables are "nested" inside the black, parent table. The red and blue table code is inside a <td> of the parent table. There are a lot of ways to go about coding these. The method I recommend is to code each table individually and then copy and paste the child tables into the parent table. Here's an example of how I would go about coding the above nested tables. First, I'd code the parent, layout table. This is what will fit the displayed tables on the page and will control the sizing. Keep this in mind when coding your child tables. I want to make the table 80% of the page wide and center the overall content. I'll let the HEIGHT be set by the child tables, so I won't add HEIGHT to the layout table. I'm wanting two cells side-by-side, so I'll be coding one row with two cells/columns (each running half way across the table):
<!-- Layout Table --> Now I'll code the child tables keeping the dimensions of the layout table in mind. Remember that percentages used in the <table> tags of the child tables will be a percentage of the cell of the parent table that they're nested in.
Lets take a little break before continuing to discuss the WIDTHS and CELLPADDING we've been using. You see that I've sized each child table to "100%", but 100% of what? Since these tables are going into a cell of a parent (layout) table, the percentage is a percentage of that cell, not the entire parent table or whole page. The parent's table cell runs 50% across the table, which, in turn, goes 80% across the page. So (whew!), the child table is 100% of 50% of 80% of the page's width -- or 40% of the page's width. The important thing to remember here is that you need to keep up with what parent element you are sizing to when using percentages. It's not as hard as the above ranting makes it seem. Starting by coding the layout table helps to keep this all straight. The broad CELLPADDING=10 makes a generous margin of 10 pixels all the way around the cells of both the child and parent tables. You can see in the example where I turned on the black border that the child tables do not actually stretch 100% across their cell. This is due to the CELLPADDING. Remove the CELLPADDING, as is done in most layout tables, and the cells will stretch all the way across the cell. In the two <table> tags above you can see that we've stretched each table fully across the cell it will be in. We've also centered the tables. Actually we've centered them twice which is okay. The first centering occurs in the layout table's <td align="center"> tags. The second centering is in the child table's <table align="center"> tag. Either one would work alone, but it never hurts to be a little redundant in HTML. So-called gurus are apt to disagree, but, frankly, redundant coding often prevents a variety of glitches from occurring. Don't go out of your way to be redundant, but don't go out of your way not to be, either. Now lets code the rest of the child tables:
Notice that both of the tables above are complete tables in and of themselves. They are now ready to be placed into the parent, layout table for display. I'd suggest using copy and paste to make this chore a breeze.
<!-- Layout Table --> You can see from the code above why it's a good idea to break down the task of nesting tables into separate steps. Make all of the tables separately, add stub content like "Cell #x", and adjust and debug each table individually before making the nested table. Then all you have to do is copy and paste the child table code into the appropriate cell of the parent table. ExercisesMake the tables below and we'll move on to discuss some <table> details before getting ready of a <table> exam. Two stacked tables that are centered individually, but "stacked":
The "C" table. This is made by stacking three tables:
Now for a little nesting. It will help to set BORDER=3 or so for the layout table until the whole table is finished. Code the layout table first. Use copy and paste to help you quickly code the nested tables from one hand coded one. Then copy and paste the child tables into the layout table.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||