Table

When to use it

The Table component is used to display tabular data in a structured format. It is commonly used for data presentation, comparison, and analysis.

Variants

• Striped: Use the .c-table--striped modifier to create "zebra" rows.
• Sticky: Use the .c-table--sticky modifier to enable sticky table header cells on rows and columns.
• Fixed: Use the .c-table--fixed modifier to create a "fixed" table where the table and column widths are set by the widths of table and col elements or by the width of the first row of cells.

TIP

To enable a "cropped" table (e.g., very wide tables), wrap the component in a Cropped object.

What it looks like

Code examples

Default

<table class="c-table">
    <caption class="c-table__caption">Table head below caption</caption>
    <thead class="c-table__head">
        <tr class="c-table__row">
            <th scope="col">Heading cell</th>
            <th scope="col">Heading cell</th>
            <th scope="col">Heading cell</th>
        </tr>
    </thead>
    <tbody class="c-table__body">
        <tr class="c-table__row">
            <td>Ut enim ad minim veniam, quis  ex ea commodo consequat.</td>
            <td>Ut enim ad minim veniam, quis nostrud ea commodo consequat.</td>
            <td>Loremipsumdolorsitamet, consectetur or incididunt ut labore et dolore magna aliqua.</td>
        </tr>
        <tr class="c-table__row">
            <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco do consequat.</td>
            <td>Loremipsumdolorsitametconsectetur adipisicing elit, abore et dolore magna aliqua.</td>
            <td>Ad minim veniam, quis nostrud exercitation ullamco laboris equat.</td>
        </tr>
        <tr class="c-table__row">
            <td>Loremipsumdolorsitametconsectetur adipisicing elit, e et dolore magna aliqua.</td>
            <td>Ad minim veniam, quis nostrud exercitation  commodo consequat.</td>
            <td>Ut enim ad minim veniam, quis quip ex ea commodo consequat.</td>
        </tr>
    </tbody>
</table>

Sticky

<table class="c-table c-table--sticky">
    <thead class="c-table__head">
        <tr class="c-table__row">
            <th scope="col"><span>Sticky heading cell</span></th>
            <th scope="col"><span>Sticky heading cell</span></th>
            <th scope="col"><span>Sticky heading cell</span></th>
        </tr>
    </thead>
    <tbody class="c-table__body">
        <tr class="c-table__row">
            <th scope="row">Sticky table row header 1</th>
            <td>Ut enim ad minim veniam, quis nostrud ea commodo consequat.</td>
            <td>Loremipsumdolorsitamet, consectetur or incididunt ut labore et dolore magna aliqua.</td>
        </tr>
        <tr class="c-table__row">
            <th scope="row">Sticky table row header 2</th>
            <td>Loremipsumdolorsitametconsectetur adipisicing elit, abore et dolore magna aliqua.</td>
            <td>Ad minim veniam, quis nostrud exercitation ullamco laboris equat.</td>
        </tr>
        <tr class="c-table__row">
            <th scope="row">Sticky table row header 3</th>
            <td>Ad minim veniam, quis nostrud exercitation  commodo consequat.</td>
            <td>Ut enim ad minim veniam, quis quip ex ea commodo consequat.</td>
        </tr>
    </tbody>
</table>

Fixed

<table class="c-table c-table--fixed">
    <tbody class="c-table__body">
        <tr class="c-table__row">
            <th scope="row">Startar</th>
            <td>fredagen den 20 januari 19:00</td>
        </tr>
        <tr class="c-table__row">
            <th scope="row">Slutar</th>
            <td>lördagen den 18 november 22:00</td>
        </tr>
        <tr class="c-table__row">
            <th scope="row">Skapat</th>
            <td>onsdagen den 18 januari 14:53 av Kalle Kula</td>
        </tr>
        <tr class="c-table__row">
            <th scope="row">[SOW] EventID</th>
            <td>63456</td>
        </tr>
        <tr class="c-table__row">
            <th scope="row">Numrerat</th>
            <td>Nej</td>
        </tr>
    </tbody>
</table>

Striped

<table class="c-table c-table--striped">
    <thead class="c-table__head">
        <tr class="c-table__row">
            <th scope="col">Heading 1</th>
            <th scope="col">Heading 2</th>
            <th scope="col">Heading 3</th>
            <th scope="col">Heading 4</th>
            <th scope="col">Heading 5</th>
        </tr>
    </thead>
    <tbody class="c-table__body">
        <tr class="c-table__row">
            <td>orsitamet consectetur</td>
            <td>adipisicing elit, sed</td>
            <td>do eiusmod tempor incididunt ut</td>
            <td>abore et dolore magna aliqua</td>
            <td>sum intate et dolore magna aliqua</td>
        </tr>
        <tr class="c-table__row">
            <td>minim venia qui nostrud</td>
            <td>exercitation ullamco laboris nisi</td>
            <td>ut aliquip ex ea commodo</td>
            <td>onsequat in</td>
            <td>sum intate in</td>
        </tr>
        <tr class="c-table__row">
            <td>enim ad minim veniam</td>
            <td>quis nostrud exercitation ullamco</td>
            <td>laboris nisi ut aliquip ex</td>
            <td>a commodo consequat</td>
            <td>sum intate commodo consequat</td>
        </tr>
        <tr class="c-table__row">
            <td>quis nostrud exercitation ullamco</td>
            <td>laboris nisi ut aliquip ex</td>
            <td>enim ad minim veniam</td>
            <td>commodo consequat</td>
            <td>sum intate commodo consequat</td>
        </tr>
    </tbody>
</table>

Accessibility notes

The <table> element comes with much accessibility built-in, but only if you use appropriate elements such as <thead>, <tbody> and <th> to indicate table head, body and headings, if such exist in your data.