mobiTable jQuery Plugin, now available for WordPress!

mobiTable is my first free responsive plug-in for WordPress that automatically rearranges your HTML tables into a much easier to navigate format for mobile devices. You can read more about it here on this post. mobiTable will soon be available at the WordPress Plugin Repository. Below is an example of the mobiTable WordPress plugin adjusted for Mobile.

If you like this WordPress plugin, please give me a like or share. If you have any issues or find a bug, please send me an email to support@markhawkinsdesigns.com.

mobiTable Plugin Mobile Example

ID Name Address Phone Number Email Occupation
01 John 4311 SW 21st Street, Miami Florida, 33144 305-2112 johndrocker@gmail.com Mechanic
02 Samantha 4001 NW 63rd Street, New York NY, 774232 335-6643 smainila@gmail.com Attorney
03 Fernado 6433 NW 93rd Street, Orlando Florida, 44321 325-4883 fernadoinorlando@gmail.com Police Officer
04 Bill 2022 Oakland Street, Los Angelas California, 99321 699-5532 surferbill@gmail.com Doctor
05 Mary 2311 Sunbay Ave, Carlton North Carolina, 118653 966-2211 mbellagirl@gmail.com Executive Managment
06 Maria 1123 Collins Avenue, Miami Beach, 32211 305-3476 mroscha@gmail.com Pilot

mobiTable Plugin

mobiTable Plugin HTML Table Code

mobiTable Plugin Settings

MobiTable WordPress Plugin Features:

  • Multiple table support
  • Custom Trigger Width
  • Table Theme Color Settings
  • Color Chart
  • SVG Arrow Icons

Installation and Setup

Download
Download mobiTable for WordPress Plugin here

DemoBox – a jQuery Plugin-Application for Simple Instructions

Lets face it, instructions accompanied by photos makes it easy for us all to understand how to do something. But even then, I’ve seen instructions that are cramped or cluttered and hard to follow because of the layout. Considering today we have mobile devices that most of us use to get to information, I decided to create a mobile friendly little app that uses a jQuery plugin script I wrote. This little app is small in width and showcases instructions step by step by clicking to the next step or previous step. This removes the clutter and keeps the user focused on that specific step. This is a free to use app/script and is best used for simple instructions. If you like it, please give me a like or share.

See a demo of it here | Download it here

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.