9 ms·

The Anti-hero of CSS Layout – “display:table”

130 points by p0larboy 12y ago

addict3d 12y ago
You can achieve the same results with absolute positioning, which I prefer.
- Sharlin 12y ago
  I'm pretty sure you can't, except in the trivial case of a table with absolute-sized everything, or alternatively by reimplementing the table algorithms in JS.
- bbx 12y ago
  Problem with absolute positioning is that you remove elements from the natural flow of the page, meaning that adjacent elements aren't aware of the dynamic height of a fixed footer for example.
igvadaimon 12y ago
What I didn't understand from this blog post is WHY display:table is really bad.
- pornel 12y ago
  It's not. That's the point. "Tables for layout are bad" applies only to use of <table> HTML markup for layout. `display:table` achieves the same layout, but without presentational markup and accessibility problems that html-tables-for-layout caused. If it was called "display:stretchy-box", nobody would mind.
  - Leszek 12y ago
    Or "display:flexible-box", maybe even shortening that somehow. Hmm.
    - wavefunction 12y ago
      A flex-box container is pretty different than a table. Flex-boxes have a major axis whereas tables are just rows and columns, as one specific difference.
      - Leszek 12y ago
        Yeah, fair point actually.
  - adamtj 12y ago
    Are html-tables bad even for their intended purpose of laying out tabular data?
    - jerf 12y ago
      No. And again, that's part of the point; "HTML table tags aren't good for layout" semantically collapsed[1] to "tables aren't good for layout" collapsed to "tables are bad" collapsed to "tables are EVIL". No, they aren't. The first collapse is easily explained by the fact that for a long time HTML table tags bidirectionally implied table layout (no way to have one without the other), but now that CSS has broken that in both directions it's not a valid simplification. (Less well known aspect of CSS table support, I'm pretty sure it's possible to take a series of HTML table elements and "undo" their tableness if you're feeling feisty. But it's a weird way to do things.) [1]: I seem to recall there's a term for what I'm reaching for. Much obliged if someone can remind me.
      - pbhjpbhj 12y ago
        >"for a long time HTML table tags bidirectionally implied table layout" // You're right, tables are fine for tabular data. But it was always thus. Perhaps if you were a html noob and hung out listening to people pissed off with table layouts you'd get confused and think all tables were bad (you definitely want a graphical layout helper app though as keeping track of them in code is a PITA). It was table tage |- table layout V tabulated data rather than just table tage |- table layout
        nitrogen 12y ago
        I've worked on HTML that was written by someone who cargo culted all of the tables into rows of Bootstrap columns, for tabular data. It happens.
      - jeremyswank 12y ago
        "I seem to recall there's a term for what I'm reaching for." Conflated?
- mattmanser 12y ago
  That's not what he's saying. He's saying they're good at times but he took ages to realize that because the old table based layout using <table> used to result in extreme tag soup. If you are looking for reasons why they're actually not that great anyway, this succinct post on /r/webdev reminded me why I haven't unsubbed from that highly variable sub: http://www.reddit.com/r/webdev/comments/2k8ud2/why_does_no_one_do_layout_with_displaytable/clj374t http://www.reddit.com/r/webdev/comments/2k8ud2/why_does_no_o... In this case, the example the OP gave at the beginning, a dashboard, can't work with a responsive layout using display:table, which is a feature you'd kinda expect in this day and age. So they finally release a half decent display:table and it's too late as we now need responsive designs. Pretty much sums up how pants the W3C process is.
  - joshuacc 12y ago
    > So they finally release a half decent display:table and it's too late as we now need responsive designs. I'm not sure what you mean by "finally release." The display: table property was part of the CSS 2.1, which became a Candidate Recommendation in 2004 and an official Recommendation in 2011. It also works perfectly in IE8, which was released in 2009. The term "Responsive Design," on the other hand, wasn't even coined until 2010, and didn't really become mainstream for another 2-3 years. There were a couple of years when working with display: table was perfectly reasonable and the "Responsive Design" trend hadn't yet hit the tipping point. I dislike overdone/late W3C processes as much as anyone, but this isn't a good example of that.
    - gsnedders 12y ago
      Even earlier, display: table was part of the original CSS Level 2 which became a REC in 1998 — twelve years before "responsive design" came into being. It largely followed what had been added to HTML 3.2 in January 1997 — based on what most browsers (with Netscape first) in 1996. There's also a lot of unwillingness to do much around display: table — it remains largely unspecified (mostly because we basically know web compatibility requires you to do what IE6 does — and nobody knows quite what that is, and MS people have struggled to get permission to disclose the detail).
