Div Vs Table Advantages of Using Div than a Table

[tinoymalayil 0]

Hi All,What is actually the advantage of using div in html page than using table?..How the performance for the webpage with div is more than the page with the table.Would you please reply some web development standard and optimization techniques???RegardsTinoy Malayil

[Baniboy 3]

Well, it's not really the special advantages of DIV, but rather the disadvantages of tables. Having one (or possibly two) layers of tables is still okay and doesn't result in much difference, but when some people have tables in tables in tables in tables and all that in another table... well, you get the idea. That slows the loading down because there are so many different tags. Another thing is that if you have even one table inside another table, it is more difficult (for me at least), to understand the code. You loose track of which row and which cell is in which cell and which row.

Regarding the user experience: tables don't usually become visible until all of the content in them (with the exception of images, I think) is loaded and interpreted. You can notice this if you for example visit Xisto homepage on a mobile phone which doesn't load the pages very fast. Wrapping the WHOLE page in a table tag will make it so that the visitor has no idea that the page is actually loading until it has loaded completely since there's no visible progress. This might then result in the potential visitor leaving because he thinks that the page isn't loading.
There are people who say that using tables results in huge files compared to divs. Through my own experience, I don't find this true. You don't reduce file size significantly by replacing every table cell with a div...

Anyway, regarding DIVs, I have seen people have divs in divs in divs in divs in divs in divs and so on... Even I do have that on my website (which is wrong by the way). Anyway, the main point is to keep the HTML as simple and plain as possible. Don't add elements you don't need. For example, if you are making a navigation bar, you don't have to wrap it in a div, you can simply set

ul { display:block; }

that will make the ul element act like a box element (a div) and you can avoid using a div there.

HTML should only contain the markup, not the styling. This makes editing easier in my opinion. Styling is done in CSS and when the CSS file is loaded for the first time, the browser automatically has all the styling information it needs for the future web pages of that website as well so it doesn't have to load the styling again when you navigate to another page. This reduces the bandwidth usage of both the visitor and the host, and also makes the browsing a little faster for the visitor if they choose to continue browsing that website.

Having a separate CSS file for styling also allows you to group styling logically for easier understanding. For example, you can group all typography-related things together and all background-related things together. What I like to do is to write out the styling for elements in their natural hierarchy in the HTML and I can simply search by order when I need something. Doing that also allows me to use less space as using two different place to declare background color and font size separately requires me to type the element selector twice.

You also say you want optimization techniques. I'm not sure which type of optimization you're talking about, but I have written an article on making your web pages run load faster, I don't know if that helps you at all, but I'm going to take advantage and shamelessly advertise. Link: How to make a web page load faster

What a good question to ask in this nearly deserted and spam-filled forum. I couldn't believe my eyes when I actually saw a topic I could reply to.

[tinoymalayil 0]

Well, it's not really the special advantages of DIV, but rather the disadvantages of tables. Having one (or possibly two) layers of tables is still okay and doesn't result in much difference, but when some people have tables in tables in tables in tables and all that in another table... well, you get the idea. That slows the loading down because there are so many different tags. Another thing is that if you have even one table inside another table, it is more difficult (for me at least), to understand the code. You loose track of which row and which cell is in which cell and which row.

 

Regarding the user experience: tables don't usually become visible until all of the content in them (with the exception of images, I think) is loaded and interpreted. You can notice this if you for example visit Xisto homepage on a mobile phone which doesn't load the pages very fast. Wrapping the WHOLE page in a table tag will make it so that the visitor has no idea that the page is actually loading until it has loaded completely since there's no visible progress. This might then result in the potential visitor leaving because he thinks that the page isn't loading.

There are people who say that using tables results in huge files compared to divs. Through my own experience, I don't find this true. You don't reduce file size significantly by replacing every table cell with a div...

 

