Q. Can I name the table’s, rows, and columns to target them for CSS?
A. Yes, you took the words right out of my mouth. You can name them so you can target it with your CSS style-sheet. There are 2 methods that you can use.
Method 1 Using a style-sheet.
OK lets say that you wanted the first column to be red, the second to be blue and the third green. What you would do is give each of those columns an ID by tagging it like below. Noticed I gave each column a name. In the TablePress plugin you will do something like this so pay attention.
[code]<table width="200" border="1" cellspacing="1" cellpadding="2">
<tr id="columnone" >
<td></td>
<td></td>
</tr>
<tr id="columtwo">
<td></td>
<td></td>
</tr>
<tr id="columthree">
<td></td>
<td></td>
</tr>
</table>[/code]
Now I am done with the table I am ready to go to my CSS style sheet and target those columns. You can see an example below. This is by far the best way to manipulate your tables and in the WordPress TablePress plugin it is important that you understand this.
Here is a copy of the style-sheet CSS commands. We target id’s by putting the “#” sign in front of the name in CSS.
[code]<style>
#columnone{
background-color:red;
}
#columtwo{
background-color:green;
}
#columthree{
background-color:blue;
}
</style>[/code]
Here is the result.
Method 2 using a style within the tag.
We can do the above result in another way as well. I would not recommend this method unless you are only going to have one table that is unique and different. Even if you do you and you want to use the above method you can give the ID’s a different name and target them like that. I discuss this in detail in the TablePress plugin video tutorial. Ok lets say that we have just one table that we want to use and we don’t want to bother installing that TablePress plugin for WordPress. You can do that by giving the table itself commands within the tags. We do not have to have a style sheet because tables can display styles as well. Again here is the list of tags.
- table
- tr
- td
Here is the exact table as above with no external style sheet attached. Notice we are targeting the tables themselves and table commands, NOT CSS commands. The particular one we are using here to target the color is bgcolor=”the color”.
[code]<table width="200" border="1" cellspacing="1" cellpadding="2">
<tr>
<td bgcolor="red"> </td>
<td bgcolor="green"> </td>
<td bgcolor="blue"> </td>
</tr>
<tr>
<td bgcolor="red"> </td>
<td bgcolor="green"> </td>
<td bgcolor="blue"> </td>
</tr>
<tr>
<td bgcolor="red"> </td>
<td bgcolor="green"> </td>
<td bgcolor="blue"> </td>
</tr>
</table>[/code]
Here is the result once again.
About the Table Layout
I think its only good to mention that when you see this line <table width=”200″ border=”1″ cellspacing=”1″ cellpadding=”2″> this is telling your browser the following information.
- How wide you want this table to be, this one is 200 pixels.
- The border or thickness of the lines on the table, this particular one is 1 pixel.
- The cell spacing which is telling the browser that we want our cells to be 1 pixel apart on all 4 sides.
- Finally the cell padding for the inside of the cell. For instance if you had text coming right up against the edge and you wanted a little padding you would enter a number here.
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. 🙂