HTML Table Generator

Rows             5
Columns          3
Header row       first row, as th scope="col"
Header column    first column, as th scope="row"
Footer row       last row, in tfoot
Numeric columns  2

HTML
<div class="table-wrap" tabindex="0" role="region" aria-label="Pricing plans, 2026">
	<table>
		<caption>Pricing plans, 2026</caption>
		<thead>
			<tr>
				<th scope="col">Plan</th>
				<th scope="col" class="num">Price</th>
				<th scope="col" class="num">Seats</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">Free</th>
				<td class="num">£0</td>
				<td class="num">1</td>
			</tr>
			<tr>
				<th scope="row">Pro</th>
				<td class="num">£99</td>
				<td class="num">5</td>
			</tr>
			<tr>
				<th scope="row">Team</th>
				<td class="num">£299</td>
				<td class="num">25</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th scope="row">Total</th>
				<td class="num">£398</td>
				<td class="num">31</td>
			</tr>
		</tfoot>
	</table>
</div>

CSS
table {
	border-collapse: collapse;
	width: 100%;
}

caption {
	caption-side: top;
	text-align: left;
	padding-block-end: 0.5rem;
	font-weight: 600;
}

th,
td {
	padding: 0.5rem 0.75rem;
	border-block-end: 1px solid #d8dbe3;
	text-align: left;
}

th[scope="col"] {
	border-block-end-width: 2px;
}

/* Numbers read faster right aligned and in a tabular figure. */
.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

/* Scrollable, and reachable by keyboard: a scroll container without tabindex
   cannot be scrolled without a mouse. */
.table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.table-wrap:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* For a caption that has to be invisible: still announced, still first. */
.caption-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

The caption is announced first and it is the one piece of table markup
with no visual substitute. A heading above the table looks the same and
is not associated with it, so a screen reader reaching the table has no
idea what it contains.

scope="col" and scope="row" are what turn a grid of values into cells
with meaning: a cell is then announced with its headers, so "£99"
becomes "Price, Pro, £99". Without them a screen reader reads the
numbers in a row and the listener has to remember the column order.

The wrapper carries tabindex="0" and a label, which is the part
everybody leaves off: a scroll container that is not focusable cannot be
scrolled without a mouse, so a wide table becomes unreadable by
keyboard. role="region" with a label is what makes the focus stop make
sense when it is announced.

2 of 3 columns look numeric and are right aligned with tabular figures,
which is what lets a reader compare digits by position. Text stays left
aligned, because centred text has no reliable edge to scan down.

Do not use a table for layout. If you inherit one, role="presentation"
removes it from the accessibility tree so it is read as ordinary content
rather than announced as a table with one row.

What this cannot do is make a large table readable. Past about seven
columns, a table on a phone is a scrolling puzzle whatever the markup
says, and the honest fix is fewer columns or a different presentation
for small screens.