Ontario.ca homepage
Français

Ontario Design System

Our npm namespace has changed. Developers should update their projects to continue accessing our components.

Tables

Use a table to present data and make it easy to compare or contrast values.

  • Content: 
    @use 'sass:color';
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;

$ontario-table-caption-background: #0000001a;
$ontario-table-total: #0077a056;
$ontario-table-subtotal: #007b9e1d;
$ontario-table-highlight: #e191003c;
$ontario-table-row-divider: #0000004d;
$ontario-table-zebra-striping: #0000000d;
$ontario-table-shadow--cover: rgba(255, 255, 255, 0);
$ontario-table-shadow--black: rgba(0, 0, 0, 0.2);
$ontario-table-shadow--clear: rgba(252, 0, 0, 0);
$ontario-table-scroller--height: 20px;

$ontario-remcalc-8px: globalFunctions.px-to-rem(8);
$ontario-remcalc-12px: globalFunctions.px-to-rem(12);
$ontario-remcalc-14px: globalFunctions.px-to-rem(14);
$ontario-remcalc-16px: globalFunctions.px-to-rem(16);
$ontario-remcalc-17px: globalFunctions.px-to-rem(17);
$ontario-remcalc-18px: globalFunctions.px-to-rem(18);
$ontario-remcalc-19px: globalFunctions.px-to-rem(19);
$ontario-remcalc-20px: globalFunctions.px-to-rem(20);
$ontario-remcalc-23px: globalFunctions.px-to-rem(23);
$ontario-remcalc-24px: globalFunctions.px-to-rem(24);
$ontario-remcalc-28px: globalFunctions.px-to-rem(28);
$ontario-remcalc-24-5px: globalFunctions.px-to-rem(24.5);
$ontario-remcalc-40px: globalFunctions.px-to-rem(40);

caption {
	background-color: $ontario-table-caption-background;
	padding: $ontario-remcalc-18px $ontario-remcalc-16px $ontario-remcalc-18px $ontario-remcalc-24px;
	text-align: left;
	font-weight: bold;
	font-size: globalFunctions.px-to-rem(22);
	line-height: globalFunctions.px-to-rem(35);

	display: table-caption;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: $ontario-remcalc-20px;
		line-height: globalFunctions.px-to-rem(30);
		padding-left: $ontario-remcalc-16px;
	}
}

.ontario-table-container {
	position: relative;
	margin: $ontario-remcalc-8px 0 $ontario-remcalc-40px 0; //Excludes 20px scrollbar on top and bottom

	table:not(.ontario-table--no-zebra-stripes) {
		tbody {
			tr:first-child:nth-last-child(n + 6),
			tr:first-child:nth-last-child(n + 6) ~ tr {
				&:nth-child(even) {
					background-color: $ontario-table-zebra-striping;
				}
			}
		}
	}
}

.ontario-table-div {
	overflow-x: auto;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		overflow-x: scroll;
	}

	background: linear-gradient(to right, colours.$ontario-colour-white 30%, $ontario-table-shadow--cover),
		linear-gradient(to right, $ontario-table-shadow--cover, colours.$ontario-colour-white 70%) 0 100%,
		linear-gradient(to right, $ontario-table-shadow--black 0%, $ontario-table-shadow--clear 100.01%),
		linear-gradient(to left, $ontario-table-shadow--black 0%, $ontario-table-shadow--clear 100.01%);
	background-repeat: no-repeat;
	background-size: $ontario-remcalc-40px 100%, $ontario-remcalc-40px 100%, $ontario-remcalc-14px 100%, $ontario-remcalc-14px 100%;
	background-position: 0 0, 100%, 0 0, 100%;
	background-attachment: local, local, scroll, scroll;
}

.ontario-table-scroll--wrapper {
	height: $ontario-table-scroller--height;
	overflow-x: auto;
	overflow-y: hidden;
	display: block;
}

