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.
3
-
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_– onteria_2011-05-24 19:17:00 +00:00Commented May 24, 2011 at 19:17
-
2If it's a table of data you should use a table.leonbloy– leonbloy2011-05-24 19:18:33 +00:00Commented May 24, 2011 at 19:18
-
@bpeterson76: This has nothing to do with CSS3 in particular...BoltClock– BoltClock2012-11-08 17:19:37 +00:00Commented Nov 8, 2012 at 17:19
Add a comment
|
6 Answers
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.
1 Comment
Alex Feinman
You mean the one whose name sounds like a cry of pain? Rhymes with "Aieeee!"?
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.
10 Comments
May
Is there a good reason why I should use this instead of <table> ?
rid
@Monica, not really...
<table> 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.May
Sorry to keep on this topic but if <table> 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.
thirtydot
@rdineiu: IE7 was released in October 2006; that's ancient in the world of web browsers. But yes, it does still have some usage: gs.statcounter.com/#browser_version-ww-monthly-201004-201104 - around 8% worldwide.
thirtydot
@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. 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 |
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....
Comments
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
Comments
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.
Comments
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.
