Have lots of data that simply won't look good in a list? A responsive, sortable table might be the right approach.

Creating A Table

If you're the type of person who likes to keep things simple, we recommend that you add your table by simply inserting one through our page editor. 

Once you've selected how many rows and columns your table will have, you'll see it on the page!

Tables in Novi are responsive, so this will ensure that your tables look good on all screen sizes. However, keep in mind that at mobile screen sizes, we’ve set a word break. This keeps the tables from getting too wide and breaking out of the grid. We recommend that you keep columns to a minimum, so that this looks best on all screen sizes. We also recommend as a design tip, that you don't include too many tables on one page, to keep things simple for members.

Editing Tables With Classes

From here, you have options on how to dial this table in. For a very simple table, simply start typing into your cells!

For additional editing, read below:

Table Properties:

The table properties section allows you to set certain settings for the table as a whole - spacing, alignment, background colors, etc.

Table > Table Properties > Class


Image Columns

  • For tables that include images, go to Table Properties > Class (see screenshots above) and select one of the Image Table - # Columns
  • This goes up to 5 columns, so that images are not tiny on smaller screens
  • This adds 10px padding on each cell

Row Properties:

The row properties section allows you to set certain settings for certain rows - alignment, background colors, row type, etc.

Table > Row > Row Properties > Class

Headers

  • This class will default to a white font and background color of your association's primary brand color.

Alternate Background

  • Adding this to a row will give it a background color of #444444 (a gray color). A great way to help break up tables with lots of content.

Cell Properties:

Table > Cell > Cell Properties > Class

Cell With Padding

  • This adds a 10px padding to a cell (or you can select all cells in table to apply to).

Other Tips:

To get the widths even between columns, you can:

  • Select all cells in the table and then go to Table > Cell > Cell Properties
  • Change the width - for 2 columns, you'd change it to 50% 
  • Then select Class > Cell with Padding

Be sure that text in your cells does not have extra code in it, or you can run into a centering issue.

Did this answer your question?