Table vs CSS Layout

Table Layouts Compared to Div Tag Layouts


One crucial decision in the layout of a web design must be answered before the first character of code is written. The decision to use a Table based layout or to use Div tags in the creation of your site must be addressed beforehand in order to choose which method will work best for your site. Knowing the advantages and disadvantages of each will help in making that decision.

Table layouts first began appearing when a Web browser called Mosaic was created in 1993 (Wroblewski 7). This is when websites started springing up like weeds in a garden which helped the Internet rise in popularity and become a resource that was used by people other than scientists. Before that time, scientists used the Internet to help share only text data amongst each other. Data is best displayed with the use of tables so this is how they eventually made their way to web layouts. Once the Universities and the general public started using the Internet, websites were created using table layouts since it was the common method used by the scientists before them.

Div tags were accepted by the World Wide Consortium (W3C) in January of 1997 with the release of HTML 3.2 (Raggett). The need for creators of websites to have more control and flexibility of how their pages looked when displayed in web browsers was the driving force behind Cascading Style Sheets. Div tags were used in unison with the Cascading Style Sheets (CSS) to provide a new method for creating web layouts.

Now that you have a better understanding of how Table layouts and Div tag layouts first came about, it is time to start comparing the disadvantages and advantages of each.

One disadvantage of using tables for web layouts is the amount of code it takes to create them. In this day in time, people want to quickly navigate websites and have them load at the speed of light. Extra code can weigh down the site and cause it to run slower. If your website is about creating conversions, this may be a deterrent and send users to another site that will allow them to get what they want faster.

Another disadvantage of table based layouts is they can require a significant amount of time to make modifications site wide. Given that you have to specify the width and height for the tables individually, you would have to go into each and every page to change those values. Depending on the size of the site; this could take a matter of minutes, hours, or even days to complete.

Disadvantages of Div tags are harder to find, but there are a couple worth mentioning. They require some working knowledge of CSS in order to style them properly. Since this is the case, some older Web browsers do not display pages designed with Div tags properly because these earlier browsers do not work well with CSS. Still today, web designers have to provide fixes for older browsers in order for their pages to display as intended. These fixes are primarily geared towards Internet Explorer.

As mentioned above, working knowledge of CSS is vital to using Div tags. This requires you to learn another language so to speak. Though CSS is considered to be a less complex language than some other coding languages, it still requires time to learn it. This time it takes for you to learn CSS will vary depending upon your experience with coding. For most, it is a quick learning curve.

Tables do have their place among web designs and have advantages over Div tags in certain situations. One situation where tables exceed is the displaying of data such as a calendar or a price list. To create something similar strictly using Div tags would be very time consuming and would require a significant amount of code. A table makes quick work of these two examples.

Another advantage of using Tables instead of Div tags for layout is that some designers find the concept easier to grasp than the use of Div tags. It requires little or no knowledge of CSS and most HTML editors have tools which make creating tables simple and fast. Given how there are some free and inexpensive editors on the market, this can be appealing to designers just starting out or for those who are creating a site for themselves.

Div tags are considered the standard method for creating web design layouts by most web designers due to the advantages the Div tags bring to the table. One advantage which we listed as a possible disadvantage above is the fact they work hand in hand with CSS. CSS allows designers to change the entire look of a site with the use of one or more external style sheets. This means designers can make a single change to the CSS and it will modify the entire website.

The use of Div tags in combination with an external CSS creates smaller sized web pages which results in faster load times when compared to table based layouts. This can mean the difference between a user staying or leaving your website you have created.

Given the advantages and disadvantages of Table based layouts and Div tag layouts, you have to decide on which method is best for you. Tables do have their place in web design, but most web designs today are created with Div tags and this is a good choice when in doubt.

Sources:

Raggett, Dave. “HTML 3.2 Reference Specification.” W3C. W3C, 14 Jan. 1997. Web. 9 Mar. 2010.

Wroblewski, Luke. Site-Seeing: A Visual Approach to Web Usability. New York: Hungry Minds, 2002. Print.


7 Comments


  1. Samantha
    Apr 05, 2010

    thanks for comparing Table Layouts and Div Tag Layout as well as discussing the advantages and disadvantages of it!


  2. saurabh
    Mar 23, 2011

    True, div tag is a specially in tools like Dreamweaver, i believe using frames is better than table and div tag or at least apdiv tag is the best


    • Ken
      Apr 04, 2011

      I’m not sure how Dreamweaver factors into this but Divs are great regardless of what code editor a designer is using. I would have to disagree on the use of iframes though. I would personally use tables before I would use iframes.


  3. Emelie Anggoy
    Nov 30, 2011

    Thank for the information about when to use div and table tags. Helps a lot.


  4. alexander
    Feb 03, 2012

    Yes that is so correct – before I started using divs I never wanted to use them because of the extra CSS needed and also divs are tricky for beginners with positioning objects and then understanding the z-index property. After grasping that concept, I find it so easy to make my web page layout same as the PSD I have designed because the concept seems the same as working with Photoshop layers i.e you can place objects where you want and pile them in the order you want – hiding one behind the other, reducing opacity etc! Tables can not do that, I dont feel like using tables anymore after discovering the flexibility divs so provide except for tabular content like rates, prices, results etc


  5. Raj
    Jul 18, 2012

    Nice Articles for web designer and developer and very helpful for interview candidate, who are goint to prepare for job for web designer / ui developer……thanks


  6. Hafiz Faraz Mukhtar
    Jul 26, 2012

    Yes indeed DIV tags are more powerful than tables when it comes to page loading time. Thanks for information.

Leave a Reply