Website elementsContent blocks
Responsive table
A responsive tables, built into your site with no plugin and no library. A real <table> with a caption, scoped headers and right-aligned numbers, built from columns and rows. Below a breakpoint on its own width each row becomes a card, every value under its column’s name (CSS only, from data-label); or, in scroll mode, the table keeps its shape in a focusable scrollbox named by the caption, with edge fades and a one-time hint. Optional striped rows and sticky header. Without JavaScript: the table.
Cards on a narrow screen
Drag the corner of the box to make it narrower: below 40rem each class becomes a card, every value under its column’s name.
| Class | Day | Time | Length (min) | Price | Places left |
|---|---|---|---|---|---|
| Wheel throwing for beginners | Tuesday | 6:30 pm | 120 | $45.00 | 3 |
| Hand building | Wednesday | 10:00 am | 90 | $35.00 | 6 |
| Glazing workshop | Thursday | 7:00 pm | 90 | $40.00 | 0 |
| Open studio | Saturday | 9:00 am | 240 | $25.00 | 10 |
| Family clay morning | Sunday | 10:30 am | 60 | $20.00 | — |
A wide table that scrolls
Nine columns keep their shape; the edge fades where there is more, and the box takes arrow keys once it has focus. With a height limit it scrolls down too, and the header row stays in view.
| Plan | Monthly | Yearly | Pages | Editors | Storage (GB) | Custom domain | Support | Details |
|---|---|---|---|---|---|---|---|---|
| Solo | $6 | $60 | 1 | 1 | 1 | No | Help pages | Solo plan |
| Starter | $12 | $120 | 5 | 1 | 2 | No | Email, next working day | Starter plan |
| Studio | $29 | $290 | 25 | 3 | 20 | Yes | Email and phone, same day | Studio plan |
| Agency | $79 | $790 | 1,000 | 15 | 200 | Yes, up to 10 | A named person, within the hour | Agency plan |
| Enterprise | — | By quote | Unlimited | Unlimited | 1,000 | Yes, any number | A named team, around the clock | Enterprise plan |
You'll need to give us
- What goes in the table, as a spreadsheet or a listNeeded to start
Send these with your request and we can start straight away. Everything else is ours to do.
Timetables, prices and comparisons that read on a phone: a proper table on a wide screen, and a card per row, or a table you can swipe along, on a narrow one.
Also called
mobile tabletable to cardsstacked tableTablePress responsivedata tablecomparison tableprice table
What it replaces
- TablePress with its Responsive Tables extension
- Ninja Tables and wpDataTables for small, hand-kept tables
- the page builder’s table widget that overflows the screen on a phone
Good for
Data people read across and down: class timetables, price lists, opening times by branch, plan comparisons, specifications. Cards when each row stands on its own; scroll when people compare down a column.
Not for
Layout: a table puts a page’s columns in a grid only if they are data, never to line things up. Large, sortable or filterable data sets: that is a data-grid application, not a page element. And prose: a cell of paragraphs belongs in a list or an accordion.
Accessibility
Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.
- A real <table>: a <caption> names it, column headers are <th scope="col">, the row header column is <th scope="row">, so a screen reader announces each cell with its headers.
- Explicit roles (table, rowgroup, row, columnheader, rowheader, cell) keep it a table when the cards restyle its rows as blocks, which otherwise drops table semantics in Chrome and Safari.
- Cards take each label from the cell’s data-label, written at build time from the header text, so the two cannot drift. The label is drawn with empty alternative text, so a screen reader hears the column header once, not twice. Empty cells are left out of the card.
- Scroll mode: the box is a region named by the caption and is focusable, so arrow keys scroll it; when nothing overflows it is not a Tab stop. The hint is aria-hidden: it is for eyes, the table is already navigable.
- Numbers are right-aligned with tabular figures, header included, so columns of prices and counts line up.
- No motion. Without JavaScript it is the table (cards need no script); a scroll box scrolls without its fades.
Where it's live
- superherotech.ai: /elements/responsive-table/ (demo)
How to ask for it
“The responsive-table on our home page, with …”
Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.
More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.
More in Content blocks
See them all working- Business hours
Open now, closing in 40 minutes, back tomorrow at 8: always right, in the shop’s own time zone.
- Flip box
A card that turns over to say more — works on a phone, not just on hover.
- Info list
Lay out your services, how you work step by step, or your story year by year, each with an icon or a number, in a list that reads on any screen.
- Image hotspots
Put the explanation on the picture: pins on the parts that matter, each opening a line about it — or a guided tour that walks visitors round.
Want the responsive table on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.