Creating My First CSS-Formatted Table

Recently I wrapped up a portion of the HTML / CSS coursework on CodeAcademy and as with most sections, you’re given some time to experiment with some of the new concepts.
In this instance, it reinforcing my newly acquired skills in putting together tables.

The first attempt was pretty basic yet coding it took me close to an hour. The table offers a basic rundown of my opinion on a few different types of cacti and succulents:


It’s nothing fancy but from what you can see, it covers the basics as far as organizing headers, rows, and a few basic inline style elements. But I wasn’t done yet!

Confident in my new skills, I started taking the table step further by expanding on the formatting, styling, and data organization:

This second incarnation looks much more advanced but I leaned HEAVILY on inline styles to achieve the desired look, not exactly a good habit to get into. Regardless, it was a big step in the right direction so why stop there right?

For the third go, I started a fresh table formatted extensively with a separate style sheet while using inline styling very sparingly. It’s the first time I’ve integrated CSS so extensively into HTML:


As you can see, each version gets cleaner and cleaner! For this last version, I’ve hit a bit of a roadblock:

While the rounded cells look interesting, what I’m aiming for is to collapse the table and round the outer edges. Unfortunately, doing so reverts the table to the squared off edges.

I’ve attempted all sorts of techniques from using <divs>, <spans>, targeting specific portions of the HTML with IDs, using inline styles, etc. No luck with anything, my first real taste of what it’s like to encounter an issue without a clear-cut solution.

Far from frustrated I’ve actually been enjoying looking at this from every angle trying to work out a solution (yet feeling mildly irritated when each new approach falls flat). Maybe it requires new techniques I haven’t picked up yet or perhaps the answer is in plain sight. Who knows.

I plan to revisit this project in a few days but for now I have to move on to other things. Stay tuned for the “Okay, here’s what I was doing wrong with the table”-post.





Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s