Add a real, responsive table to any page — comparison charts, spec sheets, pricing matrices, schedules, or any grid of rows and columns. The table looks like a proper table on desktop and automatically reflows into clean, labelled cards on phones, so it never forces a sideways scroll or shrinks text into something unreadable.
Adding a table
In the page editor, open the add row picker and choose Features Comparison Table (under Page Content → Features). It drops in a ready-made three-column table you can edit in place — change the headings, edit the cells, add or remove rows.
The table is built on a reusable building block, so the same responsive behavior is available to any row that uses it. A starter row ships today; more table layouts can be added over time.
It just works on mobile
A normal web table is a usability problem on a phone: too many columns to fit, so it either overflows off the side of the screen or squeezes the text down to nothing. WebProCMS tables solve this automatically.
- On desktop the table renders as a true table — aligned columns, a header row, row separators.
- On phones each row turns into its own card, and every cell is labelled with the column it belongs to. A "Storage / 10 GB / 1 TB" row becomes a tidy little card that reads "Storage", then "Starter: 10 GB", "Pro: 1 TB" — no pinching, no horizontal scrolling, nothing cut off.
There's nothing to configure for this — it's built into every table. The column headings you type are reused as the on-phone labels, so the two views always stay in sync.
Editing columns and rows
The table has two simple lists in the editor sidebar:
- Columns — one entry per column. Each has a heading (shown in the header on desktop and as the label on mobile) and an alignment (left, center, or right). Add, rename, reorder, or remove columns here.
- Rows — one entry per row of the table. Edit the cell values directly; add or remove rows as your content grows.
Headings are fully editable text, so you can call your columns whatever you like ("Basic", "Team", "Enterprise", etc.).
Styling
Like every design library element, the table's appearance is yours to control from the Design tab:
- Table — overall text size and width.
- Header — the look of the column-heading row.
- Rows — the row styling, including how each row appears as a card on mobile.
- Cells — padding and the row-separator lines.
Colors follow your site's brand and the section's color preset automatically, so a table looks right whether it sits on a white, light, dark, or brand-colored section. You can also give the table a custom element ID and attributes (in the Advanced tab) for jump links or integrations.
Accessibility
Tables are built with proper semantic markup — real <table>, <thead>, and header cells — so screen readers and assistive technology announce the structure correctly. The mobile card view keeps every value paired with its column label, so the meaning survives the reflow.
Current limitations
- Changing the number of columns means adding (or removing) an entry in both the Columns list and each row's cells. Editing the headings, alignment, cell values, and adding or removing whole rows all work directly in the editor.
- For a table whose rows come from your blog, events, locations, or a custom content type, use the dynamic collection rows instead — Data Tables are for content you type in directly.