Table of Contents
Tables are useful for displaying information in an organized grid-like manner. For example, a size or pricing chart is often displayed in a table.
Note: Tables are best used for grid-like data. If you're looking to create side-by-side content on your page, we recommend the Columns element as a more flexible option.
How to Add a Table to Your Shogun Pages
First, drag the Table element into the Shogun editor. Click the Add Column button to add more columns. Use the Number of Rows option to increase or decrease the rows of content.
How to Add Content to Your Table Cells
Each cell within the Table element is its own dropzone, meaning that you can drag other elements into the cell. For example, you can drag a Text element or Image element into a cell to display content.
Changing the Order of Columns
Click and drag a column name up or down in the Controls sidebar to change the order of your table's columns.
Controlling the Appearance of the Table Head
The first row of a table is also known as the "table head" or "table header." It is often used to give context to the content in the rows below. Make this header row stand out by adding unique styles to it.
Header background color adds an accent color behind the entire first row of column names.
Column spacing adds padding to each cell in the header row.
Header text alignment controls the horizontal positioning of the text.
Controlling the Appearance of the Rows
The appearance of table rows can be controlled in much the same way as the table head.
Number of rows changes the number of rows within the table element.
Row background color applies an accent color behind all rows in the table's body.
Row spacing increases the padding for each table cell.
Best Practices for Devices
Displaying large amounts of data horizontally on your page doesn’t provide an ideal experience for mobile users. Usually, this can lead to the page visitor having to scroll sideways on your site or the data being confusing and unreadable. You can see a demonstration of this below:
There are options to avoid this! You can reformat your data using different elements such as the Columns element or Accordion element. For example, you may show a Table on laptops and an Accordion on mobile; this can be achieved using Screen Settings.
Summary
Tables work best for small, structured blocks of data. Perfect for pricing tables or size charts!
Each table cell is a dropzone. Drag in a Text, Image, or any element into each cell to add content.
The Controls settings in the sidebar can be used to modify the structure and appearance of the Table.
Tables aren't ideal for displaying a lot of data on mobile devices. Alternative layouts such as columns, tabs, or accordions are recommended in those cases.