Turn on the Enable nutritional table toggle. The block then builds a two-column nutrition table whose headers come from Heading (default Nutritional information) and Right label (default Per 100g), and you add rows in the Information field.
Table
Updated 2 months ago
The Table block renders a full-width, horizontally scrollable table in one of two mutually exclusive modes: an automatic nutrition table, or a custom table you build from nested head, body, foot, and row blocks. On small screens the table keeps its full layout and scrolls horizontally instead of stacking into cards.
Nutrition table mode
Turn on the Enable nutritional table toggle to replace the nested blocks with an auto-built, two-column nutrition table. Its column headers come from Heading (default Nutritional information) and Right label (default Per 100g).
Build the rows in the Information field. The field reads: separate a label and value with a comma, use a line break to start a new row, and use a hyphen to indent a row.
A row is split on its first comma into a label and a value.
Blank rows are skipped.
A hyphen in a label removes the hyphen and indents that row.
Custom table mode
With the Enable nutritional table toggle off, the Table block renders its nested child blocks. Compose the table from three section blocks, each filled with row blocks, and each row with cell blocks:
Table head renders the header row group and accepts Table row blocks.
Table body renders the main body and accepts Table row blocks.
Table foot renders the footer row group and accepts Table row blocks.
Each Table row renders one row and is built from Header cell and Data cell blocks.
Table settings
These settings control the Table block's appearance in both modes.
Setting | Description | Default |
|---|---|---|
Enable color scheme / Color scheme | Applies a color scheme to the table. The scheme applies only when enabled and a scheme is chosen. | Off / Scheme 1 |
Border radius scheme | Rounds the table's corners. | Scheme 1 |
Margin top (Desktop) / (Mobile) | Space above the table on each device. | 0 |
Cell types
Each cell's Type decides what the cell renders, and the value field for that type appears only when the type is selected.
Type | What it renders | Default |
|---|---|---|
Text | The text you enter in Text content. | Text (default type) |
Check/Cross | A checkmark when Checked is on, a cross when it is off. | Checked on |
Rating | A star rating from the Rating value, from 0 to 5. | 5 |
Button | A primary-style button built from Button label and Button link. | Button |
Nutri-Score | A Nutri-Score letter from the Nutri-Score grade, from a to e. | a |
Cell settings
These settings are available on every Data cell, alongside its Type and type-specific value field.
Feature column: marks the cell as a feature column. Feature-column cells render bold and are given a 30% column width.
Indent text: indents the cell's text. Shown only for Text cells.
Text alignment: aligns the cell's content left, center, or right.
Enable color scheme / Color scheme: applies a color scheme to the cell. The scheme applies only when enabled and a scheme is chosen.
Header cells
A Header cell renders a column heading and is the only place you can highlight a whole column or show a logo. Rows can mix header and data cells, so a comparison table typically has a header row followed by data rows.
Heading label: the column heading text.
Logo: an image that renders instead of the heading label when an image is set.
Highlight column: highlights the column, applied to the header cell and every matching body and footer cell in that column.
Feature column: marks the cell as a feature column. Feature-column cells render bold and are given a 30% column width.
Text alignment: aligns the cell's content left, center, or right.
FAQ
How do I create a nutrition table in the Pops theme?
How do I format rows in the Table block's Information field?
Separate a label and value with a comma, use a line break to start a new row, and use a hyphen to indent a row. A row is split on its first comma into a label and a value, blank rows are skipped, and a hyphen in a label removes the hyphen and indents that row.
How do I build a custom table in the Pops theme?
Leave the Enable nutritional table toggle off so the block renders its nested child blocks. Compose the table from Table head, Table body, and Table foot section blocks, each filled with Table row blocks built from Header cell and Data cell blocks.
What cell types can I add to a Pops table?
Each cell's Type decides what it renders: Text, Check/Cross, Rating (0 to 5 stars), Button, and Nutri-Score (grade a to e). The value field for the selected type appears only when that type is chosen.
How do I highlight a column in a Pops table?
Use a Header cell's Highlight column setting. It highlights the column across the header cell and every matching body and footer cell in that column. Header cells are also the only place you can show a logo instead of the heading label.
How does the Pops Table block behave on mobile?
On small screens the table keeps its full layout and scrolls horizontally instead of stacking into cards.
Was this helpful?
Was this helpful?