Tables and Grids
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.
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:
- 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.
- Select the Insert dropdown menu in the toolbar and choose Template.
- In the next menu, select the Right Column dropdown menu and choose Plain Grid.
- You will see a preview of the Plain Grid. Click Ok.
- Your Plain Grid will now be in the text editor.
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.
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.
