Compare structured data
Use tables when each record shares the same fields.
Use tables when each record shares the same fields.
Rows and columns give repeated information a predictable position.
Tables can include selection, sorting, filtering, and actions where needed.
Header row
Data row
Data cell
Border (optional)
Header cell
Header background (optional)
Row divider (bottom)
Use headerPosition to put headers across the top, down the side, or both.
Headers across the top. Most common arrangement for tabular data.
Use header-background to apply a tinted fill to the header cells for stronger visual separation from the body.
Plain header. Suits tables embedded in low-contrast surfaces.
Use table-border to draw borders around every cell for tables with dense numeric data.
Default borderless cells keep the table light and uncluttered.
Responsive tables can change layout at smaller breakpoints.
Use responsive tables when the table must remain readable on smaller screens.
Table layout controls whether columns size automatically or use fixed distribution.
Use auto layout when content length should influence column sizing.
Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.
sgds-padding-md16pxsgds-padding-sm—sgds-border-width-0Width variessgds-border-width-11pxsgds-font-weight-semibold—sgds-dimension-56—Tables are for repeating data with shared attributes. Applications, transactions, devices.
For attributes of a single item, a description list shows the label–value relationship more clearly.
Keep headers short and consistent, 'Submitted' for a date, 'Status' for a state, so users know each column.
If every row needs three or more controls, move secondary actions into an overflow menu.
TabShift+TabShare them with us on Slack → #ask-sgds-v3
Report it on GitHub Issues → sgds/components/table
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.