Table based layout or to use Div tags

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.