difference between<table> and <div>

[aqeel]

What are the major differences between <table> and <div> and which when is better to use.

[Nile]

Div's aren't aligned, you need to align them in the right place. Tables act like the kind of table you fill out when your signing up for something... Or like in word when you go: Insert->Table. Tables are better for INFORMATION. Divs are better for LAYOUTS.

[djr33]

divs are page sections. tables are information display charts.

[ericwilliams10]

If we talk from SEO point of view then DIV based structure is better than table based structure. There is a logical reason behind this. DIV based structure will reduce the length of code with compare to table based structure. So it'll be easy for search engine spiders to crawl website in a more faster way.

[boogyman]

If we talk from SEO point of view then DIV based structure is better than table based structure. There is a logical reason behind this. DIV based structure will reduce the length of code with compare to table based structure. So it'll be easy for search engine spiders to crawl website in a more faster way.

The length of the website is not factored into the crawl, however search engines may get confused when tried to navigated nested tables.

For more information please review one if not all of the following links http://wsc.opera.com/ , www.htmlhelp.com/ , http://css-discuss.incutio.com/ , www.brainjar.com/ , www.htmldog.com/ , http://css.maxdesign.com.au/, http://howtocreate.co.uk

[ericwilliams10]

I'm not agree with you. Using a DIV based structure will definitely reduce the length of code and that will become an easier task for search engine spiders to crawl the website rather than crawling a website using table based structure.

If we design website using table structure then code will be lengthy and it'll become tedious job for search engine spiders to crawl a lengthy code.

[traq]

it's the complexity and predictability of the site's layout that matters, not the length of its markup (as long as its not broken). Search engine spiders don't mind tedious jobs, but they only follow stuff as long as it makes sense to them. for example, you could have a menu with a layout like this:

| home | contact |
| mark | jason |

"home" goes to the home page
"contact" goes to a contact page
"mark" and "jason" go to profile pages.

You could make this look exactly the same to the user using either divs or a table.

If you used divs, a spider wouldn't have a problem either, as each div (and its content) is separate.

HOWEVER, if they were in a table, then the spider would expect the "jason" page to be about how to contact jason, when in reality, it may have no contact info at all. The spider would conclude that your site has no substantial content and/or hasn't been updated recently (the menu's out of date), and your ranking would suffer as a result.

[auntnini]

Ahem! Are we mixing it up here?

I can understand how <TABLE> clutter can obscure content from robotic search-engine crawlers, but is download time really a primary factor in how subjects are indexed?

Search engine robots look for key words / phrases in Web-site pages' title, meta tag description, meta tag keywords, page content, etc. (see http://websearch.about.com/od/beginnersguidetoseo/a/tenstepsseo.htm for tips) to index subjects. "Accessibility" (as in http://www.w3.org/WAI/intro/accessibility.php) deals with human factor of handicapped individuals (for instance, visually impaired people using screen readers).

The use of HTML <TABLE> element for Web page layouts (especially when nested) added irrelevant clutter and made content inaccessible for some people with disabilities.

Tad-ah-ah! Separate content from presentation! Enter CSS (Cascading Style Sheets) to the rescue to embellish presentation of HTML content without clutter of <TABLE><TR><TD>content</TD></TR></TABLE>to display something. The CSS <DIV> is an all-purpose, ubiquitous block-level container that can be styled with "class" or "id" specifications to position content. <SPAN> is an all-purpose CSS inline container. Current Web-standards discourage use of <TABLE> element for layouts or non-tabular data.

See for example, http://webdocdo.tripod.com/demo/wsdds.html (wherein I tried to convert my dentist) and then view his page source at http://www.wsdds.com to see all the useless garbage a screen-reader has to wade through.

[traq]

...I can understand how <TABLE> clutter can obscure content from robotic search-engine crawlers, but is download time really a primary factor in how subjects are indexed?
no. (especially considering how minuscule the time difference is, in this case.) that was my point.


The use of HTML <TABLE> element for Web page layouts (especially when nested) added irrelevant clutter and made content inaccessible for some people with disabilities. [...] The CSS <DIV> is an all-purpose, ubiquitous block-level container that can be styled with "class" or "id" specifications to position content. <SPAN> is an all-purpose CSS inline container. Current Web-standards discourage use of <TABLE> element for layouts or non-tabular data.
I think we've got it covered then, unless the OP has any further questions.

[auntnini]

The CSS <DIV> ...*

That's poorly stated; I should be corrected: HTML <elements> are the bases of a document's structure. <DIV> and <SPAN> (like <TABLE>) are HTML elements (maybe added, because of their innocuous nature, so styling for logical divisions or sections of content could be designated with CSS rules).

According to http://www.alistapart.com/articles/previewofhtml5: "The [html4] div element can be replaced with the new[html5] elements: header, nav, section, article, aside, and footer." Thus we'll no longer have to include "id" or "class" style specs in divs like now -- <div ID="footer">

The goal is to have clean, simple, minimal, logical markup -- which can be best achieved using CSS in an external, linked document. The multi-layered <TABLE> element was not intended for layout purposes. I go bonkers when seeing <DIV>s added to table cells for styling. CSS-advocate Jeffrey Zeldman's "Designing with Web Standards" 1st ed. featured ways to enhance <TABLE> layouts with CSS "id" and "class" specs applied to cells.

[gul]

HI

I have designed a page with div, now i need to put some text in this page that can be easily managed in table, can i add a table inside a div or i have to design whole page with table?
I m using 1024px of widh but the page is scrolling on monitor from left / right what should be the size to maintain the screen without scrolling???

[gul]

I have designed a site on div, now i want to add a page with table, Can i insert a table in a Div or i have to design a seperate page with table?

[BLiZZaRD]

You can insert a table inside a div. Make sure you declare the table properties correctly in the CSS to achieve the look you are after.

[gul]

hi

i have designed asite on div , can i insert table inside a div or i have to create a new page for tabular data

should i give table id as i define div in css

As i have created one css for whole site containing three pages with same div , but now i need a 4th page that should contain a table inside a div.
for this purpose , shall i create a new css with table info or i will add in same style sheet that is attached

[BLiZZaRD]

Add it to the same sheet. Unless you want multiple smaller css files. But adding css directions for ul and li, won't take up that much space.

[Kate29]

Regarding SEO view point, div based structure is better than table based structure to use. But it's your choice.