Home
Username:
Password:
Adobe Dreamweaver CS3 Tutorials

Tables / Nesting Tables




Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.


Learn More

Subtitles of the Movie

If you're planning to use tables as your primary means of creating your page layouts you'll need to make frequent use of the various table modifying techniques I've covered in this section of the course. Such as merging or splitting cells or adding or removing table rows or columns. When these fail to give you the precise page layouts that you'll need you'll want to employ the technique I cover in this movie, nesting tables. A nested table is a table inside of a cell of another table. You can format a nested table as you would any other table. However its width is limited by the width of the cell in which it appears. So I have a table here. Let's click in the middle cell and go ahead and insert another table inside of that three column, three row table. Let's make this one two columns and two rows. Let's set the table width to one hundred percent instead of using a pixel width. That will fill up the entire width of that cell. Let's go ahead and add a border thickness of one so you can see the table, the nested table easier. Notice because I have set the width to one hundred percent it fills up the entire width of that table cell. You can also notice the tag selector down here now has two tables, a parent table and the child table inside of it. If I click on the nested table I can always change my width from one hundred percent to let's say seventy-five percent. Notice now as I modify the width of this cell that nested table will always maintain its seventy-five percent of the total width of that cell. Now you are not limited to nesting only a single table. I can also nest a table within this nested table, I just simply add another table inside of there. Let's add a three column, one row table, set to one hundred percent and again I have added the table widths there so you can see these tables. So I have two nested tables, all these tables are defined here in the tag selector. Here's where the tag selector really comes in handy when you have multiple nested tables. There's my table inside of the other nested table. There is my second table and there is my master or parent table and I can select each of those by clicking on the appropriate table tag here in the selector. Now what's great about this technique is that you can always go back and add additional rows or insert additional rows or columns by splitting that table cell. You can also merge cells that you have already created in any of these tables. So you can see that by using these various techniques that I've covered previously in conjunction with nested tables really gives you an unlimited number of page layouts that you can apply solely using tables without having to resort to layers or lay out mode to draw your tables. And again to demonstrate this lets go in here and lets split these cells here into numerous rows and columns and that's a quite sophisticated layout, imagine if I get rid of all the borders on my tables I really have a lot of options for laying out an HTML table here in a non rectangular way. Once I get content into these various cells the basic rectangle shape of the tables disappears completely so to summarize you can place nested tables inside an existing table cell, the only restriction is the width of the nested table will be restricted to the width of the cell that contains that table. So in conclusion if you are planning to use tables as your primary means of creating your page layouts you'll definitely need to employ this technique of nesting your tables inside an existing table cell. That will conclude this section of the course on tables. In this section you've learned how to set initial HTML properties how to modify your table properties and how to modify your table cell properties. You've learned about expanded tables mode and how much easier it is to edit your tables in this mode. You've learned about how to add and remove table rows and table columns as well as splitting and merging table cells. You've learned how to copy, paste and delete cells in a table and you've also learned how to nest one table into the cell of another table.

Tutorial Information

Course: Adobe Dreamweaver CS3
Author: James Gonzalez
SKU: 33789
ISBN: 1-934743-04-6
Release Date: 2007-09-06
Duration: 10 hrs / 125 lessons
Work Files: Yes
Captions: For Online University members only
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 98,729 Video Tutorials (23,265 free)
  • Video Available as Flash or QuickTime
  • Over 1026 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available