CodePen Challenge: Styling the Humble Table

26 Jul, 2018

CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. I often use it to test out small pieces of code that I want to add to a website I'm working on. 

Each month they pick a theme (this month is "The Office") with a weekly challenge based on that theme to encourage developers to get creative with code. This week's theme is "Styling the Humble Table" which they describe as follows: 

One thing you can think of when you think of HTML tables is baseball scores. Three rows: a header and two teams. Each column has the name of the team, then the runs for each inning and some overall stats. It's what you might call tabular data. Each of those bits of data deserve their own cell, like a spreadsheet. Tables in HTML help us do that from a layout perspective.

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.


My Table Design

I decided to have a little fun and put together a Pixel Art Drawing Tool created with HTML, CSS and jQuery. The jQuery functions detect the colour that have been selected (either from the colour table or the HTML5 colour picker), set the "Selected Colour" cell and colour in any cells on the artboard that you click on. There is also a "Clear" button to clear the table. 

Note that, because this uses HTML tables, it isn't responsive and can only really be used on desktop (boo!). It's also not that efficient but hey, it's a bit of fun right?


Topics: codepen-challenge

Join the Conversation!

Do you have a question, feedback or comments on this post?