Table

Headers

Use table headers to tell users what the rows and columns represent. Use the scope attribute to help users of assistive technology distinguish between row and column headers. How tables work

Accessibility

Follow WebAIM's guidance for tables and

give tables captions
use the scope attribute to associate the data cells with the appropriate headers
let the browser window determine the width of the table whenever possible, to reduce horizontal scrolling

Captions

Use the <caption> element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.

Responsive design

Tables too wide to display in full display with a scroll bar. This can be seen in the scoped column and row variation.

When to use this component

Use the table component to let users compare information in rows and columns.

When not to use this component

Never use the table component to layout content on a page. Instead, use the grid system.

Variations

A minimal table, with a caption

open this example in its own window

Some people in a table
Name	Age
Jane Doe	1
Janet Doughnut	3
John Doe	3
Jeff Donut	7

<div class="table-responsive">
  <table class="table">
    <caption>
      Some people in a table
    </caption>

    <thead>
      <tr>
        <th scope="col">Name</th>

        <th scope="col">Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jane Doe</td>

        <td>1</td>
      </tr>

      <tr>
        <td>Janet Doughnut</td>

        <td>3</td>
      </tr>

      <tr>
        <td>John Doe</td>

        <td>3</td>
      </tr>

      <tr>
        <td>Jeff Donut</td>

        <td>7</td>
      </tr>
    </tbody>
  </table>
</div>

Options to the table() macro

head: Array<HeadRow|Array<Cell>>: The rows in the table head. Each Cell must have a headerScope.
body: Array<Row|Array<Cell>>: The rows in the table body.
caption: string|null = null: The table caption.
id: string|null = null: The ID of the component's root HTML element.
classes: Array<string> = []: The classes to add to the <table> element.

Options to Cell

body: CellBody
headerScope: string|null = null: The scope for this cell's <th> tag. Setting this renders the cell as a <th>. This is required for all table head cells.
classes: Array<string> = []: The classes to add to the <td> or <th> element.

Options to Row

cells: Array<Cell|CellBody>
classes: Array<string> = []: The classes to add to the <tr> element.

Options to HeadRow

cells: Array<Cell>
classes: Array<string> = []: The classes to add to the <thead> element.

{% from 'macros/component/table.html' import table %}

{{ table({
    'caption': 'Some people in a table',
    'head': [
        [
            {
                'body': 'Name',
                'headerScope': 'col'
            },
            {
                'body': 'Age',
                'headerScope': 'col'
            }
        ]
    ],
    'body': [
        [
            'Jane Doe',
            '1'
        ],
        [
            'Janet Doughnut',
            '3'
        ],
        [
            'John Doe',
            '3'
        ],
        [
            'Jeff Donut',
            '7'
        ]
    ]
}) }}

A table with a scoped column and row headers