Have lots of data that simply won't look good in a list? A responsive table might be the right approach.
When and When Not To Use A Table
Tables are best used for arranging data into tabular design - think rows and columns. A table makes sense when trying to organize data that would look best in a spreadsheet.
Tables should not be used solely for layout design. Tables elements semantically describe tabular data and using them for other purposes can breach accessibility standards.
Tables in Novi are responsive - they will not break the grid on mobile. However, if a table has too many columns, it will not look its best on smaller screens.
A longer table at desktop/large view:
The same table at mobile/small view:
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 the following in mind:
At mobile screen sizes, we’ve set a word break. This keeps the tables from getting too wide and breaking out of the grid.
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:
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
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
The row properties section allows you to set certain settings for certain rows - alignment, background colors, row type, etc.
Table > Row > Row Properties > Class
This class will default to white font and background color of your association's primary brand color.
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.
Table > Cell > Cell Properties > Class
Cell With Padding
This adds a 10px padding to a cell (or you can select all cells in the table to apply to).
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.
Not sure a table is right for the information you are trying to display?
Advanced Users (HTML knowledge required!) should consider using responsive bootstrap columns.
Reach out to Novi - we can help guide you. A custom layout may work great and our designers will be happy to work with you to quote this out to best fit your design!