How to fold Jeff's table columns with CSS

W3C's CEO, Jeff Jaffe, can often be found in front of a spreadsheet. That seems to come with the job. And it's not just numbers either. Spreadsheet programs are good at handling tables and as a result everything seems to be a table.

Spreadsheet programs allow you to play with the data so that you always arrive at the results you want. You can sort tables in various ways, reformat columns, count them, cut and paste rows, and hide uninteresting columns from view.

When Jeff wants to share his tables, he naturally puts them on the Web in HTML. There is no widely supported standard for spreadsheets on the Web, but HTML can do the job: since 1997 (version 3.2), it has a TABLE element precisely for this purpose…

… But browsers aren't as good with tables as spreadsheet programs. We in W3C usually refer to browsers as “User Agents” in our specifications, in the hope that one day browsers indeed will become like loyal agents acting for a user. But, so far, browsers don't allow the user to reformat, sort, transpose, or otherwise manipulate tables.

Luckily, CSS can help a bit. In two different ways. CSS is, of course, a tool for authors (and we'll see below how it helps Jeff with his spreadsheets), but the CSS standard also requires that browsers must give users the final say: a browser must allow the user to select among the author's various style sheets, turn them off altogether, and use style sheets of his own.

That in itself doesn't turn a browser into a handy tool to analyze tables, but it gives off a signal: on the Web, the user is in control. It is perfectly fine for a user agent to ignore the author's instructions about how to display some data, and instead let the user manipulate the data as he wants. There is indeed a growing amount of software that does just that, but it goes by the name of “app” or “mash-up” rather than browser.

Back to Jeff's tables. The thing he wanted most for his tables was a way to temporarily suppress certain columns from view. In particular, some of his tables had columns for the twelve months and he wanted to allow his readers to suppress the columns of past months, so that the current month ended up right next to the summary columns, for easy comparison.

Not knowing the history of HTML and CSS in detail, he naturally assumed that that was possible. He just couldn't find how to do it. Jeff, myself and a few others happened to be chatting on IRC about his tables when he mentioned this, and my first reaction was that, no, CSS did not have features for interactively collapsing and expanding elements. That is work that is going to happen, because it is needed to support HTML5, but it hasn't happened yet.

On thinking again, however, I realized that this particular case could actually be done, and even in two or three different ways. The most “interactive” ways are a bit of a hack, but they do work.

For the technical details I refer you to a little tutorial I wrote about it, called Folding table columns. The principle behind the tricks is as follows.

CSS actually has a special property for collapsing columns and rows interactively. The 'collapse' and 'visible' values of the 'visibility' property, when applied to rows or columns, hide and show those columns in such a way that it is easy and quick for a browser to toggle back and forth between hiding and showing (almost no computation involved) and the effect looks natural, exactly as when a spreadsheet program does it.

What CSS doesn't specify is how the user tells a browser to toggle the property. And maybe because of that, browsers thus far haven't offered that function to users.

But CSS does have general ways to switch between styles. One way is the option to have alternative style sheets that the user can choose from, as I already mentioned above. The other ways depend on state changes in elements, e.g., an element can have the keyboard focus or not, it can be a link that has been visited or not, it can be a check box that has been checked or not, or it can be the target of a hyperlink or not.

Those last two can indeed be used to build collapsing tables. They are expressed in CSS respectively with the ':checked' and ':target' selectors. Both require that appropriate elements are added to the HTML source (check boxes for one, hyperlinks for the other), so they are a bit of a hack in this case. But the result looks fine. In the tutorial I chose to use ':target'.

During the same chat with Jeff, somebody else suggested that I write up the two tricks. So that's how the tutorial was born.

Jeff is happy with his tables. I cannot show them to you, but there are some other tables in the tutorial to play with.