On mobile, there may be tables with shorter text or fewer columns, and tables with more text or more columns.
Skip to Topics in This Article
Tables with Shorter Text or Fewer Columns
Tables will display on mobile devices similarly to how they display on computer screens.
Issues that might arise:
- Text and words are stacked, and words can be broken up to fit the screen. A table that might have text in one or two lines on a computer monitor could easily turn into three to four (3-4) lines of text on a mobile device.
- Words that are split up are not divided based on any English best practices (i.e., splitting words at a syllable or adding a hyphen (-) to indicate that the word has been broken.)
- It is not entirely possible to decide which tables will stay in their monitor table form on a mobile device because it differs between devices, screen size, browser, and text size setting (controlled by the user.)
Tables with More Text or More Columns
These tables are being altered and reoriented. The header row is applied to each column, and then the column is presented in a block.
Example - Computer Screen
The above example is a table from a computer screen. On a mobile device, the table will reorient to resemble the below example.
Example - Mobile Device
The header is copied to appear in front of each piece of table data it applies to, and table data that appears in the same row is grouped together. This table reorientation resembles a bulleted list more than a table.
This table is still readable but causes confusion when tables with less text remain in their monitor form and tables with more text and that prompt reorientation appear on the same page.
Viewed on the webpage, this page looks clean and readable, albeit long. On a mobile device, however, two tables that convey similar information have been oriented and transferred very differently because of the amount of text they contain.
Issues With Longer Tables
- Reorientation is confusing if it coexists with shorter tables that remain in their original form
- The reorientation currently does not add a space between the table header and the table data.
- There is not a clear and consistent visual line separating the information, which is usually an advantage of a table.
Recommendations
- To avoid confusion, it is recommended that customers do not have multiple tables of varying lengths on a page. The problem is tables with a lot of text in them - so simple tables containing only a few words and numbers should be fine.
- Complex tables containing big blocks of text can be created in word, marked with the correct code for screen readers, and then converted to PDFs so that their formatting stays consistent between all mobile and desktop devices and also remains compliant for users with disabilities.
Mobile Responsive Code
To make tables in the Editor widget more mobile responsive, you can add the following code before the opening table tag.
<div style="overflow-x:auto;">
Here's an example of how that looks in the editor widget code view:
Feedback About the Article
Let us know what was helpful or not helpful about the article below.0 comments
Please sign in to leave a comment.