HTML Spreadsheet
Midway through writing another article I realized I needed a simple way to display an example spreadsheet in HTML. After playing with table stylesheets I got a result that works well.
Example spreadsheet:
| A | B | C | D | E | F | G | H | |
|---|---|---|---|---|---|---|---|---|
| 1 | data_id | timestamp | value | description | optvalue | |||
| 2 | 1 | 1/31/2006 4:00 PM | 275 | Settings for Customer B | null | |||
| 3 | 2 | 2/2/2006 8:00 AM | 121 | Reset Inventory | -9 | |||
| 4 | 3 | 11/15/2001 11:35 PM | 0 | Test | null | |||
| 5 | ||||||||
| 6 |
Take a look at the source for this page to see the HTML and CSS of the spreadsheet. A few notes about how it works:
- Assign the table to class "spreadsheet" and style only that, so that your other tables look normal
- Table data cells (<td>) that contain numbers can be assigned to class "num". This makes it easier to right-align all numeric data.
- I use a header and data cell class "highlighted" if I need to point to a specific cell.
I'm thinking of doing a follow-up article on how to use XSLT to automatically convert cartesian XML data to this table format. Let me know your thoughts on this. I'm decidedly *not* doing a follow-up article on how to use AJAX to make the spreadsheet modifyable, unless someone wants to sponsor a Mountain-Dew-fueled weekend.
Clint Bellanger believes CSS and tables can learn to peacefully coexist. He is also a developer for PFunked.
This article is released under the terms of the Creative Commons Share-Alike License