Tables
Tables provide a structured way to display information in rows and columns. This makes it easier for users to scan, sort and compare information.
Default
By default, the tables scroll horizontally at smaller breakpoints.
<div class="nsw-wysiwyg-content nsw-container">
<div class="nsw-table-responsive" role="region" aria-labelledby="caption1" tabindex="0">
<table class="nsw-table ">
<caption id="caption1">Table caption for responsive scroll version</caption>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>Donec velit neque, auctor sit amet aliquam</td>
<td>Vestibulum ante ipsum primis</td>
<td>Praesent sapien massa</td>
</tr>
<tr>
<td>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</td>
<td>convallis a pellentesque nec</td>
<td>egestas non nisi</td>
</tr>
<tr>
<td>Quisque velit nisi, pretium ut lacinia</td>
<td>elementum id enim</td>
<td>Donec velit neque, auctor sit amet aliquam</td>
</tr>
<tr>
<td>Vestibulum ante ipsum primis</td>
<td>Praesent sapien massa</td>
<td>Vestibulum ante ipsum primis</td>
</tr>
</tbody>
</table>
</div>
</div>
Stacked mobile version
An alternative approach is to rearrange the data and stack it to avoid horizontal scrolling at smaller breakpoints.
Please note that if you choose this option, you should test to ensure it works for all audiences, including those using screen readers.
<div class="nsw-wysiwyg-content nsw-container">
<table class="nsw-table js-responsive-table nsw-table--stacked">
<caption>Example html table caption</caption>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td role="cell">Donec velit neque, auctor sit amet aliquam</td>
<td role="cell">Vestibulum ante ipsum primis</td>
<td role="cell">Praesent sapien massa</td>
</tr>
<tr role="row">
<td role="cell">Vestibulum ante ipsum primis in faucibus orci</td>
<td role="cell">Convallis a pellentesque nec</td>
<td role="cell">Egestas non nisi</td>
</tr>
<tr role="row">
<td role="cell">Quisque velit nisi, pretium ut lacinia</td>
<td role="cell">Elementum id enim</td>
<td role="cell">Donec velit neque, auctor sit amet aliquam</td>
</tr>
<tr role="row">
<td role="cell">Vestibulum ante ipsum primis</td>
<td role="cell">Praesent sapien massa</td>
<td role="cell">Vestibulum ante ipsum primis</td>
</tr>
</tbody>
</table>
</div>
<script src="/js/main.js"></script>
<script>window.NSW.initSite()</script>
<div id="window_resizer_tooltip_wrapper" data-pos-y="bottom" data-pos-x="right" class="" style="transform: scale(1) translateY(567px) translateX(1571px);"></div>
Striped
Use zebra striping for wide complex tables, with more than 5 rows, to make it easier to scan. Don't use striping for small simple tables.
<div class="nsw-wysiwyg-content nsw-container">
<div class="nsw-table-responsive" role="region" aria-labelledby="caption1" tabindex="0">
<table class="nsw-table nsw-table--striped">
<caption id="caption1">Table caption for responsive scroll version</caption>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>Donec velit neque, auctor sit amet aliquam</td>
<td>Vestibulum ante ipsum primis</td>
<td>Praesent sapien massa</td>
</tr>
<tr>
<td>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</td>
<td>convallis a pellentesque nec</td>
<td>egestas non nisi</td>
</tr>
<tr>
<td>Quisque velit nisi, pretium ut lacinia</td>
<td>elementum id enim</td>
<td>Donec velit neque, auctor sit amet aliquam</td>
</tr>
<tr>
<td>Vestibulum ante ipsum primis</td>
<td>Praesent sapien massa</td>
<td>Vestibulum ante ipsum primis</td>
</tr>
</tbody>
</table>
</div>
</div>
Top caption
Use a caption to describe the table's contents. The caption may be displayed at the top if required.
<div class="nsw-wysiwyg-content nsw-container">
<div class="nsw-table-responsive" role="region" aria-labelledby="caption1" tabindex="0">
<table class="nsw-table nsw-table--caption-top">
<caption id="caption1">Table caption for responsive scroll version</caption>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>Donec velit neque, auctor sit amet aliquam</td>
<td>Vestibulum ante ipsum primis</td>
<td>Praesent sapien massa</td>
</tr>
<tr>
<td>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</td>
<td>convallis a pellentesque nec</td>
<td>egestas non nisi</td>
</tr>
<tr>
<td>Quisque velit nisi, pretium ut lacinia</td>
<td>elementum id enim</td>
<td>Donec velit neque, auctor sit amet aliquam</td>
</tr>
<tr>
<td>Vestibulum ante ipsum primis</td>
<td>Praesent sapien massa</td>
<td>Vestibulum ante ipsum primis</td>
</tr>
</tbody>
</table>
</div>
</div>
Borders
Use borders to increase readability of content-dense tables.
<div class="nsw-wysiwyg-content nsw-container">
<div class="nsw-table-responsive" role="region" aria-labelledby="caption1" tabindex="0">
<table class="nsw-table nsw-table--bordered">
<caption id="caption1">Table caption for responsive scroll version</caption>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>Donec velit neque, auctor sit amet aliquam</td>
<td>Vestibulum ante ipsum primis</td>
<td>Praesent sapien massa</td>
</tr>
<tr>
<td>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</td>
<td>convallis a pellentesque nec</td>
<td>egestas non nisi</td>
</tr>
<tr>
<td>Quisque velit nisi, pretium ut lacinia</td>
<td>elementum id enim</td>
<td>Donec velit neque, auctor sit amet aliquam</td>
</tr>
<tr>
<td>Vestibulum ante ipsum primis</td>
<td>Praesent sapien massa</td>
<td>Vestibulum ante ipsum primis</td>
</tr>
</tbody>
</table>
</div>
</div>
Tables are a familiar way to present large amounts of data.
Tables apply a logically structure through a grid to make it easier to scan and understand.
Use tables for data sets that share common attributes.
Use tables to logically structure content and make it easier to scan, sort and compare.
Left align table contents with the exception of numerical data, to facilitate easy scanning.
Right align numerical data and apply mono-spacing for easier scanning and comparison.
.nsw-table--striped
Display content in a way that is meaningful, such as ordering by hierarchy or alphabetically. Organise contents with the most important/relevant from top to bottom or left to right.
Use a caption to describe the table's contents. The caption may be displayed at the top if required.
.nsw-table--caption-top
Use borders to increase readability of content-dense tables.
.nsw-table--bordered
Don’t use the tables to layout content on a page. You can combine other patterns for displaying your content.
Tables with sparse, widely separated data are hard to scan and read. Customise the table width for greater legibility.
Favour wrapping over truncating content. Multiple items starting with the same word may appear the same when truncated.