The editor offers Lovely Render’s Advanced table and WordPress’s Table. This page describes how to create an advanced table, its rows, its columns, its merged cells and its sections, then the striping of both tables.
Choose a table
The editor offers two tables. They are set in the same tabs, with the Odd and Even states to color every other row.
| Block | Purpose |
|---|---|
| Advanced table | A table with sections (caption, header, body, footer), merged cells and cells that hold other blocks: pricing, comparisons or opening hours. Each row and each cell is styled separately. |
| Table | The WordPress table, kept as is, with Lovely Render’s tabs and an animation. |
Create an advanced table
- In the editor, open the inserter and choose Advanced table. Add a block details the ways to insert a block.
- Enter the number of Rows and Columns, 1 at minimum.
- Turn on, if needed, Header row, Footer row and Caption.
- Click Create table. The table appears, ready to be filled in.
Edit the rows
Click in a cell. Its toolbar carries the row buttons.
| Button | Effect |
|---|---|
| Insert row above, Insert row below | Adds a row that receives the same number of cells as its neighbor, headers included. The selection stays on the original row. |
| Delete row | Removes the row. Inactive on the last row of a section. |
On a selected row, Ctrl+Alt+T and Ctrl+Alt+Y add a row before or after it.
Edit the columns
| Button | Effect |
|---|---|
| Insert column before | Adds an empty column to the left of the cell, in all sections. |
| Insert column after | Adds an empty column to the right of the cell. |
| Delete column | Removes the cell’s column. Inactive on the last column. |
A cell merged downward that crosses the added column widens instead of receiving one more cell.
Merge cells
| Button | Effect |
|---|---|
| Merge with right cell | The cell widens and absorbs its right neighbor. |
| Merge with cell below | The cell lengthens and absorbs its neighbor below. |
| Split cell | Gives back as many single cells as the merged cell covered. Inactive on a single cell. |
If the absorbed cell holds content that the merge would lose, the editor asks The other cell holds content that will be lost. Merge anyway?, with Merge anyway and Cancel.
If you move a cell from one row to another, some rows can become shorter than the others. The Uneven rows notice then appears, with the Rebalance automatically button, which adds empty cells at the end of the short rows.
Settings tab
Table structure panel
| Setting | Effect | Default value |
|---|---|---|
| Caption | Shows the caption above the table. It is written in the Table caption… box. | Depending on the starting screen |
| Header (thead) | Shows the header section, whose cells title the columns. | Depending on the starting screen |
| Footer (tfoot) | Shows the footer section, for a total or a note. | Depending on the starting screen |
Cell panel
| Setting | Effect | Default value |
|---|---|---|
| Advanced content (blocks) | Off: a rich text field. On: the cell accepts blocks, paragraph, list, heading, Simple block, media, button or icon. | Off |
| Header cell (th) | Makes the cell a header. | Off, on in the header |
| Scope | The object the header titles: Column, Row, Column group or Row group. Shown for a header cell. | Column |
Switching a cell to advanced content puts its text in a paragraph. Going back to rich text flattens its paragraphs into lines.
Styles tab
The Advanced table is set in the Default, Hover, Odd, Even and Active states. Odd styles rows 1, 3, 5 of the body, Even rows 2, 4, 6.
- Select the table and open the Styles tab.
- Choose the Odd state in the row of states.
- In the Colors panel, give it a light background. Every other row takes this background.
Without any setting, the table carries the Table style, which tints the odd rows. Each cell carries the Table cell style, a thin border and inner spacing. The Tables part of the design catalog gives a look to all the site’s advanced tables: Striped box, Box, Striped rows, Rows, Striped or Borderless (Adopt a design from the catalog).
| Panel | Guide |
|---|---|
| Colors | Color a block |
| Typography | Style text |
| Size & Spacing, Borders, Effects, Transitions | Set size, borders and effects |
The caption, each section, each row and each cell have these panels, in the Default, Hover and Active states.
Animations tab
The Advanced table and its parts have no Animations tab: to make the table appear, animate the Container that surrounds it. The WordPress Table has an Animations tab (Animate a block).
The WordPress table
The Table block keeps WordPress’s input. Lovely Render adds the Colors, Typography, Size & Spacing, Borders, Effects and Transitions panels. The block receives the Default, Hover, Odd, Even and Active states, the registered styles, the Animations tab and the Advanced panel with its HTML anchor. The design catalog does not change it: a WordPress table keeps its look.
On a phone
The table has no scrolling of its own. For a wide table to scroll sideways in its frame on a phone, put it in a Container. In the container’s Size & Spacing panel, set the Overflow to Auto.
Accessibility
- Mark the cells that title a column or a row as Header cell (th) and set their Scope. A screen reader then announces the column title with each cell.
- A Caption gives the table its name for screen readers.
- Do not use a table to put blocks side by side: a grid Container does it without announcing a table.
Limits
- A table always has at least one row in its body and one column.
- Sections are created and removed only through the Structure panel. They cannot be duplicated.
- The + of a cell only shows when the cell or one of its blocks is selected.