Styling Tables in CSS

A guide to making those HTML tables pretty with CSS.

Scroll down...

Content

Resources

Comments

Time to give tables their turn again! Turn tables turn!

CSS turn tables

In this lesson we will return to tables with style! No that joke doesn't get old. We'll cover the basics of how you can get started making those bland, boring tables look more pleasing to the eye. We'll cover the essential CSS properties necessary to get you started. Then you'll read through a walkthrough of how you can get more detailed with various types of styles for your tables. Let there be no futher delay!

Table Styling Basics

Just like you would change formatting and color for a spreadsheet, styling tables can make the overall point of your table's data more clear. Styling a table can also make your site standout amongst other sites because you've styled it with a particular color scheme or trick with the borders. The possibilities are endless! But they all start with a few common CSS properties.

When applying styles to tables you'll likely want to add color to the borders or some part of the borders to separate columns and rows. The problem with this is that, by default, a table's borders are separated. In order to get the borders to display the way you'd expect you'll have to set border-collapse: collapse; on the table's styles.

table {
  width: 100%;
  border-collapse: collapse;
}
table td,
table th {
  border: 1px solid black;
}

With these styles in place you'll get a table that looks like this:

CSS table bordered collapsed

If we remove the border-collapse: collapse; setting then we get this:

CSS table bordered separated

Not very pretty without the border-collapse: collapse; setting.

Once you have that in place you're free to alter the border property of the tr and td elements as you see fit.

Shay Howe: Organizing Data with Tables Part 2

Now that you learned how to set up the basic properties to make table styling work as expected your task is to read through Shay Howe's walkthrough on Organizing Data with Tables (the CSS section). He'll dive deeper into the various ways you can style tables to draw the user's attention to the data being displayed.

Code Review

The important bits of code from this lesson

table {
  width: 100%;
  border-collapse: collapse;
}
table td,
table th {
  border: 1px solid black;
}

Wrapping Up

Styling tables is an important part of making your data pretty. You'll soon be creating dashboards and analytics data that requires tables and you'll need to have an understanding of how styles are applied to tables to tweak the appearance of your tables to your liking. At this point you have a wealth of CSS knowledge at your disposal and you're ready to get building your own style sheets for you own projects!



Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Demo: Building a Stylesheet