| Free HTML Tutorials • CSS • Popups tutorial • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads |
|
Intermediate Section |
|
TABLES 5 - NESTING TABLES |
|
|
| Free HTML Tutorials • CSS • Popups tutorial • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads |
|
|
Intermediate Section |
|
TABLES 5 - NESTING TABLES |
|
|
|
|
NESTED TABLES
What is a nested table? Simply put, it is a table within a table, or several tables within a table, or even several tables within several tables. This can give you some interesting effects, but great care must be taken with the placement of the tables so they appear in the right order. The example I will be showing you here is one page of a large site. Although modified somewhat here, it uses nested tables to give the effect of frames. The email and postal address are fake. Click HERE to see it. Click the Return to Tables 5 link under Site Map to return. Nested tables are where COMMENT TAGS come into their own. With any page of nested tables you need to keep careful track of where each table is and what it's for. So use comments like this:
<!--Start left hand table 2 --> <!--***** Close table 2 ****** --> <!-- +++++++++ Make spacer row +++++++++ --> <!-- Change banner as needed --> Adding comments will help you to make sure all opening tags are all closed with the right number of tags at the end. As long as you start and end your comments correctly <!--comment -->, you can use any fancy doodad to draw attention to a section. Another thing that is helpful, as mentioned in the previous lessons, is to make your table borders 1 or 2 while you are working. That way you can see where everything is placed. It is almost essential to use a HTML validator with nested tables. You should, of course, check all your pages before posting them to the web, but none more so than these tricky little devils. If you find things going haywire, run the validator. It will usually pick up the errors you have missed, maybe just tiny things like an omitted closing tag or quote. See the Downloads page for a link to a free validator. They pop up sometimes on those free CDs you get with computer magazines, too. VIEWING CODE Now I'll show you how to view the code on a web page. Some of you may already know this one. You will find in these tutorial pages some code that you don't recognize. When we get to the Advanced section, all will be revealed in the section on Cascading Style Sheets (CSS). Open a page in your browser. Click VIEW. In Firefox or Netscape, select "Page Source", in IE select "Source". Voila! There is all the code right in front of you. You can now Copy & Paste the same way as before. (Edit -->Select all, Ctrl - C to copy, Ctrl - V to paste.) This works for most pages you'll find on the Web, except some frame pages. Click the X top right to get out. You can also right click on a clear part of the page and select "Source" or "View Source". Some web designers use JavaScript to prevent this so I prefer to use VIEW. There are no really effective ways to make pages "copyproof" as far as I know. Real frame pages are trickier. You have to open the actual frame you want to see in a new browser window first then use the above procedure.
I'm sure you wouldn't do it, but it is, however, an excellent way to learn some of the finer points of using HTML. If you see a site you admire, have a look at the source code. You can certainly learn from the technique - no one owns HTML - just don't pinch original ideas. Back to the lesson. Once you have mastered "normal" tables, there is nothing really hard about nesting tables. I repeat what I said earlier - as long as you use lots of comment tags to document each step, number your tables in the comments tag, leave your borders visible, then make sure you close the same number of tables, you should have no trouble. We've finally come to the end of Tables so let's move on.
Intermediate Index
Help
|