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.
Excellent! Glad that tables are making a bit of a comeback. Sometimes there isn’t a better option for how to display the data. Thanks for the tutorial, Carrie!
You betcha! Forgot to mention you can mix and match those table styles (i.e. table borders and row hovers) however you’d like. 🙂
Love this Carrie, definitely something I’m going to implement in future sites. Tables aren’t the best of HTML, but sometimes you just need to have ordered data…
Question: do you know of a plugin that allows for users to create tables in WordPress using the TinyMCE editor? Many of my clients would be horrified to go anywhere near the Text editor and its confusing …
I don’t know if that plugin exists, but I’d love if it did!
Tiny MCE Advanced, http://wordpress.org/plugins/tinymce-advanced/, will have a table function. It probably isn’t based on Bootrsrap, but it is serviceable. I have used it for a client.
My question Carrie, is it better just to add the Bootstrap CSS or to use a Boostrap plugin like WordPress Twitter Bootstrap CSS? I would think it is best to use the direct CSS, but the plugin could make for a good, non techy measure. What do you think?
You are right, tables definitely have their place! 🙂
Thanks for this Carrie. I used one of these just today on a client’s site, so ther reminder that I could use a table for data came just in time! 🙂
Thanks Carrie for this post (and really, all of your post). This is so timely and useful – using tabled information on a client’s real estate site today.
Oh Wow… Haven’t used tables in so long I will have to learn the markup all over! I’ll have to give it a try. Thanks Carrie.
Thank you very much for the info. After following this, I found that my links are not clickable in Safari and Chrome but they are working in Firefox. Is there something that I might be doing wrong?
I’ve found that my links only work when I resize my browser down to the mobile width size.
Are you talking about regular links? In the context of Bootstrap tables? I’m confused.
Yes. Regular links within the table are not clickable in safari or chrome but they are clickable in Firefox. I’m still not able to figure out why.
Hmm… My first thought is there might be an unclosed tag or some other parse error that safari/chrome aren’t forgiving, but firefox is. Try running it through a validator like http://validator.w3.org.
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 ;]
Hi Carrie!
I just want to say thanks for this tutorial. Been trying to develop using Genesis, and you’ve been such a lifesaver <3