- icantthinkofone 12y ago
  He mentions it in the article. People associated it with the HTML table element. Using the table element for page layout affected the document's structure which is why that's a bad thing but the CSS table property does not affect structure.
- deleted 12y ago
  [deleted]
- ZeroGravitas 12y ago
  It's not. But nobody ever got to use it, because IE6 and IE7 didn't support it, and now it's only useful for supporting IE8, IE9.
insin 12y ago
It still takes me a few beats from thinking "I need a flexible grid layout here" to remembering I can just use display:table, having spent so many years discounting it off-hand because of Internet Explorer.
- archagon 12y ago
  As a fairly new web developer, who's doing it for fun, I'm so glad that I can just say "screw it, I'm using flexbox" for 99% of these sorts of problems!
- OniBait 12y ago
  What does IE have to do with this? Wasn't the whole anti-table movement a response to the abuse of <table>, <tr>, <td> HTML tags for layout? I can't think of any particular issue with Internet Explorer and display:table...
  - recursive 12y ago
    I think IE7 doesn't support display: table;
    - OniBait 12y ago
      Sure, but IE 7 predated Chrome by 2 years. I'm not sure how IE 7 which has a global browser share roughly equivalent to Chrome 11, Firefox 3.6, Android 2.3 and Blackberry 7 has any relevance.
vixen99 12y ago
'I absolutely dissent HTML table-layout'. Don't you have to dissent from?
- jrochkind1 12y ago
  yeah, that makes no sense grammatically, I think maybe OP meant "detest".
darrhiggs 12y ago
>> E8 and IE9 still make up 32% of the browser market share and that is a lot to give up if I was to revert to the flex solution Yes, if you have an even worldwide visitor share. Can I Use[0] puts USA IE9 usage at 3.86% and IE8 at 7.28% (11.14% in total). If your user base is different it would be wise to examine the data before discounting flex-box based on worldwide stats. If anyone has access to netmarketshare's USA[1] (used in the article) data, it would be nice to see what it is. EDIT: Also the article's stats[2] are for desktop only. It seems[2] that mobile support is relatively high with Can I Use[0] stating that total USA support = 86.46%. [0] http://caniuse.com/#search=flexbox http://caniuse.com/#search=flexbox [1] http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0&qpaf=-000%09101%09US%0D http://www.netmarketshare.com/browser-market-share.aspx?qpri... [2] http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0 http://www.netmarketshare.com/browser-market-share.aspx?qpri...
- marknutter 12y ago
  netmarketshare also tracks users based purely on the user agent, regardless of how much browsing they do. As a result, it skews toward older browsers like IE8 and IE9 whose users typically don't surf very much at all. IF you track browser usage based purely on page views per browser IE8/9 represent a far lower percentage of all browser usage.
- Keats 12y ago
  I was going to comment on that as well. That depends on your target, my blog gets about 1% of traffic from IE8/9 so using flexbox would be ok if I wanted. If you're working on gaming/tech things for example, chances are most of your users will be on chrome/firefox and you can safely use it. And flexbox is so nice.
- IkmoIkmo 12y ago
  Agreed. A friend of mine suggested Flexbox for a web-app I was going to build him. I glanced over the requirements and then asked him his traffic for <IE10, and it was nearly 10%. (Website has 1m+ pageviews per month). Not nearly as bad as 32%. And the number continues to drop.
rpwverheij 12y ago
interesting! will look this up again when I have one of the described problems. In the meanwhile, I'll push an update to my brain: not everything related to tables is old / bad!
avighnay 12y ago
>> the holy grail layout gave me an instant smile, I remember 7 years back, wracking my brains out to get it done for a project!
blablabla123 12y ago
Most of the examples can be achieved with flex layouts, Stylus+nib even manages the browser prefixes for you. Just mentioning this, because last week I considered a {HTML|CSS} table layout. As it turned out, solving the problem with tables was more difficult than using other methods...
amwelles 12y ago
I've been using this in some of my latest projects. Works like a charm!
yoklov 12y ago
The biggest downside of display: table and friends is performance. Changing any CSS or DOM properties will basically cause a full page (!) relayout and repaint on a lot of browsers (especially mobile safari).
- scotty79 12y ago
  Doesn't table-layout: fixed; help in Safari?
