Editor Widget Tables on Mobile Devices

On mobile, there may be tables with shorter text or fewer columns, and tables with more text or more columns.

 

Important Note

• CivicPlus works toward WCAG 2.0 AA accessibility standards and our websites are highly compliant when they go live. However, ongoing ADA compliance and maintenance is the customer's responsibility.
• The images in the examples below portray tables with text. Without being able to use the Editor widget's specific Table tool on this help center, the tables were recreated to be as close as possible.

 

 

Short Tables

Shorter tables often contain less text or fewer columns. These tables will display on mobile devices similarly to how they display on computer screens.

 

Example of a Short Table

Location	Field Rental Application Link	Amenities
Civic City Park	Example URL 1	1 soccer field
Plus City Park	Example URL 2	2 baseball fields

 

Issues that might arise:

• Text and words are stacked, and words can be broken up to fit the screen. A table with text in one or two lines on a computer monitor could easily turn into 3 to 4 lines on a mobile device.
• Words that are split up are not divided based on any English best practices. These can include splitting words at a syllable or adding a dash (-) 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.)

 

Go to Article Navigation

 

Long Tables

These tables are often altered and reoriented. The header row is applied to each column, and then the column is presented in a block.

 

Computer Screen Example

The following Computer Screen Example table reflects a table as it appears on a computer screen. On a mobile device, the table will reorient to resemble the Mobile Device Example.

 

Location	Field Rental Application Links	Amenities
Rita Reves Park	Team/League Sponsor Corporate or Organization Sponsor Individual or Family Sponsor	60-foot and 90-foot baseball, 1 soccer/lax field
Greentree Park	Individual or Family Sponsor Corporate or Organization Sponsor	Recreation field
Mill Park	Team/League Sponsor	2 baseball fields

 

Mobile Device Example

When viewed on a mobile device, a table should respond appropriately to fit the screen size and orientation. The column's header is copied to appear in front of each table data it applies to, and table data appearing in the same row is grouped in one of the table's cells.

 

 

The table reorientation resembles a bulleted list more than it does a table:

Mobile Device Example Table
Location Rita Reves Park Field Rental Application Links Team/League Sponsor, Corporate or Organization Sponsor, Individual or Family Sponsor Amenities 60-foot and 90-foot baseball, 1 soccer/lax field
Location Greentree Park Field Rental Application Links Corporate or Organization Sponsor, Individual or Family Sponsor Amenities Recreation Field
Location Mill Park Field Rental Application Links Team/League Sponsor Amenities 2 baseball fields

 

The table is still readable, but it might confuse someone when shorter tables stay in their desktop form on the screen, and longer tables require the person to scroll or change the layout on the same page.

 

This page looks clean and readable but long when viewed on the desktop browser. 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 Long Tables

• Reorientation is confusing if it coexists with shorter tables that remain in their original form
• The reorientation does not add a space between the table header and the table data.
• There is no clear and consistent visual line separating the information, which is usually an advantage of a table.

 

Go to Article Navigation

 

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, 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 remains compliant for users with disabilities.

 

Go to Article Navigation

 

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;">Add the Table's HTML code here.</div>

 

Here's an example of how that looks in the editor widget code view:

 

<div style="overflow-x:auto;">

<table style="width: 100%;">
<thead>
<tr>
<th style="width: 50%;">Location<span id="isPasted" style="white-space:pre;">&nbsp;&nbsp;&nbsp;</span>
<br>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 50%;">Rita Reves Park</td>
<td style="width: 50%;">60-foot and 90-foot baseball, 1 soccer/lax field</td>
</tr>
<tr>
<td style="width: 50%;">Greetree Park</td>
<td style="width: 50%;">Recreation field</td>
</tr>
<tr>
<td style="width: 50%;">Mill Park</td>
<td style="width: 50%;">2 baseball fields</td>
</tr>
</tbody>
</table>
</div>

 

Go to Article Navigation

 

In-Article Glossary

Review the Help Center Glossary, a comprehensive explanation of the acronyms, abbreviations, and company-specific terminology. The terms located in this section are listed alphabetically:

• ADA: Americans with Disabilities Act
• Lax: Lacrosse
• URL: Uniform resource locator
• WCAG: Web Content Accessibility Guidelines

 

Go to Article Navigation