Are tables replaced by DIVs? [duplicate]

Question

Possible Duplicate:
Why not use tables for layout in HTML?

I know everyone is all about DIV's and css and against tables now days, I have always used tables because they are so easy for me to visually see what I am doing while building, I am just now ventruing into the DIV world.

So my question are tables completely replaced by div's generally? I notice on the source of stackoverflow it is mostly DIV's but still uses tables as well, so I am guessing that tables must be used sometimes?

Below is an image of something I am trying to accomplish, most of it is coded but some of it is added in on photoshop, so far I have it all done in div's however what I have is only the background cells which are a list item and the photos, what I am missing from my code is all the text areas and it would be super easy for me to position the text areas within a table cell but since like 80% of the object is done with just css and divs I am not sure if I should just try to finsih it with just div's or if a table inside the comment div's would be the way to go.

I noticed on this page that the ansers are a table inside of a DIV alt text http://img2.pict.com/e0/4e/de/1486585/0/screenshot2b15.png

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

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

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>