The buzz about using CSS for display:table
grid layouts that has waited years (years!) for the upcoming release of IE8 continues to grow.
Vitamin published Tables; The Next Evolution in CSS Layout by Kevin Yank. Kevin is co-author of the new book Everything You Know About CSS is Wrong!, which I reviewed a few days ago. Kevin says:
CSS actually includes a feature that works just like HTML tables: CSS tables. Using the CSS display property, you can instruct the browser to format any HTML element as if it were a table. For visual display purposes the element behaves like a table, but the element retains its non-table semantics for screen readers and other tools that look at the HTML markup.
Digital Web Magazine published a recent piece by Rachel Andrew, the book’s other author, called Everything You Know about CSS is Wrong!
The two articles have different information and different code examples, so read them both. Also, read my review: Review: Everything You Know about CSS is Wrong!
These two are doing a great job of promoting their book, and don’t need my help. However, from my perspective it looks like they were at the right place at the right time with the right idea. Whether that was genius, good timing, or just good luck—it doesn’t matter. They hit the bull’s eye with this book and deserve the excitement they have coming their way.
I’m more excited about support for display: inline-block, especially since it’s finally in Firefox 3.
After all, you can always give IE a real table if table layout is essential. There’s no substitute for inline-block as far as I know.
David, CSS display:table properties aren’t real tables. CSS layout tables are not a substitute for an HTML data table. CSS layout tables are just presentation (CSS). There’s no semantic HTML making it a table of rows and columns at all.
We need to find something to call it that doesn’t involve the word ‘table.’ Grid might be better except CSS3 has another property called grid. Got any good ideas?
Yeah, inline-block is pretty handy, for sure.