Tables

Example: Simple Table

Name Position Office Age
Airi Satou 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
Ethical and Professional Standards 15 10-15
Quantitative Methods 15 10-15
Economics 15 10-15
Financial Reporting and Analysis 15 10-15
Financial Reporting and Analysis 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

High-impact content needs to be displayed in a way that allows users to compare across categories.

When To Use

It can be used to support comparison of up to three columns of content.

When Not To Use

It should not be used for complex or data-heavy tabular content.

Formatting

  • Comparison tables require JS to display extra design elements.