Tables
Present compact comparisons, option defaults, and compatibility information in a readable grid.
Loading documentation…
Powered by heyo
| Framework | Integration |
|---|---|
| React Router | @heyo-sh/heyo-docs/vite |
| Next.js | @heyo-sh/heyo-docs/next |
| Astro | @heyo-sh/heyo-docs/astro |
Tables are for comparison, not for prose. Use one when every item has the same fields and readers need to compare values across rows: supported frameworks, plan limits, configuration defaults, or a short compatibility matrix. The theme allows a table to scroll horizontally on small screens, giving wide comparisons more room without shrinking their content.
Write a short, specific header for every column, then keep each column's values consistent. A reader should be able to scan down a column without interpreting a different kind of information in each row.
This is a good fit for a configuration reference, where the table exposes the facts and the prose immediately after it can recommend a choice. If one cell needs a paragraph of explanation, move that explanation below the table or into a dedicated section.
Markdown supports left, centre, and right alignment with colons in the separator row. Right-align numbers, centre short status values, and leave descriptive text left-aligned. Alignment is a small cue, but it makes a pricing, limits, or support matrix much easier to read.
| Plan | Projects | Support |
|---|---|---|
| Starter | 3 | |
| Team | 20 | Priority |
| Enterprise | Unlimited | Dedicated |
Use this for plan limits, response times, and other values readers compare vertically. Avoid more columns than a reader needs to make the decision; even though the table can scroll on mobile, a smaller comparison is always easier to understand.
For a wide compatibility matrix, reduce the content to the fields that affect the decision and move detailed notes underneath. A mobile reader can scroll the table horizontally, but they should not need to decode dense abbreviations or five-line cells to understand it.
Defines the table's columns. Write names that explain what a value means without relying on the surrounding prose.
Marks the header boundary and supplies one cell for every column. Add colons to control alignment.
Left-aligns values in a column. This is the natural choice for labels and descriptive text.
Right-aligns values in a column. Use it for counts, prices, sizes, and other values readers compare by magnitude.
Centres short status values such as support level or availability. Do not use it for paragraph-length text.
Adds a data row. Keep the meaning of each column consistent in every row so readers can compare values quickly.