Tables are part of the HTML specification, so they are supported in mobile devices. However, working with the space, makes for some interest viewing.
Most of the time, you first have very tall cells as the browser tries to fit all of the columns. Then you end up having to scroll your table left and right, which can make reading very difficult.
Dynamically Hiding Columns
jQuery Mobile provides a different way of solving this problem. First is you can let the user choose which columns get displayed. The second will hide columns based upon how small the display is.
To choose which columns get hidden first, you, as the designer, get to specify the importance of each column. As the size gets smaller, the less important columns, disappear from the display. This continues, till the important columns disappear, until only the critical columns remain.
To do this, you need to set two data- attributes, the data-role, and the data-mode.
Then, in the th cells for the column headers, you specify an optional data-priority value. This value will accept a number between 1 (highest priority) and 6 (lowest priority) to let jQuery Mobile know which columns it should try to keep.
Toggling Columns
To use the column toggle, you have to specify the columns you want to always appear, versus those that the user can control. To do so, you will use the data-priority setting.
If a data-priority value is not set, then that column is considered required, and will always display. Example:
I'm critical. Can't be removed I'm very important I'm somewhat important I'm not important. Remove me early.
If the user wants the ability to see a column, they can, via the columns button choose which will appear. Clicking on the button creates a pop up which shows which columns are visible for a user, and which ones they can see later. They simply need to click on the column header names they wish to display.
This columns button will appear to the right, and above the table.
Using Reflow
Another way jQuery Mobile provides you to display your information, is through a process called reflow. In the data-mode attribute, if you specify reflow as the option, then it will adjust your table.
So instead of moving your data into smaller spaces, or hiding some of your columns it will instead move the data, so each cell gets its own row. This makes it easier to see/read you data.
It picks which columns to show and hide based upon the data-priority attribute. So while column toggle just looks for the attribute’s existence, reflow uses it to control the layout of the table itself.
The rest of your table definitions stay very similar, and can be seen in the example below.
Other Styling Options
Zebra Stripe
jQuery Mobile will help you zebra stripe a table. All you need to do is add a class called: table-stripe to the table itself. By doing so, it will automatically apply the zebra stripe method to your table.
Table Shadow
You can make your table appear to stand out from the page, by applying the “ui-shadow” class to the table.
jQuery Mobile Tables was originally found on Access 2 Learn
