Every time I create an HTML table, I struggle with its styling. It’s not easy to make a table look good.
“OMG! Webmonkey told me to design with tables!”
No, I’m not talking about using tables for layout. Use tables how they were meant to be used: for data.
When I wrote about Firefox browser stats yesterday, I struggled to make the data look nice. Too bad I hadn’t found this gallery of table designs.
Even the minimalist styles that start off the ten designs are nice compared to an un-styled table. The list is worth reading alone for the bit on the little-used colgroup tag.
At the turn of the century Web designers were quick to adopt CSS for layout. Table-based designs, which had been the standard means of layout, were poo-pooed. This was a positive step for web design, but in this religious battle, the table tag became collateral damage.
A whole generation of designers avoid tables completely, but they can be useful for showing data. And now, hopefully they can be pretty, too.
See also:
Browse Our Tutorials
Cheat Sheets
Color Charts
Cut & Paste Code
