Tablepress is by far the most popular WordPress table plugin, and it’s completely free. TablePress is flexible enough to create almost any type of table, but the default CSS styles are pretty bland.
One of my pet peeves is seeing a default Tablepress table on a website, without even minor styling upgrades to match the website’s theme.
So let’s change that.
You’ll learn: Learn how to style your TablePress tables using CSS, to make them more beautiful, useful and responsive.
Where to write your CSS code for TablePress?
There are so many different places to add custom CSS on your site, which one is best? For me, there are two obvious locations to consider (plus a few other options).
1. TablePress Plugin Options (preferred)
TablePress actually has it’s own built-in solution for adding custom CSS. It’s hidden in the plugin options menu, however, so you may not have found it. One minor annoyance is the design of the text box, that doesn’t auto-size to the content while you’re adding code.
Why is this the best method? Because it only inserts the CSS code on posts where the Tablepress shortcode is executed. The styles won’t be loaded on other pages, saving you precious milliseconds of load time.
2. Other places for CSS code
There are a plenty of other ways to add CSS code to your site too. The obvious choice is the WordPress Customizer, which has an ‘additional CSS’ section.
Your theme may also have a custom CSS feature, or you can use popular CSS plugins like SimpleCSS or Custom CSS Pro.
Keep in mind: Most CSS plugins load styles on every page of your site. This is fine if you’re a few lines of code. But once you start cracking 100 lines or so, it might be worth moving to Tablepress’s built-in CSS feature.
Anatomy of a TablePress Table
To correctly apply CSS to TablePress, you’ll need at least a basic understanding of the various elements and class names you can target. And there are a bunch of ’em (which makes adding styles super easy!).
Here’s the html structure of a 3×3 TablePress table.
<table class="tablepress tablepress-id-1 custom-classnames"> <thead> <tr class="row-1 odd"> <th class="column-1"></th> <th class="column-2"></th> <th class="column-3"></th> </tr> </thead> <tbody class="row-hover"> <tr class="row-2 even"> <td class="column-1"></td> <td class="column-2"></td> <td class="column-3"></td> </tr> <tr class="row-3 odd"> <td class="column-1"></td> <td class="column-2"></td> <td class="column-3"></td> </tr> </tbody> </table>
Wrapper Classes
The <table> element has several classes attached.
- Tablepress – applied to all tables
- tablepress-id-xxx – Specific to ID of your table
- Custom classes – Any class names you add while creating the table.
Column & Row Classes
Tablepress adds a numbered class to each row and column, so that you can style each individually. There is also an even/odd class for alternate rows.
- Rows: row-1, row-2, row-3
- Columns: column-1, column-2, column-3
- Even/Odd (rows only): odd, even
Whole-table styles
Here are some common tweaks you can use to style the entire table, not just individual rows or columns.
Change the typography
You might want to set a different default font-size for your tables, and possibly switch to a font that is easily legible at small sizes.
| Heading 1 | Heading 2 | Heading 3 | Heading 4 |
|---|---|---|---|
| Zombies | Blue | 99 | Breakfast |
| Werewolves | Pink | 98 | Lunch |
| Vampires | Green | 97 | Dinner |
| Hangry Wife | Red | 96 | Dessert |
The CSS
.tablepress.your-class {
font-size: 13px;
font-family: Arial, sans-serif;
}Code language: CSS (css)Center the table on a page/post
If your content area is wider than the table data, you may want to center the entire table rather than leave it left-aligned (by default).
It’s easy to do. If you’re in the old WYSIWYG editor, you can just click on ‘text’ view and put <center></center> tags on either side of the table HTML. But it’s just as easy to do with CSS.
Just set the left and right margin to ‘auto’ and it will automatically center itself.
.tablepress.your-class {
margin-left: auto;
margin-right: auto;
}Code language: CSS (css)Center text in the table cells
Here’s how to center the text inside the cells (by default they’re left-aligned). You can see the demo in the table above.
The CSS
.tablepress.your-class th, .tablepress.your-class td {
text-align: center;
}Code language: CSS (css)Add borders to table cells
If you want a more spreadsheet like appearance, just add a solid border to all table cells. You can chose to include or exclude TH header cells as well.
By default, Tablepress uses the border-collapse property, so the borders will combine into a single border.
The CSS
.tablepress.your-class th, .tablepress.your-class td {
border: 1px solid #666;
}
/* Tip: to match Tablepress defaults, use #ddd as border color */Code language: CSS (css)Styling TablePress Rows & Columns
Change the background color and text color for Tablepress header row
The biggest giveaway that a site is using Tablepress is the default table header styling. Changing the background color of the header cells to match your site branding is a great way to making your tables feel custom.
| Heading 1 | Heading 2 | Heading 3 | Heading 4 |
|---|---|---|---|
| Zombies | Blue | 99 | Breakfast |
| Werewolves | Pink | 98 | Lunch |
| Vampires | Green | 97 | Dinner |
| Hangry Wife | Red | 96 | Dessert |
The CSS
table.tablepress.your-class thead th {
background-color: #3a6377; /*background color */
color: white; /* Text Color */
}Code language: CSS (css)Style a specific column or row
I frequently use this to change typography (bold) or add a background color to a column or row.
Here’s how to target a specific column in Tablepress:
| Heading 1 | Heading 2 | Heading 3 | Heading 4 |
|---|---|---|---|
| Zombies | Blue | 99 | Breakfast |
| Werewolves | Pink | 98 | Lunch |
| Vampires | Green | 97 | Dinner |
| Hangry Wife | Red | 96 | Dessert |
The CSS
table.tablepress.your-class .row-3 td {
background-color: #f9bf76; /*background color */
font-weight: bold; /*bold font */
border-top: 1px solid #333; /*borders */
border-bottom: 1px solid #333;
}Code language: CSS (css)And how to style a specific row:
| Heading 1 | Heading 2 | Heading 3 | Heading 4 |
|---|---|---|---|
| Zombies | Blue | 99 | Breakfast |
| Werewolves | Pink | 98 | Lunch |
| Vampires | Green | 97 | Dinner |
| Hangry Wife | Red | 96 | Dessert |
The CSS
table.tablepress.your-class tbody .column-2 {
background-color: #f9bf76; /*background color */
font-weight: bold; /*bold font */
border-left: 2px solid #333; /*borders */
border-right: 2px solid #333;
}Code language: CSS (css)Change the default row striping
Tablepress lets gives you the option make your table striped, alternating the background color for even and odd rows. By default the colors are white and light gray, but you can easily customize them.
| Heading 1 | Heading 2 | Heading 3 | Heading 4 |
|---|---|---|---|
| Zombies | Blue | 99 | Breakfast |
| Werewolves | Pink | 98 | Lunch |
| Vampires | Green | 97 | Dinner |
| Hangry Wife | Red | 96 | Dessert |
The CSS
.tablepress.yourclass .odd td {
background-color: #f4f4f4;
}
.tablepress.your-class .even td {
background-color: #c3ffe5;
}Code language: CSS (css)Styling a single table cell
By combining TablePress’s row and column classes, you can precisely target individual cells for granular styling. You probably won’t use this much, but it’s a handy trick for highlighting outliers in a data set.
Note, the in the table html, the column class is inside the row class. The <tr> elements have the .row class, whereas the <td> and <th> elements have the .column class.
| Heading 1 | Heading 2 | Heading 3 | Heading 4 |
|---|---|---|---|
| Zombies | Blue | 99 | Breakfast |
| Werewolves | Pink | 98 | Lunch |
| Vampires | Green | 97 | Dinner |
| Hangry Wife | Red | 96 | Dessert |
.tablepress.your-class .row-3 .column-3 {
background-color: gold;
font-weight: bold;
border: 2px solid #5b5b5b;
}Code language: CSS (css)Pro Tip: When using one-time styles that will never be reused on another post or table, you can embed them in custom HTML block inside your post, rather than adding them to your site-wide CSS file. In fact, that’s how I added all the example CSS for this post.
It’s super easy to do. Just put your CSS between html <style> </style> tags.
<style>
/* Your CSS Here */
</style>Code language: HTML, XML (xml)
Very informative detail about custom table but please provide the css code link in description. Thanks
Can you please share how to target a combined cell?
Sure. I’m assuming you mean how to target a CSS rule that applies to any combined cell?
Then you would do something like:
.tablepress *[colspan], .tablepress *[rowspan] {/* Your rule here */
}
This uses the CSS attribute selector, so it applies to any child element of the Tablepress table which has the colspan or rowspan attribute.
Note: it might take more specificity to override some default tablepress styles (such as background color). In that case, you could add more selectors to increase specificity. So:
table.tablepress tbody td[colspan], table.tablepress tbody td[rowspan] { /* Your rule */ }
for example.
Hi, no matter what I do, my link button stays in half.
I mentioned the fix in this video: https://www.youtube.com/watch?v=5R_04UIMkJM but I forgot to add it to the post.
All you have to do is target the selector for your button and set the white-space property to ‘nowrap’.
So:
a.your-button {white-space: nowrap;}thank you so much,
please can you make a video
I have one: https://www.youtube.com/watch?v=5R_04UIMkJM
There are also two videos just on styling tablepress with CSS if you search my channel.
Can you format the width of a table and center it on the page. for example give a width of 600px and center it on the page ?
Sure! You might need to add additonal selectors like a class to override default styles, but here’s the basics:
table {
max-width: 600px;
margin: 0 auto;
}
The auto-margin (left and right) is what centers it. You can change the first margin parameter (top and bottom) to be whatever you want for spacing above and below the table.
Great article, thanks.
Can you use CSS in TablePress to change the color of a cell based on content? So if a cell has a value > 0, that cell is highlighted? The table rows change weekly, trying to to set a style based on row/column values.
With pure CSS, no. You could use Javascript to get the value of each cell, compare it to some range you specify and then add a CSS class to the TD element based on the comparison. That might be slow on large tables. Another option might be a PHP filter to run the comparison and add the class when the table is built (modify Tablepress with a filter). If the filter / hook exists (it probably does) you could likely get a dev to code this for a reasonable price on upwork.
The DIY option would be to add an HTML div around each number in the table. Then you could apply CSS rules to that div based on ta class, remove the padding on your table cells so the div takes up the full dimensions of the table cell. Obviously this is very tedious for a large table. A programmatic solution (like the custom PHP method) is probably best.
If you’ do get this built and would like to share the code, I’d love to add it to the article! It’s a really useful bit of functionality that lots of people could benefit from.
Thanks Man, your videos are so in-depth, I just subscribe.
I have a question!
Must everything be done using CSS?
Because am just a content writer and I may forget all these lines of code for customizing my tables.
There are some table plugins that can be edited visually, such as WP Table Builder Pro
But all you really need is a couple CSS tweaks to make Tablepress look custom. Just change the header color goes a long way. I may release some full templates for tablepress in the near future.
se puede que al momento de buscar se ponga fondo de color en todas palabras encontradas en TablePress usando CSS? Gracias
Creo que es posible con Javascript. Pero no puedes hacerlo con CSS.
Great instruction. Would you be able to share any tips on tablespress/css spacing for mobile devices? My tables don’t look good on smaller devices. Thanks!
What specifically are you looking to change about the tables on mobile?
How can i set up this only to table id=18?
.tablepress.yourclass .odd td {
background-color: #f4f4f4;
}
.tablepress.your-class .even td {
background-color: #c3ffe5;
}
replace
.tablepress.yourclasswith.tablepress-id-18for every rule.I have a Tablepress column with aircraft serial numbers in a nn-nnnnn format (example: 44-83525) that is presented as a hyperlink phone number in the table. Is there code I can add to prevent these numbers as being interpreted as phone numbers?
I can’t reproduce the issue on my own site, so there’s a good chance it’s not Tablepress that is causing the issue. Perhaps your theme has some javascript that is adding markup on the front-end?
Thanks for looking but even in my query above, my Safari browser is trying to offer the serial number as a phone number so I don’t think it is just the theme. Curious.
It appears this is Safari-specific.
This thread on stackoverflow has several fixes that should work for your. The zero-width joiner option might be the simplest fix.
Just saw this…thanks much.
How can i disable sorting option for all tables ?? Any css code ?
Just uncheck the option to use the ‘datatables’ Javascript library in the settings for each table. You can also use this extension to remove the datatables option from all future tables:
https://tablepress.org/extensions/datatables-off-new-tables/
Regards Matthew.
Truly awesome and helpful video, but still I have issues with a media query.
When I insert the codes, it removes the columns even on my desktop not just on mobile.
Can you give me some advice to overcome this issue?
Thanks in advance
You just have to make sure your media query is formatted properly and the code you want to run on mobile-only is inside the media query. If you’re targeting small screens with your rule, make sure to use max-width (not min-width). So
@media screen and (max-width: 600px){*/your rules here */}I am using tablepress for a 7×10 table and meanwhile it looks ok on pc and tablet, in mobile it doesn’t shrink. I tried using the TablePress Responsive extension but no luck. I would like my table to shrink on mobile instead of scrolling, is there any way to do this with TablePress?
Sure, but you can only shrink it so much. The easiest methods are to reduce padding in the cells and drop the font size. You’d use a media query to do this.
If that’s still not enough, you can hide less-important columns like this (use inside a media query):
.tablepress .column-3 {display: none;}Hi. Is there any way of conditionally formatting the colour of cells according to their value?
Thanks
You’d need JavaScript for that. Or switch to a paid plugin like NinjaTables which has this functionality built in.
Hello, how to set the width of the one column with sorting option.
.tablepress-id-3 .column-2 {
width: 100px;
}
This works only with disable sorting.
Thank for all your tutorial!
I don’t have any issues using CSS with/without the datatables library active. Try using max-width or min-width instead of a fixed width. You can also add more specificity to the rule or add !important to make it override a conflicting rule.
my table unable to center, css:
.tablepress {
margin-left: auto;
margin-right: auto;
}
how to centered all table in post page
I’d have to take a look at your site to know for sure. But if your table width is less than the container around it, margin-left: auto; and margin-right: auto; should center it. I’ve tested it on my own site and it’s working. If you’re using the datatables JavaScript module, that may change things. You might need to center the wrapper div instead of the table itself, or else make the wrapper full-width.
Hello Matthew,
I imported an exell-file into tablepress and I am trying to set just a 1 px black outline border all around the table (NOT around the internal cells) …but I am a newbee and cant’t find the correct CSS lines…
Can you please help me ?
You would just use the id of the table itself. So if your table has an ID of 5, you would right a rule like this:
#tablepress-5 {
border: 1px solid black !important;
}
The ‘!important’ is optional and probably not necessary.
If you want to this border on ALL tables, not just a specific one, use a rule like:
table.tablepress {
border: 1px solid black !important;
}
My table has a column of percentages in excel that the imported Tablepress table shows as decimal numbers like 0.000178569
Is there a way to get tablepress to reformat them back to percentages like 0.02% ?
I just started using Tablepress and am pretty clueless.
Not really. It’s better to get the data formatted correctly in excel, then import to Tablepress. It is possible to do rounding with JavaScript but you’d likely need a developer, and it might require custom code for each table.