Why is using DIVs or spans tags "better" than using a table layout? [duplicate]

This question already has answers here: Closed 11 years ago.

Possible Duplicate:

Why not use tables for layout in HTML?

Why is using markup with divs defining everything (container, header, content, etc) BETTER than using tables? I understand that when you build your page using tables it: look ugly as hell, look even UGLIER when nested, because of the higher volume of bullshit - slightly higher page load time, and less readable code.

BUT. Using tables is so easy and saves SO much time in trying to accomplish what would seem to be an easy thing, but with the caveat of making it work across all browsers.

What I'm asking is, wouldn't a somewhat complex layout (or any layout that wouldn't normally be easy to accomplish with just divs and css) be best solved with a mix of t开发者_StackOverflow中文版ables and css with some divs wrapping needed elements (to deal with the nestedness) so you can rapidly develop your application and NOT worry about it looking like crap on unsupported browsers ?

* !EDIT! * I also agree completely that yes, tables are for tabular data, and just on semantics I feel I should be using do-nothing tags, then naming them and styling them, but for ME, I swear so many times to quickly just build something fast, using tables BEATS trying to style it perfectly to work on ALL browsers.

---

It's mostly about the semantics, I think. A <table> is built to represent tabular data, and using it to lay out elements violates that. Also, anything that can be done with <table> can be done just as easily or easier with CSS 99.9% of the time. It's not that much easier in the other cases, and like you say, it makes markup ugly and hard to follow. It also violates the separation of content, behaviour, and presentation fundamental to web development.

---

Best answer I can give is that a browser does not know how wide a table column has to be until it completely processes the page, which can result in a marked delay in the page visibly loading. By using a div the content will display immediately and if another element forces it to resize, it will, but there is no lag in things being displayed. So it's a better user experience.

---

Use tables when the need arises for them. When data needs to be neat, clean, and in a specific order that repeats. You should not avoid tables just for the sake of it.

---

Its just correct HTML semantics to use DIVs and SPANs for laying out a page and using TABs to represent tabular data, as in datasheets, user lists etc... Plus DIVs allow more flexibility with placement and styling

---

There are some advantages that you can't achieve using tables. Think about thumbnails - you can show as many as possible in one row, if there's no more space the others will break to the next line (on the fly).

See also:

http://www.csszengarden.com/ -> and choose a different design in the "choose a design" sidebar

Or a better approach for menus/navigation bars: http://css.maxdesign.com.au/listamatic/

---

One good reason is separation of concerns. HTML is for expressing information. CSS is for dealing with presentation and JavaScript is for behaviour. By seperating these concerns the content can be better interpreted as a the markup says - namely that a table is expressing tabular data, where as divs and spans are expressing a block of content and a span of text.

If you want some more good reasons:

• Disabled users who use software such as a screen reader can understand you content better. Otherwise, your whole page could be interpreted as tabular data. You'll make it more accessible by using divs and spans.
• Browsers may be able to render your page faster.
• Making adjustments can be a lot easier.
• It's easier to be consistent throughout your website.

---

People hate tables because it decreases SEO (Search Engine Optimization).

Mostly, it's an issue of semantics. A table is meant to display tabular data - data that needs to be laid out in a tabular format. Using it for anything else is like using Excel to format your Brochure - there might be the odd time it works, but really, use Word. Newer HTML5 elements, as well as some of the older HTML4 elements are just better semantically suited to the occasion - a division of content calls for a div, a section for a section, an article for an article, navigation for nav. Other elements beside tables also do allow for greater flexibility and can be even easier than tables when rightly used. Ultimately, it comes down to practicability. If it's somewhat tabular dataish in nature, use a table. But if it's columns, or navigation - use li or floated divs or sections.

EDIT: Compare the HTML required for two identical situations, btw: http://jsfiddle.net/gbXFG/3/ vs. http://jsfiddle.net/uJ2LG/