Solving the HTML Table Issue with Mobile Devices

HTML Tables are great for displaying data, but when it comes to showing that data on a mobile phone, there becomes usability issues that seem obtrusive even with some of the solutions some of the developers out there on the Internet have created. Some of these solutions where to have the tables scroll to right to show more of the data on long width tables for mobile devices or small screen sizes or toggle and hide specific sections.

My approach to solving this was to use JavaScript and jQuery scripting languages to create a plug-in that would create a two row table and append the tables header titles to the left of the table and append the first row of data to the right of it using a navigation to show the next and previous rows of data, without having to even scroll the screen. This would enable the table to be mobile friendly hence why I called the plugin “mobiTable”. mobiTable speeds up development and simplifies table issues for developers so they can work faster and smarter. For more info on mobiTable, see the plugin page here.

** Please note that mobiTable is only for raw data tables. Meaning it won’t work with tables with images or HTML tags embedded.

Author: Mark Hawkins

Sr. Graphic Designer, Web Developer and Animator fueled by passion for design, development and some RockStar energy drinks.

Leave a Reply

Your email address will not be published. Required fields are marked *