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 quantity 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.

Did this answer your question?