Table Element
The Table Element adds a data table to the page: technical data, opening hours, size charts, feature lists or any other information that reads best in rows and columns. Tables are real HTML tables, so search engines and screen readers understand the structure of the data.
You set the number of rows and columns, fill in the cells in the editor and choose one of two table styles. The styles are shared by every table on the site, so all tables look the same without extra work.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Table Element
Add the Table Element to a column, choose the Type and set Number of Rows and Number of Columns. The Builder adds or removes rows and columns in the Table field as you change the numbers; cells you already filled keep their content, and the header row stays on top.
Replace the placeholder text in each cell with your own content. Style 1 draws a border around every cell, a light header row and alternating row colors. Style 2 gives the header row the primary color of the site with white text and separates the rows with thin lines.
Use Margin to control the space around the table, and the Extras tab for an entrance animation or conditional rendering. The table always uses the full width of its column.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Type | Select the table style. |
| Number of Rows | Select how many rows to display. |
| Number of Columns | Select how many columns to display. |
| Table | Table content will appear here. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Keep the header row. It tells screen readers which column a value belongs to and helps search engines understand the data.
- Wide tables with many columns get cramped on phones. Split them into two tables or reduce the columns where you can.
- Put units in the header (for example “Weight (kg)”) instead of repeating them in every cell; the table becomes easier to scan.
- Use a table for data only, not to place content side by side. For layout, use Builder columns.