Table, table, table. Tables are pretty everywhere, in all sites in the web. My guess is that 99.999% of websites have some form of a table. From those beautiful menus you admire to those football league standings. Some websites even use tables to list their content in a grid-like manner. Mmmh, think ecommerce products. Tables allow us to present data in rows and columns. At the intersection of a row and a column is a cell. Cells can show a variety of data types like text, links and images. It’s even possible to show lists of data in a table cell. Heck, we can even nest tables, show a full table in a given table cell. Clearly that shows how powerful and flexible they are. They allow us easily present 2D data, rows and columns.
What You’ll get in this lesson.
At the end of this lesson you’ll be able to create a table that:
- Is responsive.
- Can be filtered/searched and sorted.
- Can import from or export data to CSV,HTML,Excel or JSON file.
- Supports various data types.
- Can be embedded into posts,pages and widgets via shortcode.
- Supports Pagination etc.
We can have a simple HTML table or a responsive table. Anybody can easily create a simple HTML table. For instance look at the below code snippet.
<!DOCTYPE html>
<html>
<head>
<style>
th, td {
border: 1px solid green;
}
</style>
</head>
<body>
<table>
<tr>
<th>FullName</th>
<th>Country</th>
<th>Age</th>
<th>Position</th>
<th>Strength</th>
<th>Jersey</th>
</tr>
<tr>
<td>David De Gea</td>
<td>Spain</td>
<td>26</td>
<td>Goalkeeper</td>
<td>Sharp Reflex</td>
<td>1</td>
</tr>
<tr>
<td>Anthony Martial</td>
<td>France</td>
<td>21</td>
<td>Striker</td>
<td>Pace/Dribbling</td>
<td>11</td>
</tr>
<tr>
<td>Ander Herera</td>
<td>Spain</td>
<td>28</td>
<td>Midfielder</td>
<td>Work Rate</td>
<td>12</td>
</tr>
<tr>
<td>Marcus Rashford</td>
<td>England</td>
<td>19</td>
<td>Striker</td>
<td>Pace/Dribbling</td>
<td>19</td>
</tr>
<tr>
<td>Juan Manuel Mata</td>
<td>Spain</td>
<td>29</td>
<td>Midfielder</td>
<td>Intelligence</td>
<td>8</td>
</tr>
<tr>
<td>Michael Carrick</td>
<td>England</td>
<td>35</td>
<td>Midfielder</td>
<td>Passing Range/Positioning</td>
<td>26</td>
</tr>
</table>
</body>
</html>
The code snippet can give us this simple table:
HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/462835012.png” alt=”Simple HTML Table” />
Not so pretty isn’t it? The aesthetics part can be improved with a bit of CSS. However, more important is that it’s not responsive. It cannot adjust appropriately to a device’s screen resolution. This can lead to some data not being visible to the user. That’s bad. We should then use a responsive table. Responsive tables can ‘respond’ to the device’s width and height. This is important especially in this world that’s infiltrated with devices of all resolutions.
This then brings us to Tablepress. It’s one of the best wordpress table plugins out there. It enables us create and manage some powerful datatables.
Advantages of Tablepress.
There are perhaps dozens of wordpress table plugins out there. Why then have we decided to use Tablepress over others. Well, because:
- It’s easy to install, configure and use.
- It’s free.
- It’s feature rich. Sortable, Filterable, Importing, Exporting, Editing, Pagination etc.
- It’s highly customizable. We can easily change the look and feel of our table via CSS. We can also enable or disable javascript. Nobody is forcing us with all the features, we can enable or disable them depending on our needs.
- Regular updates. No wonder it has been rated 5-stars by almost 3000 folks.
So what next? Well, remember we said it’s a wordpress plugin. Let’s proceed to installation. My assumption is you have a working wordpress installation. It can either be hosted locally or remotely.
Installation
- Head over to the wordpress plugins directory. Type ‘Tablepress’ and hit enter. This requires internet connection.
- Click ‘Install Now’ button to install our plugin.
- Click ‘Activate’ to activate the plugin after installation.
HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/2082913971.png” alt=”Tablepress Installation” />
Well, our plugin is installed, let’s proceed to the configuration page.
Creating A New Table
Given that our plugin is installed, let’s create a new table.
- A Tablepress menu has been added to your wordpress dashboard menu. Click the ‘Add New Table’ menu item.
- In our ‘new table’ form, type the table name and an optional description. The table names will identify specific tables as we can create multiple tables.
HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/1113234008.png” alt=”Add New Table” /> Choose the number of rows and columns.
- Hit ‘Add Table’ button.
- Well our beautiful table is created in seconds. Now go ahead and type some data.
HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/1107182754.png” alt=”Table Preview” />
Options:
– You can choose to make the first row be the row header, just as I have done.
Editing Table Data
- We can edit our new table. Let’s add some data.
- Make sure you click ‘save’ to save the data.
- We can also preview the table. Note that when you preview, some features requiring JavaScript like sorting, filtering and pagination may not work. However, once we have added the shortcode to our page and published they should work.
HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/1448456603.png” alt=”Edit Table Data” />
Table Options
- You can set table options like whether to use first row as header and last row as footer.
- You can also set whether to alternate row background colors.
- If you have a custom CSS class you can include as well.
HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/879968292.png” alt=”Table Options” />
Manipulating the Table
There are various options for manipulating the table to your liking:
– Insert links and images by clicking the indicated buttons.
– You can also use advanced editor similar to one you normally use when editing posts. This means for instance that you can insert advanced data like code and images into table cell. First make sure you select the cell by checking both its row and column, then you click advanced editor button.
– You can hide or show a given a row or column. Don’t forget to select it first.
– You can duplicate rows or columns. You can also insert and delete rows and columns.
– You can also add rows and columns in bulk.
– You can combine cells as well. See the options below.
HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/1749222574.png” alt=”Table Manipulation Options” />
Datatable Features
Datatables.net is a very popular jQuery library among web developers. It allows us to easily make responsive tables with features like Sorting, Filtering and Pagination. Tablepress makes use of datatable to provide these features out of the box. However, given it is JavaScript, it’s optional. If you prefer a simple html table you can disable these features. In the settings options we can choose to:
- Enable or Disable Datatable completely.
- Enable or Disable Sorting, Filtering and Pagination only.
- Determine the number or rows per single page. You can allow the user/visitor to change the number of rows visible. This is a good practice as it gives users control over the amount of information they are comfortable taking in at a given moment.
HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/1777092747.png” alt=”Datatable Features” />
Including Table in a post/page
You can easily include a table created by tablepress in a post or page. This is easy:
– Copy the shortcode of the table.
– Paste it in the post/page editor. Make sure to choose the Text tab in your editor before pasting. If you paste it in the Visual tab, in some cases it can be formatted further, hence treated as a simple text.
– Publish your post/page.
This is what we get:
HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/1948410414.png” alt=”final DataTable” />
Take note of the following:
- We can sort data by any column.
- We can search/filter our data.
- Our table is automatically paged. Users can choose page size.
Duplicating Tables
Tablepress allows us to duplicate tables too. Just click the ‘Copy Table’ button to duplicate a table.
Exporting Tables
Tablepress provides a feature to export table into CSV, HTML and JSON formats.
– In the menu, choose ‘Export Table’ menu item.
– Choose the table you would want to export.
– Select the Export format: CSV, HTML and JSON.
– Choose whether it should be zipped.
– Hit ‘Download Export File’ button.
HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/763963198.png” alt=”Exporting Table” />
Importing Tables
It’s also possible to import data from a CSV, HTML, JSON and Excel file into a table built by tablepress. This is very powerful because we can easily input a lot of useful data into our table and show it in our site. For example, you can import football league standings, student results or some sales records. A huge time saver indeed.
Even better, we can import from different sources. Be it via File Upload, URL, File on server or even manually. You can then import into a new table, append into an existing table or even replace an existing table. You make sure you choose the import format.
HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/334196694.png” alt=”Importing table” />
Conclusion
I look at a plugin like Tablepress and am not surprised that it’s one of the most popular plugins out there. It’s very easy to use and very powerful. It meets most of our needs with regards to a table. It’s very customizable. I can easily, for instance, disable some of the features I don’t need and just create a basic html table. On the other hand, it allows me to easily make use of features like sorting, filtering and pagination without getting my hands full of grease. I can even give the user the capability to define his/her page size. The fact that I can not only type my data but also import makes it quite useful. Think those boring sales reports that you have to somehow feed into a webapp from excel. Besides, I can import directly from a URL. Think those football league results from some JSON data source. The tables it generate are beautiful too. However, you can also use you custom CSS classes. Tablepress is simply easy to use, flexible and powerful. It can meet most of our needs. Let’s therefore be creative and and make some beautiful tables.
Share this Article!
