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:
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.
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 feature rich. Sortable, Filterable, Importing, Exporting, Editing, Pagination etc.
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.
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.
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.
- 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.
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.
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.
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.
Our table is automatically paged. Users can choose page size.
Tablepress allows us to duplicate tables too. Just click the ‘Copy Table’ button to duplicate a table.
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" />
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" />
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.
Looking for the right web hosting solution for your website can be an intimidating task. Options nowadays are more diversified than ever, and each year brings new developments in the web hosting market. If you have no clue of what to look out for, you can find yourself overwhelmed with...
Content marketing continues to be one of the most valuable tools for today’s online businesses. With content, you can improve your chances of reaching your target audience, boost your search engine standing, and even unlock new opportunities for sales. The more content you produce, the more you can strengthen your...
User Experience (UX) is one of the most crucial factors to consider in web design. As the number of websites and applications in the world today continues to accelerate, businesses are under more pressure than ever to impress customers straight away. If a user visits your website and finds slow-loading...