TablePress plugin Tutorial WordPress styling the CSS
Welcome to the TablePress plugin Tutorial WordPress styling the CSS. You will be guided step by step on how to use this very useful plugin for WordPress. One of the challenges to WordPress is the structure of content when you want things in certain areas on pages or posts. In order to make it look clean and crisp sometimes you need to use what we call tables. As with any plugin once we download it we need to know how to use it. As a developer myself I know there are plugins that are downloaded that are very cumbersome to use. The TablePress plugin has a learning curves but what you get by learning it will far outweigh other methods of doing so.
Q. What is a table in a webpage?
A. The first thing you need to get in your head is what a table is on a website. A table will remind you of a database layout where you can put content in each one of the boxes. Below we see a table but what you don’t see is the code making that table.
Here is the code making that table above. Lets look at it piece by piece so you can understand how tables work.
- Notice how it starts and ends with a table tag “<table></table>”.
- Then within the table tag it has “The Row” <tr></tr>
- Then in each row we have “The Column” <td></td>
- In the example below we have a table with 3 rows and 3 columns.
[code]<table width="200" border="1" cellspacing="1" cellpadding="2">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>[/code]
11 Comments
I have very little experience about tablepress. Just use it in one of my client’s project. It’s very Handy.
Hi Brad, Yes I have used it several times. Its great for those hard layouts in WordPress. Thanks for the comment!
Hi Maximus, thanks for posting the blog & video tutorials, they’ve been very helpful! Question regarding where to place the CSS code: on your video, you pasted the CSS code on your WP’s Twenty Twelve stylesheet & not under TablePress ‘ Plugin Options tab in the Custom CSS field. How did you go about identifying the Twenty Twelve stylesheet is the correct place to paste the code & why isn’t the Custom CSS field used instead?
Sure thing, glad I could help! 🙂
Hi,
I am new on wordpress and css, but I would like to know how the table can just take the style from my style.css? First the table header, I couldn’t make it work as I wanted,I add this to my newtable class on Plugin options
(Also I added the newtable name on the table extra css classes):
.newtable .row-1 {
font: normal normal bold .85em/25px Arial, “Helvetica Neue”, Helvetica, sans-serif;
padding: 4px 2%;
text-align: left;
border-top: 1px solid #f4f2e7;
border-bottom: 1px solid #f4f2e7;
border-right: 1px solid #f4f2e7;
font-size: .9em;
color: #f3f0e0;
background: #635a52
}
and the font color never appeared right.
Then I would like a border between all the columns and I tried adding the following but the table just didn’t take it:
.newtable {
margin: 0 0 25px 0;
width: 100%;
background: #f4f2e7;
border-left: 1px solid #f4f2e7;
border-right: 1px solid #f4f2e7;
}
I appreciate any help, I am using the My Life theme…
Thanks a lot!
I changed the borders color and no luck…
What is the name of your url where you are editing the table?
Thanks for your advice, I am installing the custom css and try.
I was updating directly on the style.css and didn’t work, so I wrote the code directly on the plugin options, on the custom css section.
To be able to see cell borders I added something I don’t like too much, but worked. In my page I found the column-1 class (added by the table press plugin), and then I added the following on the custom css:
.newtable .column-1,
.newtable .column-2,
.newtable .column-3,
.newtable .column-4,
.newtable .column-5,
.newtable .column-6,
.newtable .column-7 {
border-top: 1px solid #f4f2e7;
border-bottom: 1px solid #f4f2e7;
border-right: 1px solid #f4f2e7;
}
Hi Liz, install a plugin called custom css and enter the code there. This way if your theme ever has any updates you will not over ride your changes. Also the custom css plugin will be executed first so it will over ride any css that you have in the theme. I hope this helps. 🙂
great tutorial max! I have a question, is it possible to style the ColumnFilterWidgets for tablepress?
I believe so. Just target it like you would anything else. Give it an ID or a class then start styling. 🙂