FORMS & TABLES

Tables

Static tables done right — density, lines, rich cells, selection, expandable and sticky rows, states and three responsive modes. Sorting, search and paging live in Datatables.

THEME

Playground

Density, lines, stripes, hover, sticky header, mobile mode, state

PREVIEWDefault · row lines · data

CONTAINER WIDTH · 980 px

Active projects8 projects · $222,700
Client	Project	Status	Progress	Budget	Due
Lume Goodsben@lume.example	Packaging refresh	Active	72%	$42,000	6 Novin 19 days
Nova Studiomara@nova.example	Spring campaign	In review	90%	$18,500	21 Octin 3 days
Atelier Rivejo@rive.example	Brand book	Overdue	64%	$24,000	12 Oct6 days late
Kiln Coffeesam@kiln.example	Product shoot	Done	100%	$9,200	2 OctDelivered
Orbit Labsli@orbit.example	App onboarding	Active	38%	$36,000	1 Decin 44 days
Sableana@sable.example	Lookbook SS27	Paused	20%	$14,000	15 Decin 58 days
Halo Clinickim@halo.example	Signage system	Active	55%	$21,000	20 Novin 33 days
Juniper Hotelola@juniper.example	Hotel identity	In review	84%	$58,000	28 Octin 10 days
No projects match “Overdue · Agency”Try another filter, or start a new project.

Settings

DENSITY

LINES

STRIPES

HOVER

STICKY HEADER

BELOW 640 PX

STATE

CODE

Variants

12 tables

Basicrows · header · tabular numbers


Name	Role	Projects	Hours
Olivia Lane	Creative director	6	32 h
Alex Reyes	Designer	4	38 h
Jon Reyes	Developer	3	41 h
Mia Hart	Copywriter	5	24 h
Noah Fischer	Producer	7	36 h

Stripedevery other row tinted


Name	Role	Projects	Hours
Olivia Lane	Creative director	6	32 h
Alex Reyes	Designer	4	38 h
Jon Reyes	Developer	3	41 h
Mia Hart	Copywriter	5	24 h
Noah Fischer	Producer	7	36 h

Borderedfull grid


Name	Role	Projects	Hours
Olivia Lane	Creative director	6	32 h
Alex Reyes	Designer	4	38 h
Jon Reyes	Developer	3	41 h
Mia Hart	Copywriter	5	24 h
Noah Fischer	Producer	7	36 h

Borderlesswhitespace only


Name	Role	Projects	Hours
Olivia Lane	Creative director	6	32 h
Alex Reyes	Designer	4	38 h
Jon Reyes	Developer	3	41 h
Mia Hart	Copywriter	5	24 h
Noah Fischer	Producer	7	36 h

Hover rowstint follows the pointer


Name	Role	Projects	Hours
Olivia Lane	Creative director	6	32 h
Alex Reyes	Designer	4	38 h
Jon Reyes	Developer	3	41 h
Mia Hart	Copywriter	5	24 h
Noah Fischer	Producer	7	36 h

Sizes36 · 48 · 60 px rows


Name	Role	Projects	Hours
Olivia Lane	Creative director	6	32 h
Alex Reyes	Designer	4	38 h
Jon Reyes	Developer	3	41 h

Caption & footer<caption> · <tfoot> totals

October expenses
Item	Category	Amount
Software	Tools	$1,240
Freelance illustrator	Contractors	$3,800
Print proofs	Production	$620
Studio rent	Office	$4,200
Total	4 items	$9,860

Alignmenttext left · numbers right · status centre


Client	Status	Invoices	Revenue
Lume Goods	Paid	6	$28,450
Atelier Rive	Overdue · 6 days	3	$14,200
Kiln Coffee	Sent	2	$4,800
Orbit Labs	Draft	1	$9,100

Contextual rowstint + text, never colour alone


Invoice	Client	Status	Amount
INV-0424	Nova Studio	Paid	$4,800
INV-0425	Atelier Rive	Overdue · 6 days	$7,200
INV-0426	Kiln Coffee	Sent	$2,400
INV-0427	Lume Goods	Draft	$5,600
INV-0428	Orbit Labs	Paid	$9,100

Selectable rowscheckboxes · select all · shift-click range · bulk bar

