When planning a design layout for a new website, perhaps one of the most important decisions you can make is whether to use DIV or TABLE tags to structure and position your page layout.
The old fashioned way is to use a TABLE, placing various components of your content such as text and images in various cells in order to define position. This approach is relatively straightforward, and offers the best compatibility with an ever increasing number of web browsers that are available. Every browser supports tables. This makes the initial design much less labor intensive. The technique has been used since the mid 1990's when Netscape was the dominant browser.
Tables get the job done, but more and more often we're seeing sites that are enclosing content in DIV tags and using CSS (cascading style sheets) to control look, feel, and position. It's a lot more work, mainly because of Internet Explorer 5 and 6, which although outdated are still widely used. These browsers may support CSS directives, but not in a way that is fully compliant with CSS specifications. That means your website may appear very differently in Internet Explorer 5/6 than it does in IE 7 or 8, Firefox, Opera, Safari, and of course the new Google Chrome browser.
In order to get your website to look the way you'd like it to in all these different browsers, you'll need to preview your site in each and then add browser specific tweaks to your CSS. If that's not possible, then at the very least you need to check in IE 6 to make sure a significant number of users are able to access and view your site and that it looks somewhat professional. You may also need to just live with something being a few pixels off in certain browsers as fixing something for one can break it for another.
That said, I believe DIV tags are the way to go. In spite of the extra work, and possibly having to live with a few differences in how things are displayed between different browsers, DIV with CSS offers some very significant advantages.
1) It's very easy to completely change the look and feel of your site after the fact, just by changing the style properties of the various DIV tags enclosing your content.
2) While the look and feel can also be rapidly changed to table cells by applying CSS styles to tables, DIV tags can be repositioned whereas table cells can't be (at least not as quickly and easily). This offers a great benefit to those concerned with SEO as text which may make more sense to include at the bottom of a page to a human being can actually be coded at the top of the page where search engines will find it. Just assign a negative margin and the DIV gets pulled down to where you want it to be seen.
3) Less code and faster loading time. That may not seem like much of a benefit given that so many people have high speed cable/DSL Internet access... but there are still a lot of people using 56K modems.
Also, a lot of web hosts still charge for data transfer, so if your web host doesn't provide an unmetered connection then you'll be concerned with the amount of data you're transferring in addition to how quickly your site loads for your visitors.
Then, there's Adwords. If you're running a Google Adwords campaign you'll be very concerned with something called the "Quality Score". See this post Learn How Adwords Bidding Really Works. One factor used in determining Quality Score is load time, so anything you can do to reduce it, may be of benefit to you... even if it may not be human perceptible difference in load time.
As more people upgrade to current browsers, the cross-browser CSS issues will fade in importance in the not too distant future. Your website, however will be up and running for a long time to come and throughout the course of operating your website it is certain that you'll need to make several significant updates to content, and look and feel. Tables may make initial development faster and easier right now, but DIV + CSS makes ongoing maintenance and updates faster and easier over the long term. It's cost of purchase vs. cost of ownership for your site.
In my opinion DIV + CSS offers much better value to a webmaster than tables do when it comes to design layout (except for very small and relatively simple websites).


visit our website to subscribe to our











Bookmarks