table {
	border-collapse: collapse;
	font-size: $ontario-remcalc-17px;
	display: table;
	line-height: globalFunctions.px-to-rem(26);
	font-weight: normal;

	&.ontario-table--full-container-width {
		display: table;
		width: 100% !important;
	}

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: $ontario-remcalc-16px;
	}
}

table.ontario-table--condensed {
	td {
		padding: $ontario-remcalc-12px $ontario-remcalc-16px $ontario-remcalc-12px $ontario-remcalc-24px;
		text-align: left;
	}

	td.ontario-table-cell--numeric {
		padding: $ontario-remcalc-12px $ontario-remcalc-24px $ontario-remcalc-12px $ontario-remcalc-16px;
		font-size: $ontario-remcalc-17px;
		text-align: right;
	}

	tbody th,
	tfoot th {
		padding: $ontario-remcalc-12px $ontario-remcalc-16px $ontario-remcalc-12px $ontario-remcalc-24px;
	}

	tr.ontario-table-row--highlight th img.ontario-table--highlight-indicator {
		top: $ontario-remcalc-17px;
	}

	tr.ontario-table-row--subtotal,
	tfoot tr {
		th,
		td {
			padding: $ontario-remcalc-16px $ontario-remcalc-16px $ontario-remcalc-16px $ontario-remcalc-24px;
		}

		td.ontario-table-cell--numeric {
			text-align: right;
			padding: $ontario-remcalc-16px $ontario-remcalc-24px $ontario-remcalc-16px $ontario-remcalc-16px;
		}
	}

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		td {
			padding: $ontario-remcalc-12px $ontario-remcalc-8px $ontario-remcalc-12px $ontario-remcalc-16px;
			font-size: $ontario-remcalc-16px;
		}

		td.ontario-table-cell--numeric {
			padding: $ontario-remcalc-12px $ontario-remcalc-16px $ontario-remcalc-12px $ontario-remcalc-8px;
		}

		tbody th {
			padding: $ontario-remcalc-12px $ontario-remcalc-8px $ontario-remcalc-12px $ontario-remcalc-16px;
		}

		tr.ontario-table-row--subtotal,
		tfoot tr {
			th,
			td {
				padding: $ontario-remcalc-16px $ontario-remcalc-8px $ontario-remcalc-16px $ontario-remcalc-16px;
			}

			td.ontario-table-cell--numeric {
				text-align: right;
				padding: $ontario-remcalc-16px $ontario-remcalc-16px $ontario-remcalc-16px $ontario-remcalc-8px;
			}
		}
	}
}

tbody {
	font-size: $ontario-remcalc-16px;

	vertical-align: top;

	tr {
		border: solid;
		border-width: globalFunctions.px-to-rem(1) 0;
		border-color: $ontario-table-row-divider;
	}

	tr:last-child {
		border-width: globalFunctions.px-to-rem(3) 0;
		border-top-width: 0;
		border-color: colours.$ontario-colour-black;
	}

	tr.ontario-table-row--highlight {
		background-color: $ontario-table-highlight !important;

		th {
			padding-left: $ontario-remcalc-24px;
			display: flex;
			position: relative;

			img.ontario-table--highlight-indicator {
				// Width of yellow triangle svg
				width: $ontario-remcalc-8px;
				position: absolute;
				// Distance from top of svg to top of container
				top: $ontario-remcalc-24px;
				left: 0;
			}
		}
	}
}

thead {
	border: solid;
	border-width: globalFunctions.px-to-rem(3) 0;
	border-color: colours.$ontario-colour-black;
	vertical-align: top;

	th {
		text-align: left;
		padding: $ontario-remcalc-28px $ontario-remcalc-16px $ontario-remcalc-28px $ontario-remcalc-24px;
		margin: spacing.$spacing-0;
		font-size: $ontario-remcalc-18px;
		line-height: $ontario-remcalc-24px;
		text-size-adjust: none;
		-webkit-text-size-adjust: none;

		@media screen and (max-width: breakpoints.$small-breakpoint) {
			font-size: $ontario-remcalc-16px;
			line-height: globalFunctions.px-to-rem(21);
			padding: $ontario-remcalc-24-5px $ontario-remcalc-8px $ontario-remcalc-24-5px $ontario-remcalc-16px;
		}
	}

	th.ontario-table-cell--numeric {
		padding: $ontario-remcalc-28px $ontario-remcalc-24px $ontario-remcalc-28px $ontario-remcalc-16px;
		text-align: right;

		@media screen and (max-width: breakpoints.$small-breakpoint) {
			padding: $ontario-remcalc-24-5px $ontario-remcalc-16px $ontario-remcalc-24-5px $ontario-remcalc-8px;
		}
	}
}

