Useful tip for learning how to work with nested tables

[Skunk]

I use this technique quite a lot, and thought I'd share it with people on the forum. If you ever see a site with a really impressive nested table design (Planet Halflife springs to mind) there's a very easy way to figure out how they used tables in their design.

First, save the page to your hard disk drive using the "Save as... -> Web Page, complete" option in Internet Explorer. I find for some reason that this feature only works properly if you select "Work Offline" from the file menu before using it - you can always uncheck this option after you have saved the page.

This will save the main page as a .htm file, and stick all of the images and other files used on that page in a newly created subdirectory.

Now, open the main html file in an editor that allows search and replace (I use UltraEdit, but Wordpad will do just as well). Perform a search and replace that replaces all instances of border=0 with border=1 (you may need to replace border="0" as well depending on the page). Save the file, and open it in explorer. All of the table borders will now be visible, allowing you to easily see how the tables were nested to create the page

Hopefully someone will find this tip useful,

Skunk

[creole]

I do the very same thing...

so nice to be able to see 3D borders in all their glory!

[bigsig]

I've used a similiar trick when doing complex layouts.

I usually take it one step further and use CSS to apply different colors to tables, rows and cells. It find it helpful to see how all the elements are nesting.