Replacing <table> with <div class="table">, <tr> with <div class="row"> and <td> with <div class="cell"> adds no value as far as I can tell. In any case, that's not what "don't use tables for layout" means. Which poor soul has misunderstood it that much?

@delnan - The makers of Twitter Bootstrap for example?

But modifying a "faux-table" layout is just as hard, and for the same reasons No, it isn't. It's quite easy to override your css and change your "faux-table" to whatever.

possible duplicate of Why do we have to use divs?

I think this is a fundamentally different question than the one linked above as a possible duplicate. That one asks about semantic markup and div being too generic, this one asks about why we use divs in grid layouts as opposed to the table element.

@YannisRizos - Oh yes, you can easily override CSS and get... what? If you want anything serious, you'll need to change the HTML anyway. Especially your faux-table, which has pretty much defined where things are in relation to each other. CSS cannot change that. I've done quite a few makeovers and no matter how "clean" the HTML had been, changes to it were always proportional to the overall amount of change.

There is also one important thing that hasn't been mentioned in the answer of JacquesB - animation. Animating the table cells is practically impossible / or is very difficult. While this is not a common thing to do, sometimes it does occur, there is another reason.

@Fygo - If you do display:table-cell, you've got the same limitations.

@Vilx-You don't need to have that on every cell. Of course if you set that on every single cell, then your point is valid.

@Fygo - What I'm trying to argue here is that whenever you use display:table (or table-cell, etc), a real <table> would be better, because it's easier to read and understand. I'm not trying to say that you should use a <table> for everything. On the contrary, they should be used only when necessary, and most layout can indeed be done without them. But when you do need them to lay something out the right way...

@Vilx-Sorry, maybe I just misinterpreted the question. I agree with you there - if it is semantically a table, it should stay a table. I see no reason to be screwing with CSS in that case. You are referring to bootstrap - which part of it is it?

Bootstrap doesn't advocate replacing table with div for tabular content. They provide styling specifically for tables if that's what you want.

@EricKing - I do not advocate it either. I advocate the opposite - using a <table> for non-tabular data where you would otherwise use display:table. Or, rather, I want to understand why it's such a sin when it seems to me to have more benefits than drawbacks.

Honestly, I've never seen an example of what you're describing. I don't recall ever seeing a css-layout library advocate using display:table, nor have I ever heard a front-end designer advocate its use over table. It seems hard for me to believe that this is a common occurrence at all. How often would you say you see it?

@Vilx- do you have an actual example of display:table being used for tabular data?

@HorusKol - Once more, this is about nontabular data. This is about using <table> for layouts. If it's tabular data, then there is no doubt. But for nontabular data, why should I jump through hoops and use display:table, when a simple <table> would work exactly the same?

Bootstrap has been mentioned a few times and one of the answers has a media query. Responsive design often uses the table-row-col metaphor. Can a table element divide itself into two tables when the screen width drops below a certain value?

@Cerad - Yes, HorusKol's answer already mentioned this and I concede - this is a valid use-case for display:table. Nevertheless, I don't think that CSS can "split a table in two tables", because that would require a change in container elements. But there are plenty of other useful things that can be done.

@delnan it adds value if they are semantically correct, though by the same token it removes value if they are semantically incorrect.

@JonHanna - how? Why should I care about semantics of <table> vs <div>, if I don't need a responsive layout?

@Vilx what does responsiveness have to do with it?

I find it funny that this question still pops up, year after year, with the same arguments on both sides of the issue. See this SO question as an example. It was eventually closed as 'Not Constructive', basically for thrashing just like this question is doing.

probably because someone told them "don't use tables"