td.ontario-table-cell--numeric strong {
	font-family: 'Courier Prime', Courier, 'Courier New', monospace;
}

.ontario-table-header--column-span-1 {
	//Equivalent to 1 grid columns
	min-width: 8.33333vw;
}

.ontario-table-header--column-span-2 {
	//Equivalent to 2 grid columns
	min-width: 16.66666vw;
}

.ontario-table-header--column-span-3 {
	//Equivalent to 3 grid columns
	min-width: 25vw;
}

.ontario-table-header--column-span-4 {
	//Equivalent to 4 grid columns
	min-width: 33.33333vw;
}

.ontario-table-header--column-span-5 {
	//Equivalent to 5 grid columns
	min-width: 41.66666vw;
}

.ontario-table-header--column-span-6 {
	//Equivalent to 6 grid columns
	min-width: 50vw;
}

.ontario-table-header--column-span-7 {
	//Equivalent to 7 grid columns
	min-width: 58.33333vw;
}

.ontario-table-header--column-span-8 {
	//Equivalent to 8 grid columns
	min-width: 66.66666vw;
}

.ontario-table-header--column-span-9 {
	//Equivalent to 9 grid columns
	min-width: 75vw;
}

.ontario-table-header--column-span-10 {
	//Equivalent to 10 grid columns
	min-width: 83.33333vw;
}

.ontario-table-header--column-span-11 {
	//Equivalent to 11 grid columns
	min-width: 91.66666vw;
}

.ontario-table-header--column-span-12 {
	//Equivalent to 12 grid columns
	min-width: 100vw;
}

tbody th,
tfoot th {
	padding: $ontario-remcalc-19px $ontario-remcalc-16px $ontario-remcalc-19px $ontario-remcalc-24px;
	text-align: left;
	letter-spacing: globalFunctions.px-to-rem(0.4);
	font-weight: bold;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: $ontario-remcalc-16px;
		line-height: globalFunctions.px-to-rem(26);
		padding: $ontario-remcalc-19px $ontario-remcalc-8px $ontario-remcalc-19px $ontario-remcalc-16px;
	}
}

td {
	padding: $ontario-remcalc-19px $ontario-remcalc-16px $ontario-remcalc-19px $ontario-remcalc-24px;
	text-align: left;
	letter-spacing: globalFunctions.px-to-rem(0.4);

	img {
		vertical-align: top;
		@media screen and (max-width: breakpoints.$small-breakpoint) {
			max-width: none !important;
		}
	}
}

td.ontario-table-cell--numeric,
th.ontario-table-cell--directory {
	padding: $ontario-remcalc-19px $ontario-remcalc-24px $ontario-remcalc-19px $ontario-remcalc-16px;
	text-align: right;
	font-family: 'Courier Prime', Courier, 'Courier New', monospace;
	font-size: $ontario-remcalc-17px;
}

th.ontario-table-cell--directory {
	text-align: left;
	font-weight: fontWeights.$ontario-font-weights-bold;
}

tr.ontario-table-row--subtotal,
tfoot tr {
	border: solid;
	border-width: globalFunctions.px-to-rem(3) 0;
	font-size: $ontario-remcalc-16px;
	border-color: colours.$ontario-colour-black;

	td {
		font-weight: bold;
		padding: $ontario-remcalc-23px $ontario-remcalc-16px $ontario-remcalc-23px $ontario-remcalc-24px;
	}
}