pcwalton 12y ago
As someone who just implemented automatic table layout and is now intimately familiar with the details of how it works, I'd like to suggest that the problem with table-based layout is that it's excessively complex and largely undocumented and unspecified. The results will differ between browsers. Even the parts that have draft specs (which don't include, for example, percentage heights) are much more complex than CSS blocks and inlines: look at sections 4.1 through 4.4 of [1] for example. [1]: http://dbaron.org/css/intrinsic/ http://dbaron.org/css/intrinsic/
- mariusc23 12y ago
  Yes! I remember running into a really obscure bug that was caused by having an element nested into a parent with display: table. I don't remember the details, but I remember we were using the sticky footer technique described in the article.
  - macNchz 12y ago
    I ran into a similar situation a while back while building an internal dashboard that had a fairly complex nested-table layout. It wouldn't render properly because of a bug in Firefox that had been open since 2000. I think this was the one (it seems they've fixed it): https://bugzilla.mozilla.org/show_bug.cgi?id=63895 https://bugzilla.mozilla.org/show_bug.cgi?id=63895
DigitalSea 12y ago
I remember the anti-html table movement fondly. While everyone knew tables were bad for certain purposes, the hate movement brainwashed people into thinking that using tables for anything (including tabular data) was bad. And so, people started marking up tabular data using DIV's and CSS properties that suffered from a myriad of compatibility issues, convincing themselves that using floats was the right thing to do. And we all bought into it, well most of us. Every time an overzealous developer would spot the use of a table tag, hell would reign down upon Earth lambasting the developer for using a table, even if it was being used for the right purpose. "how dare you use a table you noob, use floats and DIV's, they are so much better" - for a good while people were hating on using the table tag to the point where many were hating it, but could not really tell you why other than, "because tables are bad" In many ways the web has gone full circle, Flexbox is merely a more powerful CSS version of tables, in-fact there are many similarities like the ability to have columns of content of varied size sitting alongside one another. We added in a new set of properties, changed the name and made them a little bit more powerful. I am one of those developers who have been quietly using display table for non-tabular data for a while now to solve issues I have seen other developers resort to additional markup and CSS hacks for, that either makes me a lazy developer, an efficient developer or perhaps both. Just recently I proved a remote developer wrong in regards to responsive tables. He tried telling me and the business responsive tables cannot be done without hacks. I implemented a solution using display table and DIV's. This is for part of an app that only logged in users see, not search engines, so while it was not a true proper use of the properties, it allowed me to implement a true responsive solution for tables that will not degrade SEO or performance, as it is not public. Simply using media queries I was able to make my table DIV's collapse by setting them to display block, adding in some type and colour adjustments, and it just worked. No need to use before and after pseudo selectors to hack in support for titles and stacked tables. No hair pulling when the business asked me to support IE9 either. As developers we all mostly want to do everything correctly and use the proper tags and CSS properties in the appropriate way, but sometimes when you have a deadline to meet and time is running out, you have to do what you have to do to get things done.
- StefanKarpinski 12y ago
  Using tables is back? Sweet. Now my knowledge of HTML is relevant again.
rado 12y ago
My IE8+ grid is based on display: table and just works. http://natuive.net http://natuive.net
scotty79 12y ago
If you use table for layout, remember to also use table-layout: fixed; It will improve table behavior (content will no longer affect horizontal layout of the table) and performance, saving repaints, reflows and whatnots.
- cpncrunch 12y ago
  It really depends why you are using the table layout. Quite often the reason for using tables is to lay out multiple items based on their content size, so you want the default automatica layout.
rporrata 12y ago
We have come full circle. Tables to CSS grid based frameworks back to Tables? Tables are generally for structured content. They work and are perfect - Excel for example. Hundreds of cells on a page? Rendering / performance would be a nightmare. CSS grids for layout - perfect and may cause some pain. Once you get it right the performance is there. With css/tags there can be abuse and we must think of how we plan to present our content to the user who ultimately judges our work. They do not care about the how it was implemented, they just want it now and that it works consistently. We need to ensure we keep our sanity the balance is in between the two. On another note, the use of colgroups should be mentioned with the above. It does help with rendering performance. http://www.w3.org/TR/html5/single-page.html#the-colgroup-element http://www.w3.org/TR/html5/single-page.html#the-colgroup-ele... - Enjoy!
lacoolj 12y ago
This is the most appropriately-named article, ever.

