Sponsored Links:
Web Site Visualization
Like most heated debates, it is hard to come up with a definitive answer to the debate about whether or not it is still ok to use tables for web site layout. I don’t intend to provide a definitive answer in this post, but I would like to present another way of looking at the problem.
Evaluating Code
It can be very instructive to view the source code of web pages—pretend that you are a web spider, and that it is your job to ignore HTML, CSS, and Javascript in the search of pure content.
Look at some different sites, some laid out with tables, others with HTML and CSS, and see what the difference is. Which makes content more available? I’m not going to say what my opinion on the matter is here. Go do it yourself. Be honest and open-minded about what you find.
Web Site Visualization
Another way to compare table- vs. CSS-based pages is to use this web site visualization applet. The program takes a URL as input and then creates a visual map of that page. Each node is a different color and represents a different HTML tag or element.
Comparing Tables to CSS
Site Laid out with Tables
Let’s first examine a site laid out with tables.
The table site has many, many red nodes (table cells) and pink nodes (images used for site design purposes, not as inline information). If you examine the tree image carefully, these nodes appear to be out on their own, unattached to content, and simply weighing the site down. You could snip them right off the tree without missing them!
Content areas are represented by heavy clusterings of orange nodes. For this site, there are three different orange clusters, meaning the content is split into three different areas.
CSS-based Site
Next, let’s examine the CSS-based site. I selected this page to have about the same amount of content and a similar visual appearance to the table-based page.
First, notice how many fewer nodes there are period. Next, there are two images on the whole page—the site logo and a 1px image used for site stats tracking! Finally, all of the content is in one, accessible area.
Visual Path of the Blind
What these visualizations of web pages really are is a map of the visual path of the blind—both blind humans and blind spiders. The results say to me that it is worth pruning the trees of our sites in order to make them easier to get around!
on June 30th, 2006 at 10:21 am
How do I open the page source of an HTML document so I can edit it without a source code editor?
on June 30th, 2006 at 9:42 pm
In Internet explorer, click on the “View” menu at the top of your browser. Go down and click “Source.” This brings up a Notepad window that will show you the source of the page.
In Firefox, you click the “View” menu and then go down to “Page Source.” You can also hit Ctrl-U. You will then have to copy and paste the code into a text editor like Notepad.
If you want to save these files to the Internet, you will also need an FTP client.
Hopefully that will help.