tbody {
	tr.ontario-table-row--subtotal {
		th {
			padding: $ontario-remcalc-23px $ontario-remcalc-16px $ontario-remcalc-23px $ontario-remcalc-24px;
		}
	}
}

tfoot {
	vertical-align: top;

	th {
		padding: $ontario-remcalc-23px $ontario-remcalc-16px $ontario-remcalc-23px $ontario-remcalc-24px;
	}
}

tr.ontario-table-row--subtotal {
	background-color: $ontario-table-subtotal !important;
}

tfoot tr {
	background-color: $ontario-table-total !important;
}

/*Table component colours*/
.ontario-bg-ontario-table-row-divider {
	background-color: $ontario-table-row-divider;
}
.ontario-bg-ontario-table-caption-background {
	background-color: $ontario-table-caption-background;
}
.ontario-bg-ontario-table-highlight {
	background-color: $ontario-table-highlight;
}
.ontario-bg-ontario-table-subtotal {
	background-color: $ontario-table-subtotal;
}
.ontario-bg-ontario-table-total {
	background-color: $ontario-table-total;
}
  • URL: /components/raw/tables/tables.scss
  • Filesystem Path: fractal/components/components/tables/tables.scss
  • Size: 11.4 KB
  • Content: 
    caption{background-color:#0000001a;padding:1.125rem 1rem 1.125rem 1.5rem;text-align:left;font-weight:bold;font-size:1.375rem;line-height:2.1875rem;display:table-caption}@media screen and (max-width: 40em){caption{font-size:1.25rem;line-height:1.875rem;padding-left:1rem}}.ontario-table-container{position:relative;margin:.5rem 0 2.5rem 0}.ontario-table-container table:not(.ontario-table--no-zebra-stripes) tbody tr:first-child:nth-last-child(n+6):nth-child(even),.ontario-table-container table:not(.ontario-table--no-zebra-stripes) tbody tr:first-child:nth-last-child(n+6)~tr:nth-child(even){background-color:#0000000d}.ontario-table-div{overflow-x:auto;background:linear-gradient(to right, #FFFFFF 30%, rgba(255, 255, 255, 0)),linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 70%) 0 100%,linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(252, 0, 0, 0) 100.01%),linear-gradient(to left, rgba(0, 0, 0, 0.2) 0%, rgba(252, 0, 0, 0) 100.01%);background-repeat:no-repeat;background-size:2.5rem 100%,2.5rem 100%,.875rem 100%,.875rem 100%;background-position:0 0,100%,0 0,100%;background-attachment:local,local,scroll,scroll}@media screen and (max-width: 40em){.ontario-table-div{overflow-x:scroll}}.ontario-table-scroll--wrapper{height:20px;overflow-x:auto;overflow-y:hidden;display:block}table{border-collapse:collapse;font-size:1.0625rem;display:table;line-height:1.625rem;font-weight:normal}table.ontario-table--full-container-width{display:table;width:100% !important}@media screen and (max-width: 40em){table{font-size:1rem}}table.ontario-table--condensed td{padding:.75rem 1rem .75rem 1.5rem;text-align:left}table.ontario-table--condensed td.ontario-table-cell--numeric{padding:.75rem 1.5rem .75rem 1rem;font-size:1.0625rem;text-align:right}table.ontario-table--condensed tbody th,table.ontario-table--condensed tfoot th{padding:.75rem 1rem .75rem 1.5rem}table.ontario-table--condensed tr.ontario-table-row--highlight th img.ontario-table--highlight-indicator{top:1.0625rem}table.ontario-table--condensed tr.ontario-table-row--subtotal th,table.ontario-table--condensed tr.ontario-table-row--subtotal td,table.ontario-table--condensed tfoot tr th,table.ontario-table--condensed tfoot tr td{padding:1rem 1rem 1rem 1.5rem}table.ontario-table--condensed tr.ontario-table-row--subtotal td.ontario-table-cell--numeric,table.ontario-table--condensed tfoot tr td.ontario-table-cell--numeric{text-align:right;padding:1rem 1.5rem 1rem 1rem}@media screen and (max-width: 40em){table.ontario-table--condensed td{padding:.75rem .5rem .75rem 1rem;font-size:1rem}table.ontario-table--condensed td.ontario-table-cell--numeric{padding:.75rem 1rem .75rem .5rem}table.ontario-table--condensed tbody th{padding:.75rem .5rem .75rem 1rem}table.ontario-table--condensed tr.ontario-table-row--subtotal th,table.ontario-table--condensed tr.ontario-table-row--subtotal td,table.ontario-table--condensed tfoot tr th,table.ontario-table--condensed tfoot tr td{padding:1rem .5rem 1rem 1rem}table.ontario-table--condensed tr.ontario-table-row--subtotal td.ontario-table-cell--numeric,table.ontario-table--condensed tfoot tr td.ontario-table-cell--numeric{text-align:right;padding:1rem 1rem 1rem .5rem}}tbody{font-size:1rem;vertical-align:top}tbody tr{border:solid;border-width:.0625rem 0;border-color:#0000004d}tbody tr:last-child{border-width:.1875rem 0;border-top-width:0;border-color:#1a1a1a}tbody tr.ontario-table-row--highlight{background-color:#e191003c !important}tbody tr.ontario-table-row--highlight th{padding-left:1.5rem;display:flex;position:relative}tbody tr.ontario-table-row--highlight th img.ontario-table--highlight-indicator{width:.5rem;position:absolute;top:1.5rem;left:0}thead{border:solid;border-width:.1875rem 0;border-color:#1a1a1a;vertical-align:top}thead th{text-align:left;padding:1.75rem 1rem 1.75rem 1.5rem;margin:0;font-size:1.125rem;line-height:1.5rem;-moz-text-size-adjust:none;text-size-adjust:none;-webkit-text-size-adjust:none}@media screen and (max-width: 40em){thead th{font-size:1rem;line-height:1.3125rem;padding:1.53125rem .5rem 1.53125rem 1rem}}thead th.ontario-table-cell--numeric{padding:1.75rem 1.5rem 1.75rem 1rem;text-align:right}@media screen and (max-width: 40em){thead th.ontario-table-cell--numeric{padding:1.53125rem 1rem 1.53125rem .5rem}}td.ontario-table-cell--numeric strong{font-family:"Courier Prime",Courier,"Courier New",monospace}.ontario-table-header--column-span-1{min-width:8.33333vw}.ontario-table-header--column-span-2{min-width:16.66666vw}.ontario-table-header--column-span-3{min-width:25vw}.ontario-table-header--column-span-4{min-width:33.33333vw}.ontario-table-header--column-span-5{min-width:41.66666vw}.ontario-table-header--column-span-6{min-width:50vw}.ontario-table-header--column-span-7{min-width:58.33333vw}.ontario-table-header--column-span-8{min-width:66.66666vw}.ontario-table-header--column-span-9{min-width:75vw}.ontario-table-header--column-span-10{min-width:83.33333vw}.ontario-table-header--column-span-11{min-width:91.66666vw}.ontario-table-header--column-span-12{min-width:100vw}tbody th,tfoot th{padding:1.1875rem 1rem 1.1875rem 1.5rem;text-align:left;letter-spacing:.025rem;font-weight:bold}@media screen and (max-width: 40em){tbody th,tfoot th{font-size:1rem;line-height:1.625rem;padding:1.1875rem .5rem 1.1875rem 1rem}}td{padding:1.1875rem 1rem 1.1875rem 1.5rem;text-align:left;letter-spacing:.025rem}td img{vertical-align:top}@media screen and (max-width: 40em){td img{max-width:none !important}}td.ontario-table-cell--numeric,th.ontario-table-cell--directory{padding:1.1875rem 1.5rem 1.1875rem 1rem;text-align:right;font-family:"Courier Prime",Courier,"Courier New",monospace;font-size:1.0625rem}th.ontario-table-cell--directory{text-align:left;font-weight:700}tr.ontario-table-row--subtotal,tfoot tr{border:solid;border-width:.1875rem 0;font-size:1rem;border-color:#1a1a1a}tr.ontario-table-row--subtotal td,tfoot tr td{font-weight:bold;padding:1.4375rem 1rem 1.4375rem 1.5rem}tbody tr.ontario-table-row--subtotal th{padding:1.4375rem 1rem 1.4375rem 1.5rem}tfoot{vertical-align:top}tfoot th{padding:1.4375rem 1rem 1.4375rem 1.5rem}tr.ontario-table-row--subtotal{background-color:#007b9e1d !important}tfoot tr{background-color:#0077a056 !important}.ontario-bg-ontario-table-row-divider{background-color:#0000004d}.ontario-bg-ontario-table-caption-background{background-color:#0000001a}.ontario-bg-ontario-table-highlight{background-color:#e191003c}.ontario-bg-ontario-table-subtotal{background-color:#007b9e1d}.ontario-bg-ontario-table-total{background-color:#0077a056}
  • URL: /components/raw/tables/tables.css
  • Filesystem Path: fractal/components/components/tables/tables.css
  • Size: 6.5 KB

Guiding principle: Design for everyone.

When to use this component

Use tables to display information in a data set. Tables should make it easy to compare and analyze information.

When not to use this component

Here are times when you should not use a table:

  • to lay out non-tabular information in dashboards or other interface designs ⁠— use a layout grid instead
  • for presenting search results or lists of locations — use a list format with headings instead
  • for data that is long and wordy — use conventional page headings and paragraphs instead
  • for data that is better suited for robust data visualization — use a bar graph, infographic or other type of chart instead

Component features

Example

Diagram showing the structure of a table, including header area, body area, footer area, caption, column headers, row cells, highlight row, subtotal row, and total row.

Header area

Caption

Captions can function as the table title. Use a caption if you don’t have a descriptive heading (for example, an h2 or h3) directly above the table to specify the content of the table.

On a page with multiple tables, use a caption for each table to provide a more accessible experience.

Column headers

Column headers are the top headings for table columns.

Headings should be:

  • left-aligned for regular text columns
  • right-aligned for numeric data columns

Body area

Cells

Cells contain the data that comprises a table.

Tables consist of three types of cell formats:

  • row header — bolded font, left-aligned
  • text data — regular font, left-aligned
  • numeric data — monospace font, right-aligned

Zebra Striping

Zebra striping adds shading to even-numbered rows (row two, row four, etc.). It improves the readability of longer tables by guiding the reader’s eye along the row.

Zebra striping is automatically included in tables with more than five rows.

You can disable zebra striping by adding the ontario-table--no-zebra-stripes class to the <table> element.

Highlight row

A highlight row is used to call out a specific row with important information.

Subtotal row

A subtotal row is used in a numeric table to show a subtotal row.

Total row

A total row is used in a numeric table to show a summary or total row.

Styles will be automatically will be applied to rows in the <tfoot> area

Scrollbar behaviour

Scrollbar behaviour for tables is determined by the browser and is not built into the table component. On Apple iOS devices, scrollbars may not be fully visible. (This behaviour is the same on all browsers on iOS, including Chrome and Firefox, because they all rely on the Safari browser engine and render the content in the same way.) We do not recommend adding custom scrollbar behaviour to tables.

Condensed tables

Condensed tables show table data in cells with reduced top and bottom padding. Use in pages with multiple data-heavy tables such as a budget or financial data.

Example

Diagram showing the difference between the body cell height for default and condensed tables.

Wide tables

Table content may be too wide to display on the screen all at once. This is common on mobile device screens and can also happen when a wide table with a lot of columns is viewed on a desktop computer screen.

The table component has built-in overflow features that automatically appear when a table’s width exceeds the visible screen area:

Example

Diagram of a wide table showing the built-in overflow features of the table component (shadow and horizontal scroll bars).

Overflow shadow

An overflow shadow indicates that the table data extends beyond the visible content area. It appears automatically on the sides of the table when it is wider than the content area.

Horizontal scroll bar

A horizontal scroll bar allows users to scroll only the table and not the entire page. It appears automatically at the top and bottom of a table when it is wider than the content area.

Best practices

Do

  • ensure table cell content is brief and scannable
  • provide concise and descriptive table titles (<caption>) and row/column headers (<th>)
  • include units of measurement in the column headers
  • align non-numeric text to the left
  • align numeric data to the right and use a monospaced font (Courier Prime) for it
    • this includes:
      • amounts such as measurements and money, including decimals
      • calculated values such as percentages, averages, medians and mean
    • this doesn’t include:
      • phone numbers
      • dates or time (for example, operating hours)
      • postal/zip codes
      • identification numbers
  • align headers according to their column data — headers for text data should be left-aligned and headers for numeric data should be right-aligned

Do this:

Example of a table with headers for text data left-aligned and headers for numeric data right-aligned.

Don't do this:

Example of a table with headers for numeric data left-aligned.
  • include zebra striping in tables with more than five rows
  • organize information in a meaningful way, such as hierarchically or alphabetically
  • keep data consistent (use the same units of measurement, same number of decimals in each cell, etc.)
  • use condensed tables for:
    • tables with multiple subtotals within a single table
    • tables on data-heavy pages with multiple sequential tables (for example, budget or finance pages

Don’t

  • merge cells
  • nest tables
  • centre-align text
  • repeat units of measurement in individual data cells
  • leave data cells empty — use “null,” “0” or “N/A” (for “not applicable” or “not available”; wrapped in an <abbr> tag with title="not applicable" or "not available") in place of blank cells
  • include multiple data values in one cell

Do this:

Example of a table with data separated into columns.

Don't do this:

Example of a table with multiple data values together in the same cells.

Complex tables

Here’s what you should consider when creating complex tables:

  • Split the complex table into multiple simple tables if possible.
  • Describe the layout and organization of the complex table using the summary attribute for people using assistive devices.
  • Use <colgroup> / <rowgroup> / <thead> / <tbody> / <tfoot> tags and the colspan / rowspan / id / scope attributes when coding complex tables with multi-level or irregular headers to ensure people using assistive devices can access the content. Learn how to use these tags and attributes when formatting tables with multi-level headers and tables with irregular headers.

Technical Specifications

Format tables using semantic HTML and logical structure to be as accessible as possible.

Use:

  • <caption> tag for the table title
  • <tr> to group rows
  • <th> to create header cells
  • <td> to create table cells
  • <thead> to group column headers
  • <tbody> to group non-header rows
  • <tfoot> for “total” rows
  • scope attribute on column and row headers to help screen reader users navigate the table
    • column headers: <th scope="col">
    • row headers: <th scope="row">

See the W3C guidelines for creating properly structured HTML tables.

Component-specific classes

  • ontario-table-cell--numeric
    • to the <th> element to create a numeric header
    • to the <td> element to create a numeric cell
  • ontario-table--condensed on the <table> element to create a condensed table
  • ontario-table-row--highlight on the <tr> element to create a highlighted row
    • Will require <img class="ontario-table--highlight-indicator" src="highlightIndicatorPath"/> before the content within the <th> element
  • ontario-table-row--subtotal to the <tr> element to create a subtotal row
  • ontario-table--no-zebra-stripes to the <table> element to remove zebra striping

Component-specific colours

Colour Colour name Hex code SCSS variable Notes
Table Row Divider #B2B2B2 $ontario-table-row-divider Used for dividing body rows
Table Caption Background #E5E5E5 $ontario-table-caption-background Used for the caption row
Table Highlight #F8E5C3 $ontario-table-highlight Used for highlighted rows
Table Subtotal #E2F0F4 $ontario-table-subtotal Used for subtotal rows
Table Total #A9D1DF $ontario-table-total Used for total rows

If you have any questions or feedback, please get in touch.