TABLES VS DIV TAGS: WHAT'S THE DIFFERENCE? WHICH IS BETTER?

Jump into CSS with both feet and don't look back.

Tables were never meant for layout, that's just the way Web sites were developed from the start because they could control layout easier than early CSS and early browsers were VERY hard to make CSS work in.

Building sites using CSS over tables has many advantages:

1. Easy to make sitewide positional and styling changes in one file instead of making a change on 1000 different pages using tables, for example.
2. Reduces the amount of code used to display a page, improving load times, reducing bandwidth, costing you less money (you are allowed specific amounts of bandwidth in your hosting package).
3. CSS helps sites work across many different mediums such as PDAs, Web browsers, and mobile phones.
4. You can easily switch layouts (as described earlier).
5. Future editions of Web browsers will support CSS standards changes.
6. Search engine spiders can get through your site from your CSS text-based navigation.

While you are at it, build your sites using Server-side Includes as well so you can make content changes in one place (the include file) and layout changes in one place (the style sheet).

Lastly, yes, use tables to tabular data.

Hope that helps.

Over the last several years, developers have moved from table-based website structures to div-based structures. Do developers know the reasons for moving to div-based structures?

However, it's a matter of personal preference. That doesn't mean there's anything wrong at all with making a different choice.

Difference Between <Div> tag and <Table> tag

In my opinion, Div tag has a lot of advantage compare to table in terms of page loading speed, crawling your page and SEO friendly. However, tables will make object appear aligned the same in all browsers.

Advantages of Using the <Div> Tag

1.Easily to maintain and organize the site.
2.Webpage with Div tag tends to load faster than table mainly because of less code.
3.It will decrease the code and code to content ratio decreases, Thus, the content is found more easily to bots.

Advantages of <Div> Tag from SEO perspective

Using Div tag is very good for SEO because while you use Tableless layout then you are separating structural and presentational (html and CSS).

As you can see from the above example, the table-based structure contains more code than the div-based structure by a ratio as much as 2:1.

Another drawback to tables is that they make it harder to separate content from design. The border, width, cellpadding and cellspacing tags are used in about 90% of all websites that use tables. This adds code to the HTML that should instead go in the CSS.

More lines of code will slow down the development andraises maintenance costs. There's a limit to how many lines of code a programmer can produce per day, and excess code ismore complicated for others to understand.

Besides, more lines of code mean larger file sizes, which mean longer download times. A large code base probably hasmore bugs.

Disadvantages of Using the <Div> Tag

Using a div for structure can make a page more fragile when content is pushing the DIV to its limit. It can also force columns to fall under each other. But this is usually only happen for older browsers like IE6, I often encounter this issue when changing the whole web layout for my company site.