The Table element outputs a real HTML table, one that screen readers can navigate and phones can display. You fill it in a grid, with no code and no separators to type.
Filling the grid
- Type in the cells, as in a spreadsheet.
- Paste a range copied from Excel or LibreOffice: click in a cell and press Ctrl+V. The grid grows by itself and fills from that cell.
- Add or remove a row or a column with the grid buttons.
- The gear of a row, a column or a cell opens its settings in the purple panel.
The Table caption is written above the table. It is also the name a screen reader announces when entering it: a table without a caption does not say what it is about.
Table settings
| Setting | What it does |
|---|---|
| First row | Set to Column headers, each cell names its column: the screen reader repeats it before each value. |
| First column | Set to Row headers, the first cell of each row names it. On a small screen, it becomes the card title. |
| On a small screen or narrow block | As cards, one card per row or Scrolling, first column fixed. The switch follows the width of the block, not of the screen: a table placed in a narrow column switches on desktop too. |
| Striped rows | Every other row lightly tinted, to follow a long row. |
| Borders | Frame and rows, Between rows, Full grid or none. Colour and thickness follow the template. |
| Column widths | By content or Equal, for the columns left on automatic. |
A row, a column, a cell
Each has its own gear and settings: alignment, background, bold text, uppercase, strong line above (for a total row), width of a column and minimum height of a row.
- Where a row and a column cross, the row wins. A cell wins over both.
- A background decorates, it does not speak: if a row is "recommended", write it in a cell too.
- Reset formatting clears all settings, never the content.
To go fast
In Choose a layout, the Opening hours table model places a title, a text and ready-formatted opening hours. The Table brick places a table on its own.
Up to date for Opus 1.5.4.