Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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 tables 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.

like image 702
kogh Avatar asked May 25 '11 00:05

kogh


People also ask

Why divs are better than tables?

Using divs correctly #Because a div element marks up only one block at a time, the code base is much smaller than that of a table-based structure. Less code is code that is more readable, easier to maintain, faster to develop, less buggy, smaller in size, you get the point.

Which is much better DIV and SPAN or table?

Div tag is best when you compare in between Div and Table tag. Table tag can be used only for the content which should be in tabular form but Div tag can be used for any kind of content apart from table. As div tag can be used for everything like container, header, content, etc.

Are Divs better than tables?

TABLEs are the correct technology for tabular data. DIVs are the correct technology for page layout and defining objects on the page (along with other block-level objects, i.e. heading, paragraphs, ul tags etc.).

What is the use of span and div tags?

Span tags are used on small segments of text, links, images, and other HTML elements that appear inline with the surrounding content. To summarize, a div tag creates a block-level element while a <span> tag wraps around an inline element.


2 Answers

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.

like image 179
Ry- Avatar answered Sep 22 '22 17:09

Ry-


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.

like image 23
invertedSpear Avatar answered Sep 23 '22 17:09

invertedSpear