Skip to main content

Table block

What is the Table block for?

Use a table when visitors genuinely need to compare rows and columns. Tables are designed for structured data: specifications, size charts, opening hours or any comparison where the same fields repeat across several rows.

If you find yourself writing full sentences inside most cells, a list, grid or text block will probably be easier to read.

The real question is whether someone needs to find an answer at the intersection of a row and a column. If not, a list or grid may be simpler.

  • Monday

    Opening hours
    09:00–17:00

  • Tuesday

    Opening hours
    09:00–17:00

  • Wednesday

    Opening hours
    09:00–17:00

  • Thursday

    Opening hours
    09:00–18:00

  • Friday

    Opening hours
    09:00–15:00

Example: opening hours in the Clean layout – a raised card with the first column in bold.

What makes a table easier to read?

  • Header row: name the columns clearly. On a phone it also labels the cells of each card.
  • Striped rows: in the Classic layout, helps the eye track a row across longer tables.
  • Bordered: in the Classic layout, can create clearer cell boundaries for dense data.
  • Fewer columns: especially on mobile, keep only the data people genuinely need.

On a phone, the Clean, Highlighted column and Card rows layouts turn every row into a card of its own, with the header row labelling the cells. The Classic layout scrolls sideways by default; to get cards there too, turn on Cards on mobile, as the specifications below do.

  • S

    Width
    42 cm
    Height
    62 cm
    Weight
    8.2 kg

  • M

    Width
    48 cm
    Height
    68 cm
    Weight
    9.1 kg

  • L

    Width
    54 cm
    Height
    74 cm
    Weight
    10.0 kg

Example: specifications in the Classic layout, with bordered cells and an accent header. On a phone it shows as cards (Cards on mobile).

Four layouts

At the top of the panel, Layout decides how the table is shown. A newly inserted table starts as Clean; tables you built earlier stay Classic.

  • Classic: the plain grid with a filled header row; striping and borders are switched here.
  • Clean: a raised card, the first column in bold, a coloured rule under the header, figure columns (prices, percentages) aligned right. The opening hours above use it.
  • Highlighted column: for comparisons; the column you pick is filled in colour.
  • Card rows: every row is a soft card of its own.

In the three new layouts, a cell holding only ✓ shows as a yes mark, and one holding only a dash (—) shows as a no mark, with text for screen readers. In the panel you can drop them into the selected cell with one click (Yes mark (✓), No mark (—)). Don't write words such as “yes” or “no” instead: those stay text.

  • Weekly cleaning

    Basic
    Yes
    Family
    Yes
    Premium
    Yes

  • Window cleaning

    Basic
    No
    Family
    Yes
    Premium
    Yes

  • The same cleaner every time

    Basic
    No
    Family
    Yes
    Premium
    Yes

  • Ironing

    Basic
    No
    Family
    No
    Premium
    Yes

  • Monthly fee

    Basic
    HUF 39,900
    Family
    HUF 59,900
    Premium
    HUF 89,900

Example: the Highlighted column layout – the Family plan picked out, ✓ and — drawn as yes and no marks.

  • Beginner ceramics

    When
    Tue 6 pm
    Where
    Studio, ground floor
    Price
    HUF 32,000

  • Wheel throwing, advanced

    When
    Thu 6 pm
    Where
    Studio, first floor
    Price
    HUF 38,000

  • Weekend workshop

    When
    Sat 10 am
    Where
    Studio, ground floor
    Price
    HUF 18,000

Example: the Card rows layout – every row is a soft card.

What can you configure in the Table block?

Alongside the data structure, you can fine-tune readability and visual emphasis.

Layout

Classic, Clean, Highlighted column or Card rows. A new table starts as Clean.

Header row

Render the first row as a true table header so the meaning of each column is clear.

Striped rows and Bordered

In the Classic layout: alternating row backgrounds for longer tables, and full cell borders or a quieter row divider.

Header colour and Highlight colour

In the Colours group: the header row in Classic, the highlight colour in Clean and Highlighted column. Accent, Dark, Blue, Green, Amber or a colour of your own; Classic also offers Neutral.

Highlighted column

In the Highlighted column layout you pick which column stands out, for example the recommended plan.

Yes and no marks

In the new layouts a cell holding only ✓ or — shows as a mark, readable by screen readers too.

Cards on mobile

Clean, Highlighted column and Card rows turn every row into a card on a phone. In Classic, the Cards on mobile switch does the same.

Caption

Add a short line explaining what the table shows or which period the data covers.

Width

Choose Readable, Wide or Full content width depending on how much space the table needs.

When is another block better?

Let the structure of the information determine the format.

Features →

Use it when visitors need a quick overview of a few equal-weight benefits or attributes.

Pricing table →

Use it when the task is specifically choosing between several plans and prices.

Rich text →

Use it when the information is primarily explanation rather than comparable data.

DATA, NOT DECORATION

A good table does not show more data. It makes comparison faster.

Keep the number of columns under control, pick the layout that suits the data, and check how it looks on a phone.

Build my website →Back to Website Blocks