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.

Step #2. – Create a Table

• Click Plugin page.

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.

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

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

The system will prompt you to accept this change.

• Click Ok.

• Enter the table data according to the image.

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

 Step #3. – Insert the Table

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

• Click Publish twice.

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.

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.

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

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

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

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

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

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.

• 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).

 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.

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

• Click Save Changes

Take a look at the final result.

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!