Tables and Grids

Create a table or grid to organize content on your page.

Organizing content on your page can often be facilitated by placing it in a table or grid. This is useful for organizing content involving numbers, dates, locations, etc., but is also useful for giving your page a varied way of presenting information.

When considering putting your content in a table or grid, ask yourself if this is the best way to present the information, as well as if the content will read well and look presentable to a visitor on your site (especially with mobile devices).

Tables vs Grids

When editing a page in Plone, in the text editor's menu bar, you have the option to insert a table or grid. Although both options have different names and ways to add them from the toolbar, both operate the same way, and their differences are mainly cosmetic.

See the screenshots below for what a plain grid, fancy grid (listing) and table look like.

Screenshot of three grids. The Plain Grid has plain lines around each box on the rows and columns. The Fancy Grid has the same plain lines but alternates between shadowed rows and clear rows. The Table has lines that are not visible when saved.

Create a Table

If you wish to create a table, you can do so via the Table dropdown menu in the text editor toolbar. If you wish to create other grid varieties, follow the steps for a Plain Grid below, noting to insert your desired grid type when we come to that step. 

Create a Grid

All grids are created the same way, this example is for a Plain Grid.

To create and configure a Plain Grid, follow these steps:

  1. While editing your page, go to the text editor section (TinyMCE), and place you cursor in the area where you want your grid to be placed and select.
    Screenshot of a text editor area with the cursor placed on the page.
  2. Select the Insert dropdown menu in the toolbar and choose Template.
    Screenshot of the text editor toolbar with the "Insert" dropdown open and "Template" selected.
  3. In the next menu, select the Right Column dropdown menu and choose Plain Grid.
    Screenshot of the Insert template pop up box with the templates dropdown open and "Plain Grid" selected.
  4. You will see a preview of the Plain Grid. Click Ok.
  5. Your Plain Grid will now be in the text editor.
    Screenshot of the text editor area with the grid on the page. It has 3 columns and 4 rows.

Responsive Design

When web pages or content on a web page is able to render well on many devices or adapt to changing screen sizes and dimensions, we refer to this as responsive design. 

The width of grids you create in Plone are set to be responsive for all browsers and mobile device sizes. 

Configure Your Grid or Table

Although grids and tables have several properties and formatting options, in an effort to standardize table and grid appearance across the site, our design team has limited what you can do with each respective option. The width of grids and tables are set and cannot be changed.

Note: If you are trying to format your table in a specific way and the changes are not holding when saving the page, please note this is likely because those options are restricted. 

Once you have created your table or grid, here are the steps you can take with it:

Table Menu

After your Plain Grid has been inserted, click on it and a menu will appear.
Screenshot of a Plain Grid in the edit text box. It is selected and a menu with 8 options is shown. The first option, "Table properties" is selected.
This menu has the following options: (from right to left) Table properties, Delete table; Insert row before, Insert row after, Delete row; Insert column before, Insert column after, Delete column. 

These options are very straightforward: if you want to manipulate or delete the numbers of rows or columns, click in your grid, and choose that action. Experiment with these commands to see what you can do with your grid. 

Note: The Table Properties option has no usable functionality.

Merge Cells

An additional step you can take with your table is merging cells. You can merge cells horizontally or vertically. To do this, highlight the selected cells, and from the toolbar menu select the Table dropdown, then the Cell dropdown, and finally the Merge Cells option.
Screenshot of the text editor area with cells on a grid highlighted. The Table dropdown is open, the Cell dropdown is open, and Merge Cells is selected.

Screenshot of the text editor area showing the same grid with the cells that were highlighted merged into one cell.