Using Tables vs. Grids

Tables and Bootstrap grids are useful tools for displaying information correctly. Using the WYSIWYG text editor can be complicated, this instructional page will help you navigate the strengths and drawbacks of using tables and grids.

Sample Bootsrap Grid

How to Create a Bootstrap Grid

  1. Create a Flexible Page
  2. Select the "Edit" Tab on the blue menu bar under the Title. 
  3. Scroll to the bottom of the page and insert any content that has the WYSIWYG Text Editor and select the Grid.
  4. Select the desired number of columns and enter the necessary amount of rows. This will create a grid in the text space.
    • Note: Once the grid has been created the amount of columns and rows cannot be changed.
  5. Save

Advanced Tip: To change the column size of the grid, edit the Source code and change the number in "col-md-6" to another number such as "col-md-4." More information about editing Source code of Bootstrap Grids is available here.

When to use a Bootstrap Grid

  • Organizing information in columns and rows (this section is organized in a Bootstrap Grid with 2 columns 1 row)
  • Mobile responsive
  • Adjustable images with text (responsive images)

Disadvantages of Bootstrap Grids

  • Can be difficult (especially modifying Source code)
  • Once the grid is created, the number of rows and columns cannot be changed
  • Only able to use the designated amounts of columns

How to Create a Table

  1. Create a Flexible Page
  2. Select the "Edit" Tab on the blue menu bar under the Title.
  3. Scroll to the bottom of the page and insert any content that has the WYSIWYG Text Editor and select Table.
  4. Enter the amount of Rows and Columns you would like in your desired table. Additional options to customize your Table are in the Fields section below.
  5. This will create a Table in the Text Area you have selected.
  6. Save

Advanced Tip: A common visual element to separate the information on the table is to add stripes. The most effective way to modify the table is to go into the Source code. Find the <div class="table-responsive"> area, this is the beginning of the code for the table. Directly beneath this should be <table class="table table-..." if you have filled out any other visual elements, if not insert the following code: <table class="table table-bordered table-dark table-striped"> to create a borders and stripes on your table.

The Sample Table above uses the code:
<div class="table-responsive">
<table class="table-striped table-dark"

When to use a Table

  • Displaying data that can be read as "if X, then Y" statements
  • Organizing many rows of information

Disadvantages of a Table

  • Not mobile responsive (the table may look weird on mobile devices)
  • Cannot change the amount of rows and columns after creating the table

Fields

  • Add Stripes: Allows you to add stripes between your rows and columns.
  • Add Hover Effect: Shades the rows of the table when the user hovers over the table.
  • Add Borders: Creates a thin border around the table
  • Compact Style Table: Makes the spaces of table smaller, good for larger information and fitting the table in a small area.
  • Headers:
    • First Row: Bolds and shades the top row of data in the table
    • First Column: Bolds the first column of the table
    • Both: A combination of both in the table at the same time
  • Caption: Creates a shaded line of text on top of the table