| WordPress

How to Use Tables in WordPress

Tables are very useful to present data, especially data related to numerical values. People find it easier to read and interpret the data (identify patterns and establish comparisons) when it is presented in a table layout so that relative complex information can be presented concisely.  

The TablePress WordPress plugin allows you to create and manage tables within your site. Keep reading to learn more about this module.

Step #1. - Install the Plugin

  • Click Plugins on your WP Dashboard. 
  • Search for TablePress.
  • Click Install Now.
  • Click Activate

How to Use Tables in WordPress - TablePress


Step #2. - Create a Table

  • Click Plugin page.

191202 tablepress 001

 

You will find an interface with 6 tabs: 

    • All Tables
    • Add new
    • Import
    • Export
    • Plugin Options
    • About
  • Click either the Add New tab or the add link to create a new table. 

191202 tablepress 002

 

  • Give the table a proper title.
  • Change the Number of Rows to 6.
  • Click Add Table.

191202 tablepress 003

 

  • Click on the Table ID textbox and change the name of the table. 

The system will prompt you to accept this change.

  • Click Ok.

 191202 tablepress 004

 

  • Enter the table data according to the image.

191202 tablepress 005

 

  • Click Save changes
  • Scroll up and copy the shortcode provided on top of the interface.

191202 tablepress 006


 Step #3. - Insert the Table

  • Create a post or a page and paste the copied shortcode.   

191202 tablepress 007

 

  • Click Publish twice.

191202 tablepress 0080

 

The table has some features by default. You can limit how many rows are displayed and you can search for data within the table with the search box above the table. Below it, you will see how many records are displayed, the total number of records, and a pager on the right side. The pager is not clickable in this example since we only have 5 records. 

Notice also, that you have the ability to sort the table, according to each one of its columns, by clicking on the header.

These options are all enabled by default, you can deactivate them on a per-table basis by configuring the Features of the DataTables JavaScript library.

191202 tablepress 008


Step #4. - The CSS Styles

As you can see the text of some of the “cells” of the table is broken. To fix this, you use some CSS. 

  • Click the Plugin Options tab.
  • Check the Custom CSS checkmark.
  • Add this code:
.tablepress-id-staff th,
.tablepress-id-staff td {
white-space: nowrap;
}
  • Click Save Changes.

191202 tablepress 009

 

  • Reload the post and take a look at the table.

191202 tablepress 010


Step #5. - Combine Table Cells

To combine 2 cells in a row, you use the colspan option.

  • Click Combine cells > in a row (colspan)
    • This will disable the DataTables library
  • Click OK

191202 tablepress 011

 

  • Click on cell B1.
  • Change the text in cell A1
  • Click Save Changes

191202 tablepress 012

 

  • Refresh the page and take a look at the table.

Step #6. - Insert an Image

Images can be embedded into table cells. Make sure, that the image has an appropriate size, for example 75px x 75px.

  • Click the Insert image button on the Table Manipulation section.
  • Click Ok on the dialog box.
  • Click the cell, in which you want to embed the image.
  • Upload the image.

191202 tablepress 013


Step #7. - Row/Column Insertion and Deletion

Besides each row and column, you will see a checkbox. This checkbox is there to mark either row or column and apply 5 different actions:

    • Hide
    • Show
    • Duplicate
    • Insert
    • Delete

191202 tablepress 014

 

Try these options for yourself, click Save Changes and see what happens with the published table. 


Step #8. - Export the Table

The table can be exported in various formats.

  • Click the Export tab.
  • Select the Table ID on the right.
  • Leave the default CSV format.
  • Click Download Export File.

191202 tablepress 015

 

  • Open the downloaded CSV file with your preferred spreadsheet application.
  • Add 2 more columns with relevant data inside them.
  • Save the local file with the same name (override).

191202 tablepress 016


 Step #9. - Import a Table

  • Click the Import tab.
  • Check File upload as import source. 
  • Click the Upload button and double click the file.
  • Check Replace existing table.
    • Make sure you are replacing the right table.
  • Click Import.

191202 tablepress 017

 

This will take you to the table edit screen where you can make further editions if you wish to. Let’s give the table a final touch on the header. 

  • Click Plugin Options
  • Add this code:
.tablepress-id-staff tr th {
background-color: darkblue;
color: white;
}

191202 tablepress 018


  • Click Save Changes

Take a look at the final result.

191202 tablepress 018

 

Other Tips about tables

  • Tables should not look like spreadsheets.
  • Entries should not have borders; however, horizontal lines are a very effective way to separate the table header from its body, and also to create a visual separation between rows. 
  • The title should be clear enough for the user to understand the content of the table.
  • Always try to provide the source of information when fetching data over the internet. 
  • Tables are useful to show values, which can support arguments.

I hope you liked this tutorial. Thanks for reading!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.