Tables

By digitalnsw_service on Mon, 01/06/2020 - 14:06

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>

 

Copy

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>

 

Copy

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>

 

Copy

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>

 

Copy

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>

 

Copy

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.