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

Curriculum Criteria Level I Level II Level III
Ethical and Professional Standards 15 10-15 10-15
Quantitative Methods 15 10-15 10-15
Economics 15 10-15 10-15
Financial Reporting and Analysis 15 10-15 10-15
Financial Reporting and Analysis 15 10-15 10-15

Code

HTML

<div class="full-width comparison-table">
    <table>
        <thead>
            <tr>
                <th scope="col">Curriculum Criteria</th>
                <th scope="col">Level I</th>
                <th scope="col">Level II</th>
                <th scope="col">Level III</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Ethical and Professional Standards</th>
                <td>15</td>
                <td>10-15</td>
                <td>10-15</td>
            </tr>
            <tr>
                <th scope="row">Quantitative Methods</th>
                <td>15</td>
                <td>10-15</td>
                <td>10-15</td>
            </tr>
            <tr>
                <th scope="row">Economics</th>
                <td>15</td>
                <td>10-15</td>
                <td>10-15</td>
            </tr>
            <tr>
                <th scope="row">Financial Reporting and Analysis</th>
                <td>15</td>
                <td>10-15</td>
                <td>10-15</td>
            </tr>
        </tbody>
    </table>
</div>
                

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.