Overview
A website is responsive when it automatically adjusts to display on mobile devices.
Tables are usually not responsive, which forces mobile users to swipe right and left to view a table that runs off-screen. School Loop's tables are now responsive.
This article details the process of adding responsive tables.
Process
Follow the steps listed below to make tables responsive:
Note:
-
Tables created in SLS2 are designed to be responsive.
-
Tables converted from SLS1 will be responsive as long as you apply the correct SLS2 format.
-
Tables with row and/or column headers respond differently than layout tables, so it is critical that you use the correct format for each table.
-
If you have converted pages from our old system over to the new system, you must format all of the tables as per the instructions below to make them responsive.
Format Tables
-
Select the Text Module with the table that needs to be formatted and right-click on the table.
-
Choose Table Properties from the menu that appears.
-
From the pop-up menu of table formats that appears, select the proper option for your table.
-
The solid black cells indicate header rows and columns. Use the No Header options for layout tables.
- With the new formatting applied, your tables will not only be responsive, but they will look better too.
Responsive Table Examples
Improperly formatted tables may not make sense in the responsive state, which is why it is important properly construct tables and apply the correct format.
Confirmation
Access the School Loop site from a mobile device and the tables will fit in a single screen without having to swipe left or right.