Tables

Example: Simple Table

Name Position Office Age
Airi Satou Accountant Tokyo 33
Angelica Ramos Chief Executive Officer (CEO) London 47
Ashton Cox Junior Technical Author San Francisco 66
Bradley Greer Software Engineer London 41
Brenden Wagner Software Engineer San Francisco 28
Brielle Williamson Integration Specialist New York 61
Bruno Nash Software Engineer London 38

Code

HTML

<table class="adjust-for-mobile">
    <thead>
        <tr role="row">
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr role="row">
            <td data-label="Name">Airi Satou</td>
            <td data-label="Position">Accountant</td>
            <td data-label="Office">Tokyo</td>
            <td data-label="Age">33</td>
        </tr>
    </tbody>
</table>
                

Documentation

Problem Being Solved

Content needs to be displayed in a table format.

When To Use

This pattern can be used for any tabular data that does not exceed 4 columns.

When Not To use

This pattern should not be used for complex or data-heavy tables, or if the goal of the table is to compare information across categories.

Example: Comparison Table

Level I Knowledge and Comprehension Investment Tools
Level II Application and Analysis Asset Valuation
Level III Synthesis and Evaluation Portfolio Management

Code

HTML

<table class="comparison-table">
    <tbody class="js">
        <tr class="equal-height">
            <th>
                Level I
            </th>
            <td data-rhead="Learning Focus">
                Knowledge and Comprehension
            </td>
            <td data-rhead="Topic Focus">
                Investment Tools
            </td>
        </tr>
        <tr class="equal-height">
            <th>
                Level II
            </th>
            <td data-rhead="Learning Focus">
                Application and Analysis
            </td>
            <td data-rhead="Topic Focus">
                Asset Valuation
            </td>
        </tr>
        <tr class="equal-height">
            <th>
                Level III
            </th>
            <td data-rhead="Learning Focus">
                Synthesis and Evaluation
            </td>
            <td data-rhead="Topic Focus">
                Portfolio Management
            </td>
        </tr>
    </tbody>
</table>
                

Documentation

Problem Being Solved

Content needs to be displayed in a way that allows users to compare across categories.

When To Use

This pattern can be used when there are no more than 3 categories to compare. It should be used only for high-importance content that benefits from showcasing.

When Not To use

If there are more than 3 categories to be compared, or the content is of secondary importance, an alternative should be used.

Formatting

  • Comparison tables require JS to force equal cell heights, otherwise they will default to mobile view.
  • They can be used in either normal or wide content wells.