HTML tables are a great thing to showcase data in a simple tabular form. Over the years with incorporation of divs and css, tables has become mostly obsolete in terms of designing websites. But it is still a very useful thing when you need to showcase a bunch of data in a easily understandable form. One of the major problem with HTML tables is that it is extremely hard to make them responsive. In fact that was the main reason the whole web development industry moved towards using divs rather than using tables. A few weeks back when I was working on developing a few features on my site, I was wondering if there is any easy way to make html tables responsive. But after searching on internet the most solutions I’ve found was either using some sort of jQuery or the end result is not looking so beautiful.
But when we work with WordPress a ton of scripts gets automatically pushed by WordPress itself, then comes the scripts which are pushed by themes and plugins. Though there are smarter ways to write code so that the scripts gets pushed only when a certain feature is used which take advantage of that script, but it is extremely hard and time consuming to write code that way. That is why most theme and plugin developers just pushed them anyway, regardless of your use case.
Some might argue, that what if we include the scripts at the end of our page or load them asynchronously? You see, the reason it s a good coding practise to load scripts at the bottom (before the
</body> tag) or load them asynchronously, so that your textual contents can load at first before the js files and your users don’t have to see a blank white page for long time. But this doesn’t solve the actual rendering time issue. Even tough you add your scripts asynchronously at the bottom of the page, but still your site is going to keep loading until all js files are loaded and fired properly.
Anyhow, enough talking, let’s begin with the code. Here in this article, first I will show you what code you need to make responsive table. Then I will show you how to add them in your site for both advanced and non-advanced WordPress users. So, let’s begin…
Let’s create a HTML table first
I’m pretty sure most of the people who are reading this article already know how to create a HTML table, but in case if there is someone who doesn’t have any HTML coding experience, here is how you create a table inside HTML. Now as WordPress generate contents dynamically via themes, most of the basic HTML parts you don’t need to add inside your page/posts as they will automatically be generated by your theme. So, just focus on the table code, which you need to add inside your text editor.
While adding the HTML for table inside your WordPress visual editor, make sure you use the “Text” editing mode, and not the “Visual” mode. Otherwise things will not work.
Now if you are already familiar with HTML table codes, the only thing that you need to look in the above code is the class that I’ve assigned to the table block called responsive. make sure you add the responsive class to each of your table element to make it responsive.
Now it’s time for the Responsive Table CSS
For advanced WordPress user
If you are an advanced WordPress user, you might already be using a child theme. So, just head over to the
style.css file of your child theme and add the above piece of css inside it. That’s it. You are all done. If you have some sort of WordPress caching plugin enabled, make sure you have cleared your cache so that the new code can reflect on your site.
For non-advanced WordPress user
If you are a non-advanced WordPress user, first go inside your theme settings (especially if you are using a paid theme) as most paid themes offer an option inside the theme settings to add custom css code. If your theme doesn’t provide a place to add your own custom css, check if you are using the Jetpack plugin by Automattic (the guys who have actually created WordPress). If you are using Jetpack, then hover on the Jetpack within your WordPress admin panel’s left vertical menu and click on Settings. Now enable the custom css module that comes with Jetpack. This will give you an option to add your own custom css inside your theme.
If you are not using the Jetpack plugin inside your WordPress site, there are plenty plugins like Simple Custom CSS, installing which will allow you to add your own custom css inside your website. So, after installing Simple Custom CSS, head over to Appearance → Custom CSS (inside your WordPress Admin panel) to add the above css I’ve mentioned.
For non-WordPress users
To use the responsive table feature, you not necessarily have to be a WordPress user. If you use some other CMS for your website or custom PHP or just simple HTML, you can still make your HTML tables responsive just by adding the above CSS inside your website and by making sure you always add the responsive class to your tables.
After all this if you are looking for an example table where you are see how well the responsiveness works, try to load up this article on your smartphone or tablet and checkout the below example responsive table:
|Student Name||Physics Marks (100)||Chemistry Marks (100)||Mathematics Marks (100)||English Marks (100)||Programming Marks (100)|
If you are checking out this table over a portable device like smartphone or tablet, this is how it will look after becoming responsive. As you can see none of the design element of the table has been altered after being responsive and it doesn’t bring any strain over the website rendering time either. 🙂
Why not just use Bootstrap instead?
Yes, bootstrap is a great designing framework, but you have to understand that not all websites and WordPress themes uses bootstrap as a design foundation. The majority of sites (specially WordPress) don’t run it. So, for those sites you must need a way to achieve responsive tables. Now if you are running a site which is designed using bootstrap framework then you can easily create responsive tables by wrapping any
.table-responsive. But this article is for all those non bootstrap users who struggles with the responsiveness of their HTML table.
So, let me know guys if this small piece of code helped you in anyway. I would love to hear your thoughts on this in the comment section below. Also if you want you can connect with me over twitter with my twitter handle @iSaumya. I’m looking forward to hear your thoughts on this and if this small piece of code helped you anyway. 🙂