Add a Responsive Condensed Table (for Data)

A condensed table is primarily used to display data. It will contain a black border around the table and light gray borders around its cells, both in the public and admin views. When viewed responsively, the cells will condense and tighten together to maintain the table structure within the reduced screen size. If you plan on using a table for regular content, please view the article for stacking tables.

Desktop Admin & Public View

Basic Settings

  • Select the 'Table' icon from the toolbar.
  • Enter the appropriate number of Rows and Columns.
  • Adjust necessary properties:
    • Headers will apply a bold style to your first RowColumn or Both.
    • Border Size refers to the width of the border of the table; the default setting is "1". Change to a higher number if desired.
    • Alignment refers to the positioning of the table within the page.
    • Width of the table should be entered as a percentage (%). For instance, a table that will take up the entire width of a page will be entered in as "100%".

    Make sure to place in the "%" symbol.

    • Height is automatically determined based on the number of rows. It isn't necessary to enter a number into this field. Only do so if you have a specific pixel height that the table must be limited to.
    • Cell Spacing refers to the the spacing between cells. (Can only be entered in whole numbers.)
    • Cell Padding refers to the padding between the content of your cell and the cell wall. (Can only be entered in whole numbers.)
    • Caption is a title which will appear at the very top of the table.
    • Summary will not appear on your page, but displays in the HTML code for the purpose of speech synthesizers and braille reading machines that aid visually impaired users. This should be a general description of the content of your table.

Responsive View


Still need help? Contact Us Contact Us