By Mario V.W.B.R. Obst · Original learning example · September 2026

Open the full-page example → · Download complete recipe (ZIP)

Try the working example

The preview runs only our supplied example code. Entries stay in the page; the practice form cannot send them. For keyboard testing, use the full-page example.

Build it step by step

  1. Give the table a caption describing the dataset. Use table headings rather than styling ordinary cells as headings.
  2. Mark column headings with scope="col" and row headings with scope="row" for this simple table.
  3. Wrap the table in a named region that can receive keyboard focus. Allow horizontal overflow on the wrapper.
  4. Test a narrow viewport. The page should fit while only the table scrolls. Read across a row and down a column.

Why it works

The table remains a table at every width. Horizontal scrolling preserves the relationship between observations and their labels without duplicating content or rebuilding rows into cards.

A mistake worth catching

Hiding columns on a small screen can remove essential information. Changing table elements into unrelated display layouts also needs careful accessibility testing.

Read the complete source

The ZIP also includes the local font and its licence, a README and any illustrations. The source below is the same code used in the preview.

HTML source
HTML · EXAMPLE
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Mario V.W.B.R. Obst"><meta name="robots" content="noindex, follow"><meta name="referrer" content="no-referrer">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'none'; form-action 'none'; object-src 'none'; base-uri 'none'">
<title>A table that keeps its meaning</title><link rel="stylesheet" href="style.css">
</head>
<body><main><h1>A small observation log.</h1><p id="table-help">On a narrow screen, scroll the table horizontally. Keyboard users can focus the table region and use the arrow keys.</p><div class="table-scroll" role="region" aria-labelledby="log-caption" aria-describedby="table-help" tabindex="0"><table><caption id="log-caption">Fictional walk notes · September 2026</caption><thead><tr><th scope="col">Walk</th><th scope="col">Distance</th><th scope="col">Weather</th><th scope="col">Observation</th></tr></thead><tbody><tr><th scope="row">Canal loop</th><td>3.2 km</td><td>Cloudy</td><td>A reflection broken by one falling leaf.</td></tr><tr><th scope="row">Station path</th><td>1.8 km</td><td>Clear</td><td>Long shadows across the empty platform.</td></tr><tr><th scope="row">Garden turn</th><td>2.4 km</td><td>Light rain</td><td>Water collecting along a curved railing.</td></tr></tbody></table></div></main></body></html>
CSS source
CSS · EXAMPLE
@font-face{font-family:FYI;src:url("inter.ttf") format("truetype");font-weight:100 900;font-display:swap}
*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#20212a;color:#efedf6;font-family:FYI,sans-serif;line-height:1.6}main{max-width:960px;margin:auto;padding:24px}h1,h2{line-height:1.15}a{color:#ff9b45}button,input,select,textarea{font:inherit;color:inherit;background:#282934;border:1px solid #777582;border-radius:6px;padding:10px}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}:focus-visible{outline:3px solid #ff9b45;outline-offset:4px}label{display:block;margin-top:16px}button{margin:12px 8px 12px 0}p{max-width:70ch}.hint{color:#c7c3d2} [hidden]{display:none!important}.panel{padding:20px;border:1px solid #555361;border-radius:12px;background:#282934}img{max-width:100%;height:auto}code{overflow-wrap:anywhere}input,select,textarea{max-width:100%}a,button{touch-action:manipulation}
.table-scroll{max-width:100%;overflow-x:auto;border:1px solid #555361;border-radius:10px}table{border-collapse:collapse;width:100%;min-width:620px}caption{text-align:left;padding:16px;font-weight:700}th,td{text-align:left;padding:14px;border-top:1px solid #555361}thead,tbody th{background:#282934}td{vertical-align:top}

Take it one step further

Add another row and a column for the time of day. Update the headings and every row, then test keyboard scrolling and enlarged text.

Check your work

Try a narrow window, 200% zoom and keyboard-only operation. Disable JavaScript to inspect the fallback. For motion, test your reduced-motion preference. Do not use real personal details in learning forms.

Keep exploring

Read the companion guide · Practise finding small mistakes · All code recipes

Technical reference and authorship

Read the underlying platform documentation (new tab). The explanation, composition and example were written for this site; this link is a factual reference, not a source of a copied template. Inter has its own font licence in the download.

Use and adapt the original example for your own learning. For other reuse, see Legal information. About AI assistance.