Differences Between Tables & Divs

July 4th, 2009 | No Comments »

Hi regular readers!

We know that its been quite a while since we posted … actually a long time! If you’ve been over to our youtube channel you would know that we’ve introduced a few videos and their are lots more to come. Stay tuned for that.

Ok so here we bring you our very first article, being long and interesting we have split this article into two parts. Enjoy part one for now and we will release part two very soon. In this article im going to debate about the most discussed topic in the web design industry. Now if you’re a proffesional designer and have been in the industry for quite sometime you would know that divs and CSS are the way! There are no if’s or but’s its a defenite use of CSS and Divs for any project to do with web design.

Ok so if you’re a amatuer designer and have just started out or you are ‘old school’ then you would know that you use tables more often. (Or even if you’re lazy) its not the strongest point in web design and not the best way to create your website, we’ll tell you why later!

Tables, how when and why!

Ok so when web designing was like the ‘hit’ thing and everyone started to make web pages the tables were the best thing! Its like having a cassete player and now a mp3! But as the era developed and so did the software so did the methods. Now CSS and Div’s have been introduced in web designing to provide a more proffesional and more accurate approach for designers and to make life easier!

What are tables initially used for?

Ok, so you get some people who still use tables to create entire websites from scratch (See Fig 1 for an example of creating a website using tables) . Even if yet this method isn’t for this. Tables are initally ment to be used for presenting data and information on a website.¬† To create structured data and make everything look organised.
In this article we wont be going into rarther deep detail on how tables are structured and the page codes for tables and how these affect coding¬† … blah blah etc. We will just cover the basic of why not to use tables and to use divs and css!

Why you shouldn’t use Tables?

Ok Ive just made a website using tables. I take a look in FireFox and its all fine, I take a look in Internet Explorer and its completley changed! And distorted.Well how do you sort this? You can’t, or even if you manage to do it will really annoy you and test you to your witts. The table method will be compatiable and fine in one browser and totally the opposite in the next. Again antother reason not to use tables to create websites!

As this method isn’t meant to be used to create sites. ‘Back in the day’ When browsers such as Netscape and the early versions of Internet Explorer were used it was fine. But as browsers increase in capability and increase in performance due to user demands so has the views changed configuring to each web page.

Another downside of using tables is that they are complex to handle and use. It can be very hard to resize tables, move them, delete them and add content.

Divs and CSS

Divs and CSS are the correct method. Divs are used as ‘containers’ to contain images/content/information on a webpage. By using Divs and CSS you are ‘controlling’ your webpage and design you know where each element of your website will go and how it will look across multiple browsers. So there is no need for re-adjusting!

Why use Div tags and CSS

As we’ve stressed again and again Divs and CSS are a way to control the way your elements of a webpage are controlled and look across multiple browsers and screens. Another reason to use Divs and CSS is it may help the visiually impared who can find it difficult to view websites, the ordered divs and correctly labelled divs can easily guide them around the site and they will have ease in navigating.

Another great reason to use CSS is that it can reduce the amount of coding needed for making a website, the outcome of this … A neat and proffesional looking site!

One of our favourite uses of CSS are ‘rules’ I.e. you can create a certain rule for ‘all titles on the page to be bold and large sized and green coloured’ so if we apply this rule, this will be automatically applied where we want it. Doesn’t that make life easier!

Another advantage of CSS is that you can control every design aspect of your website from the head code to the colour of the background/foreground etc. the ‘.css’ (see figure 2 for a example) file allows you to control these elements of your website.

We all know that CSS is the way forward and it will grow and expand making life easier for designers everywhere!

Final Verdict

So … If you’re still not making websites proffesionally and you’re not a designer then there is no reason why you shouldn’t carry on using tables! If website creation is a hobby or a one-off thing you do yourself then take the easier way and use tables.
If you’re a designer then thats a different story! Aswell as providing ease of use and more control and looking more proffesional and being more effeicent (phew!!) CSS is the way forward. Tables aren’t ment to be used anymore in the design industry, aswell as CSS benefiting you more it is also now more widley used.

So if you are a designer and have been using tables till date we suggest you get to know your best chum for your future! CSS! it will stick with you and you will need it. Honestly CSS isn’t that hard to learn if you’re completley new at it, all you have to learn is a set sequence which you must revise and repeat this proccess when creating a website. Once you get the hang of it, it will be automatic.

We hope that this article has provided some good information to you and is useful. Be sure to read our other articles, guides and written tutorials. Lots more coming soon!

Please note this article has been written to custom web-tag and its readers. This article is completley original and cannot be redistributed without permission. Copyright WebTag 2009.

Leave a Reply

You must be logged in to post a comment.