Invoices, select rows for bulk actions
Invoice	Client	Status	Amount
INV-0424	Nova Studio	Paid	$4,800
INV-0425	Atelier Rive	Overdue	$7,200
INV-0426	Kiln Coffee	Sent	$2,400
INV-0427	Lume Goods	Draft	$5,600
INV-0428	Orbit Labs	Paid	$9,100
INV-0429	Sable	Sent	$3,300

Shift-click a checkbox to select a range.

Expandable rowschevron · aria-expanded · details row

Projects with expandable details
Project	Owner	Tasks	Due
Packaging refresh	Olivia Lane	18 / 24	6 Nov
BRIEFNew dielines and a calmer palette for 6 SKUs. MILESTONESMoodboard — doneDielines — donePrint proofs — to do
Spring campaign	Alex Reyes	31 / 34	21 Oct
BRIEFLaunch visuals for 3 channels and a 20 s spot. MILESTONESConcepts — doneShoot — doneEdit — to do
Brand book	Mia Hart	9 / 22	12 Oct
BRIEFGuidelines for logo, type, colour and tone of voice. MILESTONESAudit — doneDrafts — to doFinal PDF — to do
App onboarding	Jon Reyes	5 / 30	1 Dec
BRIEFFive first-run screens and an empty-state kit. MILESTONESFlows — doneUI — to doHandoff — to do

Sticky header & first columnscroll both ways · 6 clients × 12 months

Monthly revenue by client, 2026
Client	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec	Total
Lume Goods	$1,200	$3,000	$4,800	$6,600	$8,400	$10,200	$2,100	$3,900	$5,700	$7,500	—	—	$53,400
Nova Studio	$7,900	$9,700	$1,600	$3,400	$5,200	$7,000	$8,800	$10,600	$2,500	$4,300	—	—	$61,000
Atelier Rive	$4,700	$6,500	$8,300	$10,100	$2,000	$3,800	$5,600	$7,400	$9,200	$11,000	—	—	$68,600
Kiln Coffee	$11,400	$3,300	$5,100	$6,900	$8,700	$10,500	$2,400	$4,200	$6,000	$7,800	—	—	$66,300
Orbit Labs	$8,200	$10,000	$11,800	$3,700	$5,500	$7,300	$9,100	$10,900	$2,800	$4,600	—	—	$73,900
Juniper Hotel	$5,000	$6,800	$8,600	$10,400	$12,200	$4,100	$5,900	$7,700	$9,500	$11,300	—	—	$81,500

The scroll area is focusable (tabindex 0, role region) so keyboard users can scroll it with the arrow keys.

States

Loading, empty, error

Loadingskeleton rows · aria-busy

Active projectsLoading…
Client	Project	Status	Progress	Budget	Due	Actions





No projects match “Overdue · Agency”Try another filter, or start a new project.

Emptysay why, offer the next step

Active projects0 projects
Client	Project	Status	Progress	Budget	Due	Actions
No projects match “Overdue · Agency”Try another filter, or start a new project.

Errorkeep the header, offer Retry

Active projects
Client	Project	Status	Progress	Budget	Due	Actions
Couldn’t load projectsCheck your connection — nothing was changed.

Responsive

Three ways to fit a narrow screen

Scroll sidewaysall columns · focusable region

390 px · phone

Active projects4 projects · $93,700
Client	Project	Status	Progress	Budget	Due
Lume Goodsben@lume.example	Packaging refresh	Active	72%	$42,000	6 Novin 19 days
Nova Studiomara@nova.example	Spring campaign	In review	90%	$18,500	21 Octin 3 days
Atelier Rivejo@rive.example	Brand book	Overdue	64%	$24,000	12 Oct6 days late
Kiln Coffeesam@kiln.example	Product shoot	Done	100%	$9,200	2 OctDelivered
No projects match “Overdue · Agency”Try another filter, or start a new project.

Scroll sidewaysKeeps every column and the reading order. Good for analysts who compare across columns. Add a visible scroll hint.← Scroll the table inside the phone →

Rows become cardsone card per row · key / value

390 px · phone

Active projects4 projects · $93,700