130 points by p0larboy 12y ago

addict3d 12y ago

You can achieve the same results with absolute positioning, which I prefer.

Sharlin 12y ago
I'm pretty sure you can't, except in the trivial case of a table with absolute-sized everything, or alternatively by reimplementing the table algorithms in JS.
bbx 12y ago
Problem with absolute positioning is that you remove elements from the natural flow of the page, meaning that adjacent elements aren't aware of the dynamic height of a fixed footer for example.

igvadaimon 12y ago

What I didn't understand from this blog post is WHY display:table is really bad.

pornel 12y ago
It's not. That's the point. "Tables for layout are bad" applies only to use of <table> HTML markup for layout. `display:table` achieves the same layout, but without presentational markup and accessibility problems that html-tables-for-layout caused. If it was called "display:stretchy-box", nobody would mind.
- Leszek 12y ago
  Or "display:flexible-box", maybe even shortening that somehow. Hmm.
  - wavefunction 12y ago
    A flex-box container is pretty different than a table. Flex-boxes have a major axis whereas tables are just rows and columns, as one specific difference.
    - Leszek 12y ago
      Yeah, fair point actually.
- adamtj 12y ago
  Are html-tables bad even for their intended purpose of laying out tabular data?
  - jerf 12y ago
    No. And again, that's part of the point; "HTML table tags aren't good for layout" semantically collapsed[1] to "tables aren't good for layout" collapsed to "tables are bad" collapsed to "tables are EVIL". No, they aren't. The first collapse is easily explained by the fact that for a long time HTML table tags bidirectionally implied table layout (no way to have one without the other), but now that CSS has broken that in both directions it's not a valid simplification. (Less well known aspect of CSS table support, I'm pretty sure it's possible to take a series of HTML table elements and "undo" their tableness if you're feeling feisty. But it's a weird way to do things.) [1]: I seem to recall there's a term for what I'm reaching for. Much obliged if someone can remind me.
    - pbhjpbhj 12y ago
      >"for a long time HTML table tags bidirectionally implied table layout" // You're right, tables are fine for tabular data. But it was always thus. Perhaps if you were a html noob and hung out listening to people pissed off with table layouts you'd get confused and think all tables were bad (you definitely want a graphical layout helper app though as keeping track of them in code is a PITA). It was table tage |- table layout V tabulated data rather than just table tage |- table layout
      - nitrogen 12y ago
        I've worked on HTML that was written by someone who cargo culted all of the tables into rows of Bootstrap columns, for tabular data. It happens.
    - jeremyswank 12y ago
      "I seem to recall there's a term for what I'm reaching for." Conflated?
mattmanser 12y ago
That's not what he's saying. He's saying they're good at times but he took ages to realize that because the old table based layout using <table> used to result in extreme tag soup. If you are looking for reasons why they're actually not that great anyway, this succinct post on /r/webdev reminded me why I haven't unsubbed from that highly variable sub: http://www.reddit.com/r/webdev/comments/2k8ud2/why_does_no_one_do_layout_with_displaytable/clj374t http://www.reddit.com/r/webdev/comments/2k8ud2/why_does_no_o... In this case, the example the OP gave at the beginning, a dashboard, can't work with a responsive layout using display:table, which is a feature you'd kinda expect in this day and age. So they finally release a half decent display:table and it's too late as we now need responsive designs. Pretty much sums up how pants the W3C process is.
- joshuacc 12y ago
  > So they finally release a half decent display:table and it's too late as we now need responsive designs. I'm not sure what you mean by "finally release." The display: table property was part of the CSS 2.1, which became a Candidate Recommendation in 2004 and an official Recommendation in 2011. It also works perfectly in IE8, which was released in 2009. The term "Responsive Design," on the other hand, wasn't even coined until 2010, and didn't really become mainstream for another 2-3 years. There were a couple of years when working with display: table was perfectly reasonable and the "Responsive Design" trend hadn't yet hit the tipping point. I dislike overdone/late W3C processes as much as anyone, but this isn't a good example of that.
  - gsnedders 12y ago
    Even earlier, display: table was part of the original CSS Level 2 which became a REC in 1998 — twelve years before "responsive design" came into being. It largely followed what had been added to HTML 3.2 in January 1997 — based on what most browsers (with Netscape first) in 1996. There's also a lot of unwillingness to do much around display: table — it remains largely unspecified (mostly because we basically know web compatibility requires you to do what IE6 does — and nobody knows quite what that is, and MS people have struggled to get permission to disclose the detail).
