How to Add a Table to Your Shogun Pages

Tables are great for displaying content on your pages in an organized grid-like manner.
Click the Add Column button to add more columns. Use the Number of Rows option to increase or decrease the rows of content.

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.

Changing the Order of Columns

Click and drag a column name 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

Similar options are also available for rows.

  • 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

Note: Tables are best used for grid-like data. If you'd like more flexibility in your content structure, the Columns element may be a better fit.

Responsiveness Best Practises

Displaying large amounts of data horizontally on your page is not ideal for mobile users - usually, this can lead to the user having to scroll sideways on your site or the data being confusing and unreadable. You can see a demonstration of this below,

There are ways around this! Making use of different elements like the Column element, or Accordion element, you can change the look of your data. For example, showing a Table on laptops, and an Accordion on mobile - this can be achieved using Screen Settings.

Did this answer your question?