Are tables replaced by DIVs?

Answer 1

To be semantically correct, tables should only used for tabular data and not for laying out a page.

David Dorward brought something to my attention in a comment. According to the HTML 4.01 Specification's section on Tables in HTML Documents:

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

Answer 2

Tables are appropriate for tabular data, but divs + CSS is preferred for general page layout.

http://css-discuss.incutio.com/?page=TablesVsDivs has many good reasons why, as well as some counter arguments.

Answer 3

divs are used instead of tables in most of the sites. But you can use tables in some situations where design using div will be complicated in a cross browser way.

For eg vetical aligning contents inside div will be a big problem as compared to that in table cells.

In this page also you can find table tags being used.

Tables will only be rendered to the screen after all the cells are finished processing.

Take a look at the following questions also.

Why not use tables for layout in HTML?

DIV’s vs Tables or CSS vs. Being Stupid

Yet Another Divs vs Tables Question: Forms

Answer 4

See this question.

http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html

Answer 5

I think a lot of people will argue that "tabular" data, or data that can best be expressed in rows and columns, should be kept in a table, but that divs were invented to replace tables as large layout elements. In my personal opinion, tables were always used as layout elements in a way that went beyond their intended purpose. That's not to say that people don't still misuse divs, for example

<div align="center">To replace a <center> tag</div>

I'd say check out A List Apart, specifically Their section on layout for tips on how to use modern compliant css-based design.

edit : My point was that this is the INCORRECT use of a div tag. In this example, you would use a style such as "text-align:center" or apply that style to the tag itself, but in this case there is no reason to wrap your text in a block-level element, because text by default is inline, so you would be better off with something more like this...

<p class="center">This is a centered paragraph</p>

and then in your stylesheet

.center { text-align:center; }

Thus, the following:

<div>Monday | Tuesday | Wednesday | Thursday | Friday</div>
<div>Work | Work | Work | Work | Play</div>

May be compliant but it looks terrible, and you'd be better off doing :

<table>
<th>
  <td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td>
</th>
<tr>
  <td>Work</td><td>Work</td><td>Work</td><td>Work</td><td>Play</td>
</tr>
</table>

Answer 6

Like Korey and Thomas said, it's better to use table to represent tabular data.

If you want to make website layout in pure CSS, you can take a look on these CSS frameworks, which ease the task :

• http://elements.projectdesigns.org/
• http://960.gs/
• http://www.blueprintcss.org/
• http://elasticss.com/
• http://www.yaml.de/en/
• http://bluetrip.org/
• http://devkick.com/lab/tripoli/

There are a lot of css frameworks out these, just find the one which fit your needs..

Update : Here is a more complete list of css frameworks.

Answer 7

Tables should only be used for tabular data. To figure out if what I am dealing with is tabular I ask myself "would I put this in Excel or Word if it?"

Bill Merikallio & Adam Pratt wrote a funny and informative article Why tables for layout is stupid. They also detail where tables should be used and when.

Answer 8

Tables as means of describing the structure of tabular data have not been replaced.

Tables as means for describing presentation have been replaced, but not with divs. They have been replaced with stylesheets in associate with whatever element best describes the semantics of the content. A div has no semantics associated with it, so it is used if there is nothing better.

Answer 9

CSS is great and all, but I mainly use it for styling, not layout. I and countless other developers still use tables every day for building web pages, and will for the foreseeable future.

If you want to use absolute and relative positioning for layouts, go for it. If not, you are not evil or stupid for not doing so. The main thing to look out for when using tables is preventing table nesting hell IMO.

Answer 10

Theres a lot of fervent zealotry regarding this notion of semantic content, which is fine and all but the only problem is that it's hopelessly naive.

Fact: there are some things that can be done trivially with tables that either can't be done in "pure" CSS, are extremely difficult in "pure" CSS, have some nasty side effects in "pure" CSS or have serious cross-browser issues.

I did my CSS3 Wish List and in compiling that list I realized some things I've been able to do with tables since HTML 3.2 a decade ago I still can't do with divs.

I'm all for having a semantic layout. Nice ideal. But until it can do everything it's trying to replace then the thing it's trying to replace will have valid use cases.

Answer 11

It certainly depends. The Golden Rule you must remember is that the XHTML/HTML document file it's meant to describe content and flow.

Everything that is design should be (whenever it's possible, there are some certainly some case scenarios where we can't control it, like when CMS appear on the game) controlled using a CSS file.

Now, how can we reach the most semantically and pragmatical result? As with everything, it depends. Using XHTML/HTML tag elements instead on just relying on for correct content display it's the recommended way.

Notice that I've said tag elements. DIV is just one of them, but just replacing with whenever a or / tags exists is not enough. In fact, that will push you over "divitis" (the useless employ of divs for everything!) and WILL make your job hard. Try checking most tags and use them whenever seems correct.

Sometimes it's a pretty subjective matter as to what qualifies as a content or another tag. Just in this question someone asked if this content would be considered tabulated data (the one that tables are supposed to be used for), but I think that whatever content you must order and filter (and you can copy and paste on Excel without worries) it's worthy material.

Everythin else, it's mostly always just some interesting layout display that should be worked on with CSS and other tags.

Some people will say it's too much work and not worth it. I disagree. Though learning how to work with CSS/divs nuances it's somewhat different at first, you'll soon learn the twist of it.

Good luck and remember that we are always learning new stuff, so don't worry on question everything.

Answer 12

My recommendation would be to really learn HTML. Use the element that actually relates to the content. If it is a list of items, use one of the list tags. If it is data entry, use a fieldset tag. There aren't that many tags to chose from yet so many are neglected. If you simply replace all your table layout formatting with DIVs, your tag soup might be a little less chunky but you can still choke on it.

Answer 13

You should check Elastic CSS Framework you can layout an unlimited combination of columns very easily and position them with its helpers, check out the documentation.

cheers

Answer 14

In terms of performance side, table(s) will only get rendered once the end tag () is reached, so if it is a table contains 100s of rows, you will see that table appears in the browser little later. This is not true for DIVs.

Answer 15

I posted on meta-SO about their tables: http://meta.stackoverflow.com/questions/3110/when-did-so-start-using-tables-for-layout/3547#3547

In short, I think it's fine since it is tabular data.