icantthinkofone 12y ago
He mentions it in the article. People associated it with the HTML table element. Using the table element for page layout affected the document's structure which is why that's a bad thing but the CSS table property does not affect structure.
deleted 12y ago
[deleted]
ZeroGravitas 12y ago
It's not. But nobody ever got to use it, because IE6 and IE7 didn't support it, and now it's only useful for supporting IE8, IE9.

insin 12y ago

It still takes me a few beats from thinking "I need a flexible grid layout here" to remembering I can just use display:table, having spent so many years discounting it off-hand because of Internet Explorer.

archagon 12y ago
As a fairly new web developer, who's doing it for fun, I'm so glad that I can just say "screw it, I'm using flexbox" for 99% of these sorts of problems!
OniBait 12y ago
What does IE have to do with this? Wasn't the whole anti-table movement a response to the abuse of <table>, <tr>, <td> HTML tags for layout? I can't think of any particular issue with Internet Explorer and display:table...
- recursive 12y ago
  I think IE7 doesn't support display: table;
  - OniBait 12y ago
    Sure, but IE 7 predated Chrome by 2 years. I'm not sure how IE 7 which has a global browser share roughly equivalent to Chrome 11, Firefox 3.6, Android 2.3 and Blackberry 7 has any relevance.

vixen99 12y ago

'I absolutely dissent HTML table-layout'. Don't you have to dissent from?

jrochkind1 12y ago
yeah, that makes no sense grammatically, I think maybe OP meant "detest".

darrhiggs 12y ago

>> E8 and IE9 still make up 32% of the browser market share and that is a lot to give up if I was to revert to the flex solution Yes, if you have an even worldwide visitor share. Can I Use[0] puts USA IE9 usage at 3.86% and IE8 at 7.28% (11.14% in total). If your user base is different it would be wise to examine the data before discounting flex-box based on worldwide stats. If anyone has access to netmarketshare's USA[1] (used in the article) data, it would be nice to see what it is. EDIT: Also the article's stats[2] are for desktop only. It seems[2] that mobile support is relatively high with Can I Use[0] stating that total USA support = 86.46%. [0] http://caniuse.com/#search=flexbox http://caniuse.com/#search=flexbox [1] http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0&qpaf=-000%09101%09US%0D http://www.netmarketshare.com/browser-market-share.aspx?qpri... [2] http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0 http://www.netmarketshare.com/browser-market-share.aspx?qpri...

marknutter 12y ago
netmarketshare also tracks users based purely on the user agent, regardless of how much browsing they do. As a result, it skews toward older browsers like IE8 and IE9 whose users typically don't surf very much at all. IF you track browser usage based purely on page views per browser IE8/9 represent a far lower percentage of all browser usage.
Keats 12y ago
I was going to comment on that as well. That depends on your target, my blog gets about 1% of traffic from IE8/9 so using flexbox would be ok if I wanted. If you're working on gaming/tech things for example, chances are most of your users will be on chrome/firefox and you can safely use it. And flexbox is so nice.
IkmoIkmo 12y ago
Agreed. A friend of mine suggested Flexbox for a web-app I was going to build him. I glanced over the requirements and then asked him his traffic for <IE10, and it was nearly 10%. (Website has 1m+ pageviews per month). Not nearly as bad as 32%. And the number continues to drop.

rpwverheij 12y ago

interesting! will look this up again when I have one of the described problems. In the meanwhile, I'll push an update to my brain: not everything related to tables is old / bad!

avighnay 12y ago

>> the holy grail layout gave me an instant smile, I remember 7 years back, wracking my brains out to get it done for a project!

blablabla123 12y ago

Most of the examples can be achieved with flex layouts, Stylus+nib even manages the browser prefixes for you. Just mentioning this, because last week I considered a {HTML|CSS} table layout. As it turned out, solving the problem with tables was more difficult than using other methods...

amwelles 12y ago

I've been using this in some of my latest projects. Works like a charm!

yoklov 12y ago

The biggest downside of display: table and friends is performance. Changing any CSS or DOM properties will basically cause a full page (!) relayout and repaint on a lot of browsers (especially mobile safari).

scotty79 12y ago
Doesn't table-layout: fixed; help in Safari?

