Tables and Grids

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

Contact MCO

Configuring a table or grid, or deciding on how to organize your information, can be difficult. Please contact MCO if you require assistance. 

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.

different kinds of grids.png

Creating a Plain Grid

Because the differences between grids and tables are mainly cosmetic, and interacting with all varieties is virtually the same, we will focus on how to create and configure only a Plain Grid in this section. 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. 

Follow these steps to create and configure a Plain Grid:

  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.

    placing cursor for grid.png

  2. Select the Insert dropdown menu in the toolbar and choose Template.

    insert - template.png

  3. In the next menu, select the Right Column dropdown menu and choose Plain Grid.

    choosing plain grid.png

  4. You will see a preview of the Plain Grid. Click Ok.
  5. Your Plain Grid will now be in the text editor. 

    inserted grid.png

Responsive Design

When web pages and/or content on a web page is able to render well on many devices and/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. 

Configuring Your Grid/Table

Although grids and tables have several properties and formatting options, in an effort to standardize table/grid appearance across the site, our design team has limited what you can do with each respective option. For example, the width of a Plain Grid is set and cannot be changed; similarly, the width of a Fancy Grid (Listing) is different and also cannot be changed. 

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 have been disabled. 

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

  1. After your Plain Grid has been inserted, click on it and a menu will appear.
    table menu.png

  2. 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. 
  3. 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. Please note that the Table Properties option has no usable functionality.
  4. 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 Table --> Cell --> Merge Cells. 

    merge cell menu.png

    merged cells.png