1 Star2 Stars3 Stars4 Stars5 Stars (37 votes, average: 4.73 out of 5)

TablePress plugin Tutorial WordPress styling the CSS

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.

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. ๐Ÿ™‚

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.
<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>
TablePress plugin Tutorial WordPress styling the CSS was last modified: November 23rd, 2018 by Maximus Mccullough

Subscribe To My YouTube Channel:

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Cool People Share:
tablepress plugin for wordpress

Pages: 1 2 3 4 5 Next

11 Comments

  • Brad Scott says:

    I have very little experience about tablepress. Just use it in one of my client’s project. It’s very Handy.

  • Tin says:

    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?

  • Liz says:

    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!

    • Liz says:

      I changed the borders color and no luck…

      • What is the name of your url where you are editing the table?

        • Liz says:

          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. ๐Ÿ™‚

  • diego says:

    great tutorial max! I have a question, is it possible to style the ColumnFilterWidgets for tablepress?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.