THE GITHTML FIELD GUIDE
Make a comparison table usable on a small screen
Start by reducing the comparison to a clear question and a small set of meaningful columns. Keep actual tabular relationships in semantic table markup, then contain any unavoidable horizontal scrolling around the table. For unrelated attributes or lengthy prose, a sequence of labeled summaries may be a better mobile presentation.
Decide what readers are comparing
A table becomes difficult on a phone when it attempts to be a database export, a narrative, and a decision tool simultaneously. Write the comparison question first. For example, Which export format preserves selectable text? is specific enough to guide column selection. Remove columns that do not help answer that question or move them into an appendix.
Avoid hiding important columns only on narrow screens. A reader should not receive a different conclusion because their phone omits the limitations column. If some details are optional, separate the short decision table from a fuller reference table and label the difference. The compact version must still present the tradeoffs needed for a responsible choice.
Preserve table meaning
Use a caption to identify the table and header cells to identify rows or columns. Keep units in visible labels so numbers remain understandable after scrolling. A row containing 12, 40, and 180 is not useful if the reader cannot determine whether those values are minutes, megabytes, or counts. Prefer consistent units over repeated explanations inside every cell.
A wrapper with horizontal overflow can keep the rest of the article stable. Add a short visible hint when horizontal exploration is not obvious. Do not shrink the font until everything technically fits; that trades layout convenience for poor readability. For a few long product descriptions, separate subsections may be easier to scan than a table at all.
Check the important intersections
Review the table from the perspective of a reader looking up one intersection rather than reading every cell. Can they identify the row, column, value, and caveat together? If a table has multiple header layers or complicated merged cells, consider splitting it into simpler tables before adding more styling.
- Check one value near the last column in portrait mode.
- Verify that the conclusion also appears in surrounding prose.
- Review header associations with a screen reader, not just visually.
<div class="table-scroll">
<table>
<caption>Export options for reading</caption>
<tr><th scope="col">Format</th><th scope="col">Main limitation</th></tr>
<tr><th scope="row">Single HTML</th><td>Embedded media increases file size</td></tr>
</table>
</div>
<style>.table-scroll { overflow-x: auto; } th, td { padding: .65rem; }</style>Sources and further reading
AI-assisted writing with source-linked guidance and illustrative examples. Read our editorial approach or report a correction.