Fylgja Table

A table presents data in rows and columns. Use the native <table> with <thead>, <tbody>, and scoped <th> cells, and Fylgja styles it for you. Reach for a real table whenever the data is tabular, never a set of stacked <div>s.

Preview

<table>
	<caption>Fylgja core packages</caption>
	<thead>
		<tr>
			<th scope="col">Package</th>
			<th scope="col">Purpose</th>
			<th scope="col">Gzipped</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">@fylgja/base</th>
			<td>Element defaults and typography</td>
			<td>2.1 kB</td>
		</tr>
		<tr>
			<th scope="row">@fylgja/utilities</th>
			<td>Dynamic utility classes</td>
			<td>3.4 kB</td>
		</tr>
		<tr>
			<th scope="row">@fylgja/tokens</th>
			<td>Design tokens</td>
			<td>1.2 kB</td>
		</tr>
	</tbody>
</table>

Usage

• Put column headers in <thead> as <th scope="col">, and the data in <tbody>.
• Use <th scope="row"> for a row’s leading header cell so it can be announced with each data cell.
• Add a <caption> as the first child to give the table a title.

Accessibility

• scope on header cells ties them to their column or row for screen readers.
• A <caption> gives the table an accessible name.
• Native table semantics (rows, columns, headers) are what make the data navigable; a <div> grid does not provide them.