Some other interesting table layouts
Ok lets say that you want one long row across the top and then 3 underneath it. How would you do this?
Well how about I show you the code? They key here is that we took out 2 table columns above and used the {colspan=”3″} to let the webpage know that we want to stretch that particular row out the full 3 spaces. Pretty cool huh?
[code]<table width="200" border="1" cellspacing="1" cellpadding="2">
<tbody>
<tr>
<td id="columnone" colspan="3" align="center"></td>
</tr>
<tr>
<td id="columnone"></td>
<td id="columtwo"></td>
<td id="columthree"></td>
</tr>
<tr>
<td id="columnone"></td>
<td id="columtwo"></td>
<td id="columthree"></td>
</tr>
</tbody>
</table>[/code]
Here is a list of table commands that you can use. All the commands are on the left. Here is a full property list for tables and CSS commands that you can use within your tables.
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. 🙂