I just finished debugging a web page. It was an old school layout based on tables, lots of tables. I needed to add an entry to the page and delete old entries. Everything would have been fine if the sidebar hadn’t suddenly moved to the bottom of the page instead of staying in the sidebar. Yes, I should be able to use a WYSIWYG editor to fix everything, but the fact is, I’ve never figured out how to modify an existing table in Frontpage’s normal view without screwing up the layout one way or another. That meant it was time to whip out ConTEXT and wrestle with tables. I finally fixed everything by pasting the old entries back into the web page and deleting them one by one until I found the code that shouldn’t have been deleted. Needless to say, it was misplaced table tag:
<table class=”infobox” cellspacing=”0″>
<table class=”spacer” cellspacing=”0″>
In addition to ConTEXT, I also used the Web Developer Toolbar and Firebug Firefox extensions. The Web Developer Toolbar’s table outline feature draws colored boxes around tables and table cells, so you can see what belongs where. It also has a handy “Validate HTML” shortcut in the Tools menu. Your web page doesn’t really have to be 100% valid to work, but sometimes validators can catch mismatched or malformed tags that will solve your problems, so validate away.