Using the Table element

A table can be useful to display data in an organized, structured manner.

Updated over a week ago

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 a table using Shogun Page Builder

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.

Reorder table columns in Shogun Page Builder

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 table header in Shogun Page Builder

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:

Mobile best practices for tables in Shogun Page Builder

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.


Related Articles

Did this answer your question?