Lume GoodsPackaging refresh
Active
Budget
$42,000
Due
6 Nov · in 19 days
72%
Nova StudioSpring campaign
In review
Budget
$18,500
Due
21 Oct · in 3 days
90%
Atelier RiveBrand book
Overdue
Budget
$24,000
Due
12 Oct · 6 days late
64%

Rows become cardsBest for scanning on phones. Keep the same order of fields as the columns.

Hide columnspriority columns stay

390 px · phone

Active projects4 projects · $93,700
Client	Project	Status	Progress	Budget	Due
Lume Goodsben@lume.example	Packaging refresh	Active	72%	$42,000	6 Novin 19 days
Nova Studiomara@nova.example	Spring campaign	In review	90%	$18,500	21 Octin 3 days
Atelier Rivejo@rive.example	Brand book	Overdue	64%	$24,000	12 Oct6 days late
Kiln Coffeesam@kiln.example	Product shoot	Done	100%	$9,200	2 OctDelivered
No projects match “Overdue · Agency”Try another filter, or start a new project.

Hide columnsDrop the least important columns (project, progress, due). Offer the full view somewhere.

In Avava

Invoices, team workload, plan comparison

Lume Goods · invoicescaption · status · totals in tfoot

Lume Goods · 2026
Invoice	Issued	Due	Status	Amount
INV-0418	2 Sep	16 Sep	Paid	$6,200
INV-0421	18 Sep	2 Oct	Paid	$4,800
INV-0423	30 Sep	14 Oct	Paid	$3,650
INV-0426	6 Oct	20 Oct	Sent	$7,400
INV-0430	14 Oct	28 Oct	Draft	$6,400
Total			3 paid · $13,800 open	$28,450

Project teamworkload against 40 h capacity

Lume rebrand · this week
Member	Role	Hours	Workload
Olivia Lane	Creative director	32 h	80%8 h free
Alex Reyes	Designer	38 h	95%Nearly full
Jon Reyes	Developer	45 h	113%Over capacity by 5 h
Mia Hart	Copywriter	24 h	60%16 h free
Noah Fischer	Producer	36 h	90%Nearly full

Plansfeature × plan · grouped rows · highlighted column

Compare Avava plans
Projects
	Team$19 / seat	POPULARStudio$49 / seat	Agency$99 / seat
Active projects	10	Unlimited	Unlimited
Client portal	Not included	Included	Included
Time tracking	Included	Included	Included
Billing
Invoices per month	20	Unlimited	Unlimited
Multi-currency	Not included	Included	Included
Custom domain	Not included	Not included	Included
Team
Seats included	3	10	25
Single sign-on	Not included	Not included	Included

Rules & a11y

When to use, anatomy, screen readers

Table, list or cards?pick by the job

Table

People compare values across rowsInvoices, budgets, workload

List

One main thing per row, few attributesNotifications, files, people

Cards

Visual items or phonesProjects with covers, mobile rows

Datatable

Sort, filter, page, editSee the Datatables pages

Anatomy & tokenswhat every table shares

Header40 px · 10.5 / 900 caps · muted · 1 px line under it

Rows40 / 54 / 66 px · 14 px side padding · 1 px line at 6%

NumbersRight-aligned · tabular figures · same decimals per column

StatusPill with dot + word · tint 16% of the status colour

Hover / selectedRow at 5% ink / cyan at 9%

Footertfoot · 1.5 px line above · totals in 800

Screen readersreal table semantics

✓<caption> names the tableVisible or visually hidden

✓<th scope="col"> and scope="row"Row headers for the first column when it identifies the row

✓Scroll area: tabindex="0" role="region"With an aria-label, so it can be scrolled by keyboard

✓aria-expanded + aria-controlsOn the expand button, pointing to the details row

✓Header checkbox: indeterminatePlus “N selected” in a live region

✓Never a table for layoutOnly for data that has rows and columns

DO✓Right-align numbers and use tabular figures✓Give every table a caption — visible or hidden✓Pair status colour with a word✓Pick one responsive mode per table and keep it✓Show skeleton rows while loading, not a spinner alone

DON’T✕Centre-align text columns✕Use zebra stripes and grid lines together✕Hide the only column that identifies a row✕Put more than one primary action per row✕Leave an empty table with just the header