Anyway, regarding DIVs, I have seen people have divs in divs in divs in divs in divs in divs and so on... Even I do have that on my website (which is wrong by the way). Anyway, the main point is to keep the HTML as simple and plain as possible. Don't add elements you don't need. For example, if you are making a navigation bar, you don't have to wrap it in a div, you can simply set

ul { display:block; }

that will make the ul element act like a box element (a div) and you can avoid using a div there.

 

HTML should only contain the markup, not the styling. This makes editing easier in my opinion. Styling is done in CSS and when the CSS file is loaded for the first time, the browser automatically has all the styling information it needs for the future web pages of that website as well so it doesn't have to load the styling again when you navigate to another page. This reduces the bandwidth usage of both the visitor and the host, and also makes the browsing a little faster for the visitor if they choose to continue browsing that website.

 

Having a separate CSS file for styling also allows you to group styling logically for easier understanding. For example, you can group all typography-related things together and all background-related things together. What I like to do is to write out the styling for elements in their natural hierarchy in the HTML and I can simply search by order when I need something. Doing that also allows me to use less space as using two different place to declare background color and font size separately requires me to type the element selector twice.

 

You also say you want optimization techniques. I'm not sure which type of optimization you're talking about, but I have written an article on making your web pages run load faster, I don't know if that helps you at all, but I'm going to take advantage and shamelessly advertise. Link: How to make a web page load faster

 

What a good question to ask in this nearly deserted and spam-filled forum. I couldn't believe my eyes when I actually saw a topic I could reply to.

 

Thank you for the information.Making web pages that run faster is the optimization technique i mean . Your article helps to notice things before developing web sites.

Thank you for the link.Could you please mention how the float and clear is using in css to make a table structure with div

 

Regards,

Tinoy Malayil

Edited April 15, 2011 by tinoymalayil (see edit history)

[Quatrux 4]

It's better to use div tags nowadays, but sometimes using tables for some logic in the design is a good idea too, due to how they work, a lot of current websites with new layouts are strict, I usually like fluid designs and the effect which works on all browsers can be done with a table tag, it doesn't mean you need to use only tables or only divs, but you can also use the table where you need to with divs for the code to take less bandwidth, load faster and be more readable, but as it's the year 2011, I started to not care about old browsers like IE6, even though the table effect for divs with CSS doesn't work right in IE too, I am talking about:display: table|table-cell|table-row and etc. which has the effect of an table..for most customers, it doesn't matter, they just see the design, not the source, I know some people who still use doctype html4 and has no problems, as they say xhtml is for a different purpose, but personally for me, xhtml is better for simple stuff too, due to it's more strict, even though I am not using in a site nothing associated with xpath and xml stuff, I still use xhtml doctype and try to use divs, but I use tables too not for table purpose, but for design purposes, so you can call it a hybrid?

[darko100 1]

I would suggest never using the tables. As seen on other sites: use the table when the data you will put is naturally in table , in list. Yeah , there is no point in making DIVs for lists or spreadsheets :)DIVs are flexible and you don't need to do hacks as with tables. With tables you must specify much more CSS stataments , sizing models , floatings etc. etc. which really suck. It is much more simple to maintain DIV, beleive me. You don't need any extra tags , and the document is much easier to understand , and not complex. border, width, cellpadding and cellspacing are also problem. Stupid tags which could be replaced by nice and simple css. When you make it all in all , tables will inherit some spacing value , you will add some CSS padding , some margin and everything will mess.If we talk about colspan and rowspan... Meh , it's much easier with DIV structures.Furthermore , the nested tables. And that is stupid. The table "trend" is over , but div "trend" is over too.HTML5 is now here , no DIV tags <article> <header> <footer> are here :)

[Baniboy 3]

Could you please mention how the float and clear is using in css to make a table structure with div

It's easy. The div you want to float should be first in the code. After that, you apply the property and value, like "float: left;".
The clear property (practically the only value used with it is "both") is used to tell that an object does not allow any floated elements on its sides. This is often used for the footer so it appears after all the other floated stuff in a layout.