I've used tables but never used the CSS way of doing things. Now I have a table of data with 3 rows and 2 columns. Can someone please explain how I can do this with CSS DIVs and also most important is I would like to know if CSS is the way to do this and what are the limitations.
Asked
Active
Viewed 606 times
7
-
6If it's a table of data you can still use a table. The anti-table argument is more for using tables to do layouts. – onteria_ May 24 '11 at 19:17
-
2If it's a table of data you _should_ use a table. – leonbloy May 24 '11 at 19:18
-
@bpeterson76: This has nothing to do with CSS3 in particular... – BoltClock Nov 08 '12 at 17:19
6 Answers
5
Beware of display: table-cell. It doesn't work on the anti-browser (the "browser" whose name must not be spoken).
Also, if you have table data, use tables. Use other tags when they make sense semantically (such as <p> for paragraph, <ol> for ordered lists, etc...), or <div>s for layout.
rid
- 61,078
- 31
- 152
- 193
-
3You mean the one whose name sounds like a cry of pain? Rhymes with "Aieeee!"? – Alex Feinman May 24 '11 at 19:21
4
If it's a table of data, then the best (and most semantic) choice is to just stick with a good old <table>.
The support for display: table-cell is good, see: http://caniuse.com/#search=table
It will work in all modern browsers, and IE8+.
It won't work in IE7, which is a limiting factor for some people.
thirtydot
- 224,678
- 48
- 389
- 349
-
-
@Monica, not really... `
` is the way to go for tabular data. That's its intended semantic purpose, it's what it was created for. People started misusing it though for layout, because there was nothing better available. It should be used for data, not for layout.
– rid May 24 '11 at 19:29 -
Sorry to keep on this topic but if
is so good then why is there the display: table-cell markup. Just asking in case there's some advantage in using it for something else.
– May May 24 '11 at 19:30 -
@rdineiu: IE7 was released in October 2006; that's *ancient* in the world of web browsers. But yes, it does still have some usage: http://gs.statcounter.com/#browser_version-ww-monthly-201004-201104 - around 8% worldwide. – thirtydot May 24 '11 at 19:31
-
@Monica K: `display: table-cell` is for all the times when you want the *behaviour* of a `table`, but without [the huge array of downsides](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html). Here's a concrete example of when `display: table-cell` is useful: [http://stackoverflow.com/questions/5858108/how-to-make-children-auto-fit-parents-width-only-with-css/5862782#5862782](http://stackoverflow.com/questions/5858108/how-to-make-children-auto-fit-parents-width-only-with-css/5862782#5862782) – thirtydot May 24 '11 at 19:33
-
`table-cell` is the default `display` value for the cells of a table. `
`s and ` `s have the `display` value of `table-cell`, not `inline` or `block`. They're somewhat special. I don't think W3 intended this `display` value to be used for anything else. – rid May 24 '11 at 19:35 -
@rdineiu: That last comment of yours is incorrect in a few ways. **1.** `table` has a default of `display: table`, `tr` has a default of `display: table-row`; only `td` has a default of `display: table-cell`. **2.** the W3 don't "intend" `table-cell` to *only* be used for `table`s. [The spec merely says](http://www.w3.org/TR/CSS2/visuren.html#propdef-display) `table, .., table-row, .., table-cell - These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).` – thirtydot May 24 '11 at 19:40
-
@thirtydot, that's just what I said... `
` and ` ` have the default `display` set to `table-cell`. Check out the [default stylesheet](http://www.w3.org/TR/CSS2/sample.html) from W3. And yes, they don't "intend" anything, it's a spec after all... – rid May 24 '11 at 19:44 -
@rdineiu: You're right, you did say `td` and `th`. I read it as `td` and `tr`, so sorry about that; I read your comment too fast. – thirtydot May 24 '11 at 19:46
-
display table is useful for vertically positioning content in the middle – David Nguyen May 24 '11 at 20:58
3
Besides being semantic, the use of Tables for tabular data also gives much better support for Screen Reader software. If you don't write code that can be read easily by screen readers, you're effectively blocking usability by disabled people.
Just for fun, try your CSS method. Get a copy of the Webmaster Toolbar plug-in for Firefox and use it to toggle CSS off. Now, was that worth it? Imagine a screenreader trying to make heads or tails of that mess....
bpeterson76
- 12,918
- 5
- 49
- 82
1
2 things:
display: table-cell isn't new, it was in CSS 2
display: table-cell should not be used for anything other than tr elements unless you love to track down browser-specific inconsistencies and bugs
I have a table of data
You are dealing with tabular data-- there is nothing wrong about using a table to do this. In fact, it would be the best practice and semantic way to marking up said data
colinross
- 2,075
- 13
- 10
0
Use tables to display tabular data.
However, for any other type of layout not having to do with tabular data, you should really use div's.
DemitryT
- 391
- 4
- 17
0
It really depends on what you are trying to do, if it's just the design of a webpage then use floating divs, if it's tabular data then definitely use tables, it's what they were built for.
triangulito
- 202
- 2
- 16