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.
Responsiveness
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.
Example:
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.
Put your cursor where you'd like the table to appear in the content, then go to Table > Table and select the number of rows and columns you'd like in your table.
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:
Table Properties:
The table properties section allows you to set certain settings for the table as a whole - spacing, alignment, background colors, etc.
You can either go to Table > Table properties in the editor bar, or, when highlighting a table you'll see a table toolbar with a table properties option.
Image Tables:
One option in the table properties is to add a Class to the table. This works well for tables that are meant to include images.
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
Note: If you originally created a table with 2 columns, but select Image Table - 3 Columns, your table will update to 3 columns. The class will override your original selection.
Row Properties:
The row properties section allows you to set certain settings for certain rows - alignment, background colors, row type, etc.
To update a row's properties, highlight the row of the table you wish to edit. Then go to Table > Row > Row Properties.
One of the options you will see in the Row Properties window that pops up is the Row's Class. This can be changed to headers or alternate background.
Headers
This class will default to 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:
The cell properties section allows you to make edits at the cell level for your table. To edit, highlight the cell(s) you wish to update, then go to Table > Cell > Cell Properties.
Add padding:
To add padding to a cell or set of cells, use the Class section of the Cell Properties window.
Select Cell with Padding as the class.
This adds a 10px padding to a cell (or you can select all cells in the 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.
To align items in the table to the top of each cell:
Select all cells in the table and go to Table > Cell > Cell Properties
Change the Vertical Align to Top
Customizations
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!