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.

<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>

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.

<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>

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.

<style>
#columnone{
    background-color:red;
    }
#columtwo{
    background-color:green;
    }
#columthree{
    background-color:blue;
    }
</style>

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".

<table width="200" border="1" cellspacing="1" cellpadding="2">
 <tr>
  <td bgcolor="red">&nbsp;</td>
  <td bgcolor="green">&nbsp;</td>
  <td bgcolor="blue">&nbsp;</td>
 </tr>
 <tr>
  <td bgcolor="red">&nbsp;</td>
  <td bgcolor="green">&nbsp;</td>
  <td bgcolor="blue">&nbsp;</td>
 </tr>
 <tr>
  <td bgcolor="red">&nbsp;</td>
  <td bgcolor="green">&nbsp;</td>
  <td bgcolor="blue">&nbsp;</td>
 </tr>
</table>

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.

1. How wide you want this table to be, this one is 200 pixels.
2. The border or thickness of the lines on the table, this particular one is 1 pixel.
3. The cell spacing which is telling the browser that we want our cells to be 1 pixel apart on all 4 sides.
4. 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.

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?

<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>

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.

TablePress for WordPress Intro

Ok now finally you understand how a table works we can move on to WordPress plugin Table Press. If you did not read the above section you may want to do that so you don't get lost.  Here we go!

1. If you have not installed it yet install the TablePress WordPress plugin.  Make sure that you activate it after the install.
2. Create a table by navigating down on your dashboard to TablePress and click "Add New Table"
   • 
   • Give it a name and a description
   • Pick the number of Rows and Columns that you want. The example above was 3 rows 3 columns.
   • Click "Add table"
3. Now you will see your blocks appear, click inside the block you want to enter content into.
   • 
4. Now you can either start writing text or you can choose to insert media from your medial library.  You will have to click in the box again after you click one of the buttons circles in red.
   • 
   • If you just want to enter text with an image and links choose the advanced editor option. You will probably use this one the most.

Table Manipulation

1. As we go down on the page in table manipulation we can see that we can hide or show a table. This would come in handy if we have a table that is live on the site and are currently editing it. It would also be useful if we are writing about time sensitive information.
2. We can also duplicate the row we are on or insert a new one or delete a row all together.
3. In the bottom part of the table manipulation we can add multiple rows.
4. If we move over to the right hand side of table manipulation this has to do with the "columns" Remember the column above where I had one big row across the top and three underneath of it? Well that is where you would take care of something like this in "Combine Cells"
5. Once again as with the rows you can show or hide columns to the users on the front end.
6. You can also duplicate, insert of delete columns.
7. Finally you can add multiple columns.

Table Options

If we wanted to treat this table like it had a footer and a header we would tick the options available. This is also good if you plan on using your own CSS to style these elements. Watch the video for complete instructions. This is a detailed procedure with several steps. Here you can also choose to alternate the background color of rows. You can choose whether to highlight when the mouse hovers over a row. You can even choose whether to show your title and descriptions above and below the table. The important thin here is that you can edit the CSS for this table in the link "Custom CSS"

Features of the Data Tables JavaScript Library

Here are some nice features, let me number them

1. You can enable or disable the following features by ticking or unticking the first box.
2. You can enable sorting for your visitors so they can manipulate the tables themselves.
3. You can enable pagination which is also nice if you have a lot of content. They can page though your tables like a book. You can even choose how many default rows they will see when they first get to the page.
4. Another feature with the pagination is if you have a lot of content in the tables. Lets say that you had 100 rows but wanted to give your visitor control over how much content they see. You can do it here. They will see a drop-down box where they can choose how many rows to see at one time.
5. You can let your visitor know how many rows there are in the table they are viewing by clicking this option.
6. You can enable horizontal scrolling as well.

WordPress plugin Table Press styling the CSS VIDEO TUTORIAL

Easy Advanced More Advanced ColSpan and RowSpan

Q. Are there any alternatives to the TablePress plugin for WordPress?

A. Yes you can can manually do it yourself in the text view section like shown above. You can also try from the list of alternative WordPress plugins below

• Easy Tab
• WP-Table Reloaded
• Websimon Tables

Q. Is the TablePress plugin updated?

A. Yes and it is working fine on all the themes that I have. It seems like they are pretty good about updating their software. The software has been stable for all my websites.

Q. Can I insert pictures and embed video from YouTube with TablePress?

A. Yes you can. If you watch the video above you will see that you can embed code right into the tables. They also have a feature to make it easier for you if you are not code savvy.

Q. Will the TablePress Plugin interfere with any other plugins?

A. I have not had any issues with it interfering with any of my plugins. I use a lot of them on various sites and TablePress has always been stable.

Q. Will TablePress improve my SEO?

A. The content that you put into your tables is what counts. It is helpful to have a well structured site for SEO. When spidered the search engines will recognize that you have a table and it may be an indication that your site is organized.