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.
| /* Pulled from https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L2079-L2241 */ | |
| .table { | |
| width: 100%; | |
| max-width: 100%; | |
| margin-bottom: 1rem; | |
| } | |
| .table th, | |
| .table td { | |
| padding: 0.75rem; | |
| vertical-align: top; | |
| border-top: 1px solid #eceeef; | |
| } | |
| .table thead th { | |
| vertical-align: bottom; | |
| border-bottom: 2px solid #eceeef; | |
| } | |
| .table tbody + tbody { | |
| border-top: 2px solid #eceeef; | |
| } | |
| .table .table { | |
| background-color: #fff; | |
| } | |
| .table-sm th, | |
| .table-sm td { | |
| padding: 0.3rem; | |
| } | |
| .table-bordered { | |
| border: 1px solid #eceeef; | |
| } | |
| .table-bordered th, | |
| .table-bordered td { | |
| border: 1px solid #eceeef; | |
| } | |
| .table-bordered thead th, | |
| .table-bordered thead td { | |
| border-bottom-width: 2px; | |
| } | |
| .table-striped tbody tr:nth-of-type(odd) { | |
| background-color: rgba(0, 0, 0, 0.05); | |
| } | |
| .table-hover tbody tr:hover { | |
| background-color: rgba(0, 0, 0, 0.075); | |
| } | |
| .table-active, | |
| .table-active > th, | |
| .table-active > td { | |
| background-color: rgba(0, 0, 0, 0.075); | |
| } | |
| .table-hover .table-active:hover { | |
| background-color: rgba(0, 0, 0, 0.075); | |
| } | |
| .table-hover .table-active:hover > td, | |
| .table-hover .table-active:hover > th { | |
| background-color: rgba(0, 0, 0, 0.075); | |
| } | |
| .table-success, | |
| .table-success > th, | |
| .table-success > td { | |
| background-color: #dff0d8; | |
| } | |
| .table-hover .table-success:hover { | |
| background-color: #d0e9c6; | |
| } | |
| .table-hover .table-success:hover > td, | |
| .table-hover .table-success:hover > th { | |
| background-color: #d0e9c6; | |
| } | |
| .table-info, | |
| .table-info > th, | |
| .table-info > td { | |
| background-color: #d9edf7; | |
| } | |
| .table-hover .table-info:hover { | |
| background-color: #c4e3f3; | |
| } | |
| .table-hover .table-info:hover > td, | |
| .table-hover .table-info:hover > th { | |
| background-color: #c4e3f3; | |
| } | |
| .table-warning, | |
| .table-warning > th, | |
| .table-warning > td { | |
| background-color: #fcf8e3; | |
| } | |
| .table-hover .table-warning:hover { | |
| background-color: #faf2cc; | |
| } | |
| .table-hover .table-warning:hover > td, | |
| .table-hover .table-warning:hover > th { | |
| background-color: #faf2cc; | |
| } | |
| .table-danger, | |
| .table-danger > th, | |
| .table-danger > td { | |
| background-color: #f2dede; | |
| } | |
| .table-hover .table-danger:hover { | |
| background-color: #ebcccc; | |
| } | |
| .table-hover .table-danger:hover > td, | |
| .table-hover .table-danger:hover > th { | |
| background-color: #ebcccc; | |
| } | |
| .thead-inverse th { | |
| color: #fff; | |
| background-color: #292b2c; | |
| } | |
| .thead-default th { | |
| color: #464a4c; | |
| background-color: #eceeef; | |
| } | |
| .table-inverse { | |
| color: #fff; | |
| background-color: #292b2c; | |
| } | |
| .table-inverse th, | |
| .table-inverse td, | |
| .table-inverse thead th { | |
| border-color: #fff; | |
| } | |
| .table-inverse.table-bordered { | |
| border: 0; | |
| } | |
| .table-responsive { | |
| display: block; | |
| width: 100%; | |
| overflow-x: auto; | |
| -ms-overflow-style: -ms-autohiding-scrollbar; | |
| } | |
| .table-responsive.table-bordered { | |
| border: 0; | |
| } |
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!
| <!-- | |
| <thead> Groups the header content in a table | |
| <th> Defines a header cell in a table | |
| <tbody> Groups the body content in a table | |
| <td> Defines a cell in a table | |
| --> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Column Header #1</th> | |
| <th>Column Header #2</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <th>Row Header</th> | |
| <td>I'm in a cell</td> | |
| </tr> | |
| </tbody> | |
| </table> |
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.
Thanks again Carrie, just what I needed.
Thanks Carrie, Now I can create a table with a variety of styles
Previously I was using tablepress plugin but I do not really like it because of the limitations of style
Thanks for the fancy table tut. I used this on a responsive site I built recently & found out it doesn’t fair so well on mobile devices. Any advice on making it look awesome on a variety of screen widths?
btw…you’re right…eCommerce=no fun.
Just leaving a comment to say I refer to this at least once a month. Great tutorial!
Dorian, always glad to see you around these parts. Also, I regularly refer to your Gravity Forms / MailChimp post. 🙂
Carrie. Thanks for this tutorial. I’ve almost got it. but having an issue. How do you define width of columns. Within I am using only for two columns. But the first column ends up being about 80% of the width. Is there a way to make the left column only 60%? Let me know if you can. And once again, thanks for all the great stuff you put out.
Hai Carrie Dils..
Thanks for Great tutorial.. gt Exactly what i needed..
Great post Carrie. Implemented it right away on my site.
Thanks so much ;]