The questions and the answers
HTML tables are useful to display data on a web page or to create an email template. In all these cases, the Responsive Design experience is very complicated to display on all devices.
In order to make a HTML table Responsive Design, you have to make choices. And for that, the best is still to ask you the right questions. If you want / need to display fewer columns on smartphones, then you need to start by defining what are the essential information to display and what are the information will be most useful to your visitors. You will therefore have to define precisely:
- The most important columns to understand the content of the table,
- The columns that will be most likely to interest visitors.
What does differentiate a piece of information from another?
If you are looking for information line after line, what information would allow a person to quickly distinguish between two lines? This is particularly important when the lines are used in applications, for example.
Let's suppose you have a table that contains data about users. The administrator can select a user and edit their account.
On the larger screens, you could display data like user preferences, last login date, etc. But on the smallest screens, you just have to make sure that the essential information is displayed so that the administrator can select the right user.
On a larger screen, you can display multiple columns. You might even decide to use AJAX to retrieve the data from the detail page you built for small screens.
It all makes sense. We then use progressive improvement based on the screen size.
On the other hand, it is funny to note that when you start the project from a large screen view, users no longer understand why all the content does not display on the smallest screens!
I think it's a mental thing depending on the starting point. If we start to think from the point of view of the mobile, we do not limit ourselves. If on the other hand we start from a desktop computer screen, we unconsciously limit our options.
In my opinion, here is what is important when it comes to designing HTML Responsive tables :
- Will users understand the meaning of the table in all display contexts?
- Can users get all the information?
- Have you made sure that each data is accessible independently of the device?
It is your content that will dictate the best solution for your "Responsive Design" table. You just have to ask yourself the right questions.
The genesis of Responsive Tables, plugin for Joomla
For a client project, I had to display a table but this table and the data should be available also on mobiles. There are different ways to display HTML tables responsively nowadays. But in 2013, the Responsive Design wasn't so popular as today and the solutions weren't as easy to implement. Never mind, I have accepted the project and the challenge, I had to make it happen.
To be very honest, my first idea was to generate this feature with a Joomla extension. But before starting to code anything, I had to think how the plugin should work. For this project, the prerequisites were :
- The code shouldn't break the responsive layouts of the template,
- The display shoudn't hide any data,
- and in the case of the client's project, the user must be able to compare rows with a key column.
Here is a schema to summarize these criteria:
The idea is to change orientation of the table on small screens. A horizontal scroll or swipe is used to view more data. With this scenario, the table head is always visible (the key column).
Once the general guideline was drawn, I could start to write the code.
The code of the plugin
In fact, the code of the plugin is pretty simple. Let's have a look:
/* Mobile */
@media only screen and (max-width: 40em)
{
.responsive { display: block; position: relative; width: 100%; }
.responsive thead { display: block; float: left; }
.responsive tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
.responsive thead tr { display: block; }
.responsive th { display: block; }
.responsive tbody tr { display: inline-block; vertical-align: top; }
.responsive td { display: block; min-height: 1.25em; }
/* sort out borders */
.rt th { border-bottom: 0 }
.rt td { border-left: 0; border-right: 0; border-bottom: 0 }
.rt tbody tr { border-right: 1px solid #babcbf }
.rt th:last-child,
.rt td:last-child { border-bottom: 1px solid #babcbf }
}You notice the use of display: inline-block; on the rows (tr) and white-space: nowrap; on the body of the table.
I've added some classes to stylish the table with borders and margin. Et voilà !
And good news, it's a pure CSS solution!
The Joomla plugin Responsive Tables
This is the last step of this project and honestly, it wasn't the easiest for me. In 2013, I wasn't so familiar with the Joomla code and I had some help from the community to acheive this. I'm so glad that some people are so devote to the Joomla project so they don't hesitate to help newbies. Thanks to them.
In the case of this plugin, there are only 3 files:
- the manifest file
responsive-tables.xml: for the installation of the plugin in Joomla,
- the php file
responsive-tables.php: for adding the link to the CSS file in theheadof the Joomla pages,
- the css file
responsive-tables.css: for the CSS rules to apply.
Because I wanted it as simple as possible, this lightweight plugin doesn't need any parameter to set or any technical knowledges. Just install it, activate it and you're done !
Demo video
Joomla Extension Directory
The plugin "Responsvie Tables" is listed on the Joomla Extension Directory where you can review it.
Project page
Don't hesitate to take a look at the plugin project page and to try the plugin.
