I transformed an image mockup into a full TablePress template. Feel free to reuse this code in your own projects, just don’t repackage or sell it please.
You’ll also like: How to style TablePress with CSS (full tutorial)
Usage:
- Add classname ‘pricing-table’ to your TablePress table
- Make first row the header
- Make last row the footer
- Add the CSS code (below) to your theme or directly to TablePress custom CSS
Freebies
- Table Demo
- CSS Template
- Icons (external link)
Demo Table
Basic | Standard | Advanced | |
---|---|---|---|
$9.99/m | $29.99/m | $49.99/m | |
Feature 1 | ![]() | ![]() | ![]() |
Feature 2 | ![]() | ![]() | ![]() |
Feature 3 | ![]() | ![]() | ![]() |
Feature 4 | ![]() | ![]() | ![]() |
Refund Policy | 100% guaranteed | 100% guaranteed | 100% guaranteed |
Buy Now | Buy Now | Buy Now |
The CSS:
.tablepress.pricing-table thead th {
font-size: 25px;
text-transform: uppercase;
color: white;
border-radius: 10px 10px 0 0;
}
.tablepress.pricing-table th.column-2 {
background-color: #F5B923;
}
.tablepress.pricing-table th.column-3 {
background-color: #007C48;
}
.tablepress.pricing-table th.column-4 {
background-color: #026F96;
}
.tablepress.pricing-table .row-2 {
font-size: 22px;
color: white;
font-weight: 700;
}
.tablepress.pricing-table .row-2 .column-2 {
background-color: #FFCA00;
}
.tablepress.pricing-table .row-2 .column-3 {
background-color: #01B48D;
}
.tablepress.pricing-table .row-2 .column-4 {
background-color: #00AAC4;
}
.tablepress.pricing-table .row-1 .column-1, .tablepress.pricing-table .row-2 .column-1, .tablepress.pricing-table tfoot .column-1 {
visibility: hidden;
}
.tablepress.pricing-table td, .tablepress.pricing-table th {
text-align: center;
}
.tablepress.pricing-table tfoot a {
color: white;
text-transform: uppercase;
display: block;
background-color: #FFCA00;
max-width: 160px;
padding: 3px 10px;
border-radius: 100px;
margin: 0 auto;
}
.tablepress.pricing-table tfoot th {
background-color: white !important;
border-radius: 0 0 20px 20px;
}
.tablepress.pricing-table tfoot .column-3 a {
background-color:#01B48D;
}
.tablepress.pricing-table tfoot .column-4 a {
background-color:#00AAC4;
}
.tablepress.pricing-table .column-1 {
background-color: #eee;
}
.tablepress.pricing-table td, .tablepress.pricing-table tfoot th {
border: 1px solid #ddd;
}
.tablepress.pricing-table td, .tablepress.pricing-table .pt-icon {
vertical-align: middle;
}
Code language: CSS (css)
Icons
I get most of my icons from 3 places:
- FontAwesome (free)
- IconMonstr
- Flaticon (free w/ attribution or paid)
In this video, I used free icons from Flaticon (I have a premium subscription)