Add Bootstrap Table Styles to Your Theme

Confession: Since I started learning CSS and better understanding what it means to properly style content, I’ve left HTML tables in the dust. They’re clunky reminders of my early web design days and signify everything that was wrong and ugly about my markup (i.e. using tables to force layout).

But the truth is, tables aren’t bad. I just misused them. HTML tables are meant to display data — go ahead and think spreadsheet — and are actually darn good at their job.

In this WordPress tutorial, I’ll show you how to add Bootstrap table styles to your site. When we’re done, we’ll have table styles for the following:

• Plain ole table
• Basic styled table
• Condensed table
• Bordered table
• Striped table
• Row hover table (my fave!)

Here’s a preview of the finished product.

Step 1: Add the CSS (or Sass)

I grabbed the table styles I wanted from the Bootstrap Github repository. Add the following CSS to your site’s style sheet.

Sass users

If you’re using Sass, there’s a .scss partial for tables you could also use instead of the code snippet above. If you go that route, beware the variables and mixins called from the tables partial. You’ll want to chase those down and reference them in your stylesheet, too.  If you have no idea what I’m talking about and want to learn more, here’s an introduction to Sass.

Step 2: Create Tables

Before we get to styling, indulge me a moment to talk about proper semantic markup for tables. This is important if you want your styles to work properly!

Now, there’s no CSS markup in that code example but look closely at the table layout. Our column headers are grouped within thead tags and are marked up with th.

In my old lazy table usage days, I used table rows/columns with reckless abandon and didn’t properly define table headings.

So, create your tables properly and then we’re ready to add style!

Step 3: Add Table Styles

It’s all downhill from here. Below are the CSS classes you’ll add to your <table> tags.

Plain ole table

You don’t need to add any styles. How boring.

Basic styled table

<table class="table">

Condensed table

<table class="table table-sm">

Bordered table

<table class="table table-bordered">

Striped table

<table class="table table-striped">

Row hover table

<table class="table table-hover">

That’s it! You might have hoped it was harder, but it’s not. Super easy to spice up your data tables. To see all the tables in action, you can visit this Bootstrap tables demo.

Interested in learning more about CSS Grids and Frameworks?

If you’re new to Bootstrap or possibly considering Foundation or another CSS framework, it’s hard to wade through all the information “out there” and know which one is best for your web project.

Let me help! I created a course called CSS Grids and Frameworks specifically to help you understand the landscape of available frameworks and when you might choose one over another.