Friday, 13 April 2012

DIV vs TABLE tag: Which one to use?

<div> is the professional way of designing the webpage. It provides flexibility in web designing as you can make any kind of design using CSS. But the problem with CSS is that, its debugging is not easy and people find it hard to learn. That’s why they stick to <table>.<table> is easier to learn and implement as you have to only figure out the layout of rows and cells.

Tables were originally meant for tabular data like displaying a grid etc. Soon the developers realized that tables can also be used to format other data by setting border="0" and hiding the borders.

One limitation with using table is that, if whole page is designed under a single table, the page will not load until whole table is rendered by browser and the situation becomes worst when you use nested tables but same is not with using div.

Second limitation with table is SEO (Search Engine Optimization). Tables work fine for small web pages. But if the page contains a lot of data and sections, tables start nesting themselves and structure become creepy. SE spiders and bots when go on crawling the webpage, they find it difficult to pick actual content from that messy page and as a result indexing of that webpage is affected.

An analogy would be: I sometimes use a knife to open a screw (When I can't find a screwdriver). Knives were not built for this purpose but I can reach the ultimate goal of opening the screw. Now if I just put some effort in finding my screwdriver then opening the screw might be a little easier.

Browser Compatibility issue arises with both div and table. Mozilla and Chrome behaves same but IE6 (and above), Opera, Safari, Netscape may interpret CSS differently.

No comments:

Post a Comment