Creating Responsive Tables

This document will cover the basics to creating 2, 3 and 4 column tables that will show up nicely on a mobile device. We have put into place some key words that you can use to create responsive tables. On your end, the key will be to follow these rules and examples on this page:

Creating 2, 3 or 4 column, responsive tables

1. Create a new page using the FULL PAGE 2 template
2. Insert any normal content without the use of tables (headers and paragraphs, etc.):
   
3. Click the table icon to create a new table:
   
4. Set the width of the table to 100% (important), leave the height blank, and set border size, cell padding and cell spacing to 0:
   
5. Set the number of rows and columns you'll need (we suggest between 2 and 4 columns)
   1. Set 2 columns for a 2 column table
      
   2. Set 3 columns for a 3 column table
      
   3. Set 4 columns for a 4 column table
      
6. Click on the advanced tab
   1. If your table is 2 columns, type two-columns in the field called Stylesheet Classes
      
   2. If your table is 3 columns, type three-columns in the field called Stylesheet Classes
      
   3. If your table is 4 columns, type four-columns in the field called Stylesheet Classes
      
7. Click ok to create the table (only create tables that have the same number of columns for each row)
8. Add images and/or text to a table cell
   1. To center an image, highlight it and then use the style option to apply the CenterImage attribute. If you make a mistake, delete the image and start over, rather than trying to reapply the style.
   2. To Center the text, highlight the text only and use the centered text button.

DO and Don't to creating Responsive Tables

1. Place images and text associated with each other in the same cell in the same row. Do not create a row of images, and then a 2nd row below that to place the text.
2. Use Key Class names provided to create 2, 3 and 4 column tables
3. Make tables 100% wide and do not use pixel based widths
4. Each Responsive table should only contain rows with equal numbers of columns. Do not create tables where one row is one column and the next row is 3 columns, for example. Use a new table to start a new number of columns.

Visual Examples

Here is a CORRECT example of how to set up table rows and cells.

Here is an INCORRECT example of how to set up table rows and cells.

Here is a visual example of how to layout a page with multiple tables and multiple columns. The key will be to use new tables after HEADER and PARAGRAPH blocks of text.