It's the last week of July's "The Office" challenge! All of team CodePen is amazed at the creative and practical Pens we've seen through the first three weeks, so we're really psyched to see what you do next!

Your Challenge

This week's challenge prompt is the humble HTML table

Tables are mighty useful for tabular data. There are plenty of styling quirks in the world of tables, but can be quite fun to work with when you're in the mood.

Your challenge: get your table on and design a table in a way you never have before.

July's Challenge Sponsor: HelloSign

Everything IT requires and developers love. The HelloSign API allows you to collect legally binding signatures from your own app. Learn more at HelloSign.com.

Ideas

  1. One of the trickier styling considerations around tables is making them responsive. It's not just a matter of technically how, but deciding what kind of UX is appropriate for the data of the table.
  2. What is a way you could interact with a table that you don't see very often? For example, what would it look like if you could zoom in on a cell to reveal more information? Or what would it be like to paginate a table? What kind of animation possibilities are there in table interaction? How could you make it easier for a comparison-style table to help with comparisons?
  3. Many of you have probably been around long enough to know that tables have a bit of a bad rap in the history of front-end development. There was a whole era they were used for complete page layout when they aren't the right tool for that. The cops won't come for you if you try it though. Try building a design with a table and walk down histories spacer.gif corridors.

Resources