행 및 열 헤더 제대로 지정하기

Real data usually has headers along the top and down the side. Each data cell sits at the crossing of a column header and a row header.

The value 92 means little alone. Tie it to Ada and to Score and it becomes Ada, Score, 92. That pairing is the association you are building.

The first row holds scope=col headers. As a user arrows down a column, the screen reader keeps announcing that column header for context.

The first cell in each body row becomes a scope=row header. It names the row so values get a who or a when as the user reads across.

The top-left cell often sits above row headers and beside column headers. Leaving it as an empty th is fine and keeps the grid honest.

Browsers try to guess scope, but the guess is unreliable for anything beyond the simplest grid. Always set scope yourself to be sure.

Wrap header rows in thead and data rows in tbody. It clarifies structure for assistive tech and makes your markup far easier to read.

Move to a data cell and the user hears the row header, the column header, then the value. Good scope is what makes that announcement accurate.

Keep a th to a single role: a column header or a row header. Mixing data and labels in one cell muddies the association for everyone.

Pick a random data cell and ask: do its headers fully explain it? If you cannot tell what a number means from its headers, your scope is wrong.

Column headers on top, row headers on the left, data in the middle. This matrix shape covers the vast majority of tables you will build.

A user arrows onto a data cell deep inside a well-marked table.

Column headers use scope=col, row headers use scope=row, and every data cell sits where they cross. Set scope yourself and never trust the guess.