pcwalton 12y ago

As someone who just implemented automatic table layout and is now intimately familiar with the details of how it works, I'd like to suggest that the problem with table-based layout is that it's excessively complex and largely undocumented and unspecified. The results will differ between browsers. Even the parts that have draft specs (which don't include, for example, percentage heights) are much more complex than CSS blocks and inlines: look at sections 4.1 through 4.4 of [1] for example. [1]: http://dbaron.org/css/intrinsic/ http://dbaron.org/css/intrinsic/

mariusc23 12y ago
Yes! I remember running into a really obscure bug that was caused by having an element nested into a parent with display: table. I don't remember the details, but I remember we were using the sticky footer technique described in the article.
- macNchz 12y ago
  I ran into a similar situation a while back while building an internal dashboard that had a fairly complex nested-table layout. It wouldn't render properly because of a bug in Firefox that had been open since 2000. I think this was the one (it seems they've fixed it): https://bugzilla.mozilla.org/show_bug.cgi?id=63895 https://bugzilla.mozilla.org/show_bug.cgi?id=63895

DigitalSea 12y ago

I remember the anti-html table movement fondly. While everyone knew tables were bad for certain purposes, the hate movement brainwashed people into thinking that using tables for anything (including tabular data) was bad. And so, people started marking up tabular data using DIV's and CSS properties that suffered from a myriad of compatibility issues, convincing themselves that using floats was the right thing to do. And we all bought into it, well most of us. Every time an overzealous developer would spot the use of a table tag, hell would reign down upon Earth lambasting the developer for using a table, even if it was being used for the right purpose. "how dare you use a table you noob, use floats and DIV's, they are so much better" - for a good while people were hating on using the table tag to the point where many were hating it, but could not really tell you why other than, "because tables are bad" In many ways the web has gone full circle, Flexbox is merely a more powerful CSS version of tables, in-fact there are many similarities like the ability to have columns of content of varied size sitting alongside one another. We added in a new set of properties, changed the name and made them a little bit more powerful. I am one of those developers who have been quietly using display table for non-tabular data for a while now to solve issues I have seen other developers resort to additional markup and CSS hacks for, that either makes me a lazy developer, an efficient developer or perhaps both. Just recently I proved a remote developer wrong in regards to responsive tables. He tried telling me and the business responsive tables cannot be done without hacks. I implemented a solution using display table and DIV's. This is for part of an app that only logged in users see, not search engines, so while it was not a true proper use of the properties, it allowed me to implement a true responsive solution for tables that will not degrade SEO or performance, as it is not public. Simply using media queries I was able to make my table DIV's collapse by setting them to display block, adding in some type and colour adjustments, and it just worked. No need to use before and after pseudo selectors to hack in support for titles and stacked tables. No hair pulling when the business asked me to support IE9 either. As developers we all mostly want to do everything correctly and use the proper tags and CSS properties in the appropriate way, but sometimes when you have a deadline to meet and time is running out, you have to do what you have to do to get things done.

StefanKarpinski 12y ago
Using tables is back? Sweet. Now my knowledge of HTML is relevant again.

rado 12y ago

My IE8+ grid is based on display: table and just works. http://natuive.net http://natuive.net

scotty79 12y ago

If you use table for layout, remember to also use table-layout: fixed; It will improve table behavior (content will no longer affect horizontal layout of the table) and performance, saving repaints, reflows and whatnots.

cpncrunch 12y ago
It really depends why you are using the table layout. Quite often the reason for using tables is to lay out multiple items based on their content size, so you want the default automatica layout.

rporrata 12y ago

We have come full circle. Tables to CSS grid based frameworks back to Tables? Tables are generally for structured content. They work and are perfect - Excel for example. Hundreds of cells on a page? Rendering / performance would be a nightmare. CSS grids for layout - perfect and may cause some pain. Once you get it right the performance is there. With css/tags there can be abuse and we must think of how we plan to present our content to the user who ultimately judges our work. They do not care about the how it was implemented, they just want it now and that it works consistently. We need to ensure we keep our sanity the balance is in between the two. On another note, the use of colgroups should be mentioned with the above. It does help with rendering performance. http://www.w3.org/TR/html5/single-page.html#the-colgroup-element http://www.w3.org/TR/html5/single-page.html#the-colgroup-ele... - Enjoy!

lacoolj 12y ago

This is the most appropriately-named article, ever.