Question concerning CSS Tables

[Matt]

I’ve been relying on css float: elements for a looong time to do whatever I need. I’ve been working out quirks behind other browsers, which implies IE<insert number here>. Though, I’ve been thinking, why aren’t css tables used more in design? They’re fully accessible, since your HTML markup doesn’t affect the positioning. It ends the need for all these hacks like clearing floats after a margin collapses. If not the best advantage, it makes it easier for newbies to become accommodated to CSS. CSS is easy to learn, to a degree, until those quirks hit. When I was a newbie (should say "while I am still a"), this would (does) infinitely frustrate me.

While I agree that there’s no need to go overboard with CSS-Tables, it is absolutely the way of the future for CSS-Layouts. IE8 supports it, Firefox has supported it since 1.5 (albeit with some bugs, one being reported in 2002 but just fixed this year, and still not committed to an outstanding release), Safari since 2.1 (methinks), and Opera for some time now.

As for older web-browsers, I still have a long-standing philosophy that, as a web-user, it’s my job to keep MY software up-to-date. Failure to do so, and failure to see web pages correctly, is my fault, and my fault only. As for businesses, that’s why conditional style-sheets were born. IE is really the only web-browser that needs them anyways. As for the screen-reader crowd. Even if they use older web-browsers that don’t support css-tables, screen readers mostly ignore stylesheets anyways. They only read the markup. Since the tables are defined as a style instead of markup, the markup still flows, and the stylesheets are ignored.

The reasons above are also why I recommend new users to use CSS Frameworks instead of css-tables or floating methods. Floating methods will exist, but they will go the way of HTML tables in the future anyways. Might as well have the users learn something close to what the de-facto will be in the upcoming future instead of something that will frustrate them, possibly turn them away from design, and/or learn something that is reaching obsolescence.

Biggest question is, why hasn’t this become more popular in the past years?

[Rob MacKay]

"Matt" wrote:

Biggest question is, why hasn’t this become more popular in the past years?

Basically – because you might as well just use a table – it’s 100% compatible, where as using the CSS can be, as you stated, a little dodgy. So then if you need to arrange data, tables work fine – the only issue with tables is when you use them for site structure.

[Dominic]

To clarify, css-tables in this discussion refers to using css properties like display: table; and display: table-cell; on divs, correct?

To be honest, I don’t see a problem with css-tables apart from cases when it adds a lot of extra markup.

The single reason I don’t use it, is because I have a lot more control with floats.

[Matt]

"Robskiwarrior" wrote:

Basically – because you might as well just use a table – it’s 100% compatible, where as using the CSS can be, as you stated, a little dodgy. So then if you need to arrange data, tables work fine – the only issue with tables is when you use them for site structure.

The point here is that through the use of CSS-Tables, it’s possible to create a table-oriented site without screwing over accessibility. Instead of flooding the style-sheets with unused grid-selectors, like what is present with current frameworks (though, debatable), you could do the same with much less definitions using css-tables. CSS Tables make the content act like tables, without skewing the markup to make it actual tables.

EDIT
Better rule:
For structure: CSS Tables
For Tabular Data: HTML Tables; CSS Tables just don’t have the complete feature-set available to displace HTML tables. Besides that, it’s better to use HTML Tables for tabular data for accessibility and SEO reasons.

[Rob MacKay]

I just agree with Eric…

https://css-tricks.com/css-tables-are-not-a-solution/

[Author]

Posts