Table

Table

When to use this component

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

A table is a great way to present things such as:

  • Financial data and numbers
  • Pricing
  • Features (for comparison)
  • Calendars
  • And many other tabular data

When to not use this component

Do not use the table component for layout.

Furthermore, do not use a table component:

  • To present simple, non-tabular data.
  • To present information that users typically do not have to compare.

For presenting simple, non-tabular data, consider using a list instead. For presenting teasers of content, use the collection of teasers instead.

How it works

A table organizes information in rows and columns:

  • The columns can have column headings to tell users what the columns represent.
  • The rows can have row headings to tell users what the rows represent.
  • The table component adds the possibility to add an optional caption tag that describes the table.

The table styling features alternating row colors.

On tablets in portrait mode and mobile resolutions, the table component is rendered as an HTML description list.

<div class="responsive-table">
  <table>
    <tbody>
    {% if columnHeaders %}
      <tr>
        {% for col in range(1, numberOfCols+1) %}
          <th scope="col">Heading col {{ col }}</th>
        {% endfor %}
      </tr>
    {% endif %}

    {% for row in range(1, numberOfRows) %}
      <tr>
        {% for col in range(1, numberOfCols) %}
          {% if rowHeaders %}
            {% if col == 1 %}
              <th scope="row">Row heading {{ row }}</th>
            {% endif %}
          {% else %}
            {% if col == 1 %}
              <td>Row {{ row }} cell {{ col }}</th>
            {% endif %}
          {% endif %}

          {% if rowHeaders %}
            <td>Row {{ row }} cell {{ col+1 }}</td>
          {% else %}
            <td>Row {{ row }} cell {{ col + 1 }}</td>
          {% endif %}
        {% endfor %}
      </tr>
    {% endfor %}
    </tbody>
    <caption>
      {{ caption }}
    </caption>
  </table>
</div>

<div aria-labelledby="{{ _self.name }}-list-description" class="table-list">
  <ul>
    {% for row in range(1, numberOfRows) %}
    <li>
        {% for col in range(1, numberOfCols) %}
          {% if rowHeaders %}
            {% if col == 1 %}
              <h3>Row heading {{ row }}</h3>
            {% endif %}
          {% endif %}
          <dl>
            {% if columnHeaders %}
              <dt>Heading col {{ col + 1 }}</dt>
            {% endif %}
            {% if rowHeaders %}
              <dd>Row {{ row }} cell {{ col + 1 }}</dd>
            {% else %}
              <dd>Row {{ row }} cell {{ col }}</dd>
            {% endif %}
          </dl>
        {% endfor %}
    </li>
    {% endfor %}
  </ul>
  <div class="list-description" id="{{ _self.name }}-list-description">
    This is a table caption that describes the table content.
  </div>
</div>
<!-- Table -->
<div class="responsive-table">
    <table>
        <tbody>
            <tr>
                <th scope="col">Heading col 1</th>
                <th scope="col">Heading col 2</th>
                <th scope="col">Heading col 3</th>
                <th scope="col">Heading col 4</th>
                <th scope="col">Heading col 5</th>
                <th scope="col">Heading col 6</th>
                <th scope="col">Heading col 7</th>
            </tr>

            <tr>
                <th scope="row">Row heading 1</th>

                <td>Row 1 cell 2</td>

                <td>Row 1 cell 3</td>

                <td>Row 1 cell 4</td>

                <td>Row 1 cell 5</td>

                <td>Row 1 cell 6</td>

                <td>Row 1 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 2</th>

                <td>Row 2 cell 2</td>

                <td>Row 2 cell 3</td>

                <td>Row 2 cell 4</td>

                <td>Row 2 cell 5</td>

                <td>Row 2 cell 6</td>

                <td>Row 2 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 3</th>

                <td>Row 3 cell 2</td>

                <td>Row 3 cell 3</td>

                <td>Row 3 cell 4</td>

                <td>Row 3 cell 5</td>

                <td>Row 3 cell 6</td>

                <td>Row 3 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 4</th>

                <td>Row 4 cell 2</td>

                <td>Row 4 cell 3</td>

                <td>Row 4 cell 4</td>

                <td>Row 4 cell 5</td>

                <td>Row 4 cell 6</td>

                <td>Row 4 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 5</th>

                <td>Row 5 cell 2</td>

                <td>Row 5 cell 3</td>

                <td>Row 5 cell 4</td>

                <td>Row 5 cell 5</td>

                <td>Row 5 cell 6</td>

                <td>Row 5 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 6</th>

                <td>Row 6 cell 2</td>

                <td>Row 6 cell 3</td>

                <td>Row 6 cell 4</td>

                <td>Row 6 cell 5</td>

                <td>Row 6 cell 6</td>

                <td>Row 6 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 7</th>

                <td>Row 7 cell 2</td>

                <td>Row 7 cell 3</td>

                <td>Row 7 cell 4</td>

                <td>Row 7 cell 5</td>

                <td>Row 7 cell 6</td>

                <td>Row 7 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 8</th>

                <td>Row 8 cell 2</td>

                <td>Row 8 cell 3</td>

                <td>Row 8 cell 4</td>

                <td>Row 8 cell 5</td>

                <td>Row 8 cell 6</td>

                <td>Row 8 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 9</th>

                <td>Row 9 cell 2</td>

                <td>Row 9 cell 3</td>

                <td>Row 9 cell 4</td>

                <td>Row 9 cell 5</td>

                <td>Row 9 cell 6</td>

                <td>Row 9 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 10</th>

                <td>Row 10 cell 2</td>

                <td>Row 10 cell 3</td>

                <td>Row 10 cell 4</td>

                <td>Row 10 cell 5</td>

                <td>Row 10 cell 6</td>

                <td>Row 10 cell 7</td>
            </tr>
        </tbody>
        <caption>
            This is a table caption that describes the table content.
        </caption>
    </table>
</div>

<div aria-labelledby="table-list-description" class="table-list">
    <ul>
        <li>
            <h3>Row heading 1</h3>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 1 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 1 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 1 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 1 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 1 cell 6</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 1 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 2</h3>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 2 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 2 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 2 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 2 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 2 cell 6</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 2 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 3</h3>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 3 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 3 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 3 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 3 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 3 cell 6</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 3 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 4</h3>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 4 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 4 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 4 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 4 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 4 cell 6</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 4 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 5</h3>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 5 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 5 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 5 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 5 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 5 cell 6</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 5 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 6</h3>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 6 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 6 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 6 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 6 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 6 cell 6</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 6 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 7</h3>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 7 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 7 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 7 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 7 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 7 cell 6</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 7 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 8</h3>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 8 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 8 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 8 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 8 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 8 cell 6</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 8 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 9</h3>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 9 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 9 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 9 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 9 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 9 cell 6</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 9 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 10</h3>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 10 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 10 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 10 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 10 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 10 cell 6</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 10 cell 7</dd>
            </dl>
        </li>
    </ul>
    <div class="list-description" id="table-list-description">
        This is a table caption that describes the table content.
    </div>
</div>

<!-- Table Without Column Headers -->
<div class="responsive-table">
    <table>
        <tbody>

            <tr>
                <th scope="row">Row heading 1</th>

                <td>Row 1 cell 2</td>

                <td>Row 1 cell 3</td>

                <td>Row 1 cell 4</td>

                <td>Row 1 cell 5</td>

                <td>Row 1 cell 6</td>

                <td>Row 1 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 2</th>

                <td>Row 2 cell 2</td>

                <td>Row 2 cell 3</td>

                <td>Row 2 cell 4</td>

                <td>Row 2 cell 5</td>

                <td>Row 2 cell 6</td>

                <td>Row 2 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 3</th>

                <td>Row 3 cell 2</td>

                <td>Row 3 cell 3</td>

                <td>Row 3 cell 4</td>

                <td>Row 3 cell 5</td>

                <td>Row 3 cell 6</td>

                <td>Row 3 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 4</th>

                <td>Row 4 cell 2</td>

                <td>Row 4 cell 3</td>

                <td>Row 4 cell 4</td>

                <td>Row 4 cell 5</td>

                <td>Row 4 cell 6</td>

                <td>Row 4 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 5</th>

                <td>Row 5 cell 2</td>

                <td>Row 5 cell 3</td>

                <td>Row 5 cell 4</td>

                <td>Row 5 cell 5</td>

                <td>Row 5 cell 6</td>

                <td>Row 5 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 6</th>

                <td>Row 6 cell 2</td>

                <td>Row 6 cell 3</td>

                <td>Row 6 cell 4</td>

                <td>Row 6 cell 5</td>

                <td>Row 6 cell 6</td>

                <td>Row 6 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 7</th>

                <td>Row 7 cell 2</td>

                <td>Row 7 cell 3</td>

                <td>Row 7 cell 4</td>

                <td>Row 7 cell 5</td>

                <td>Row 7 cell 6</td>

                <td>Row 7 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 8</th>

                <td>Row 8 cell 2</td>

                <td>Row 8 cell 3</td>

                <td>Row 8 cell 4</td>

                <td>Row 8 cell 5</td>

                <td>Row 8 cell 6</td>

                <td>Row 8 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 9</th>

                <td>Row 9 cell 2</td>

                <td>Row 9 cell 3</td>

                <td>Row 9 cell 4</td>

                <td>Row 9 cell 5</td>

                <td>Row 9 cell 6</td>

                <td>Row 9 cell 7</td>
            </tr>
            <tr>
                <th scope="row">Row heading 10</th>

                <td>Row 10 cell 2</td>

                <td>Row 10 cell 3</td>

                <td>Row 10 cell 4</td>

                <td>Row 10 cell 5</td>

                <td>Row 10 cell 6</td>

                <td>Row 10 cell 7</td>
            </tr>
        </tbody>
        <caption>
            This is a table caption that describes the table content.
        </caption>
    </table>
</div>

<div aria-labelledby="table-without-column-headers-list-description" class="table-list">
    <ul>
        <li>
            <h3>Row heading 1</h3>
            <dl>
                <dd>Row 1 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 1 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 1 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 1 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 1 cell 6</dd>
            </dl>
            <dl>
                <dd>Row 1 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 2</h3>
            <dl>
                <dd>Row 2 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 2 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 2 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 2 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 2 cell 6</dd>
            </dl>
            <dl>
                <dd>Row 2 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 3</h3>
            <dl>
                <dd>Row 3 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 3 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 3 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 3 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 3 cell 6</dd>
            </dl>
            <dl>
                <dd>Row 3 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 4</h3>
            <dl>
                <dd>Row 4 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 4 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 4 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 4 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 4 cell 6</dd>
            </dl>
            <dl>
                <dd>Row 4 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 5</h3>
            <dl>
                <dd>Row 5 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 5 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 5 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 5 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 5 cell 6</dd>
            </dl>
            <dl>
                <dd>Row 5 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 6</h3>
            <dl>
                <dd>Row 6 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 6 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 6 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 6 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 6 cell 6</dd>
            </dl>
            <dl>
                <dd>Row 6 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 7</h3>
            <dl>
                <dd>Row 7 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 7 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 7 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 7 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 7 cell 6</dd>
            </dl>
            <dl>
                <dd>Row 7 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 8</h3>
            <dl>
                <dd>Row 8 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 8 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 8 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 8 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 8 cell 6</dd>
            </dl>
            <dl>
                <dd>Row 8 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 9</h3>
            <dl>
                <dd>Row 9 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 9 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 9 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 9 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 9 cell 6</dd>
            </dl>
            <dl>
                <dd>Row 9 cell 7</dd>
            </dl>
        </li>
        <li>
            <h3>Row heading 10</h3>
            <dl>
                <dd>Row 10 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 10 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 10 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 10 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 10 cell 6</dd>
            </dl>
            <dl>
                <dd>Row 10 cell 7</dd>
            </dl>
        </li>
    </ul>
    <div class="list-description" id="table-without-column-headers-list-description">
        This is a table caption that describes the table content.
    </div>
</div>

<!-- Table Without Row Headers -->
<div class="responsive-table">
    <table>
        <tbody>
            <tr>
                <th scope="col">Heading col 1</th>
                <th scope="col">Heading col 2</th>
                <th scope="col">Heading col 3</th>
                <th scope="col">Heading col 4</th>
                <th scope="col">Heading col 5</th>
                <th scope="col">Heading col 6</th>
                <th scope="col">Heading col 7</th>
            </tr>

            <tr>
                <td>Row 1 cell 1</th>

                <td>Row 1 cell 2</td>

                <td>Row 1 cell 3</td>

                <td>Row 1 cell 4</td>

                <td>Row 1 cell 5</td>

                <td>Row 1 cell 6</td>

                <td>Row 1 cell 7</td>
            </tr>
            <tr>
                <td>Row 2 cell 1</th>

                <td>Row 2 cell 2</td>

                <td>Row 2 cell 3</td>

                <td>Row 2 cell 4</td>

                <td>Row 2 cell 5</td>

                <td>Row 2 cell 6</td>

                <td>Row 2 cell 7</td>
            </tr>
            <tr>
                <td>Row 3 cell 1</th>

                <td>Row 3 cell 2</td>

                <td>Row 3 cell 3</td>

                <td>Row 3 cell 4</td>

                <td>Row 3 cell 5</td>

                <td>Row 3 cell 6</td>

                <td>Row 3 cell 7</td>
            </tr>
            <tr>
                <td>Row 4 cell 1</th>

                <td>Row 4 cell 2</td>

                <td>Row 4 cell 3</td>

                <td>Row 4 cell 4</td>

                <td>Row 4 cell 5</td>

                <td>Row 4 cell 6</td>

                <td>Row 4 cell 7</td>
            </tr>
            <tr>
                <td>Row 5 cell 1</th>

                <td>Row 5 cell 2</td>

                <td>Row 5 cell 3</td>

                <td>Row 5 cell 4</td>

                <td>Row 5 cell 5</td>

                <td>Row 5 cell 6</td>

                <td>Row 5 cell 7</td>
            </tr>
            <tr>
                <td>Row 6 cell 1</th>

                <td>Row 6 cell 2</td>

                <td>Row 6 cell 3</td>

                <td>Row 6 cell 4</td>

                <td>Row 6 cell 5</td>

                <td>Row 6 cell 6</td>

                <td>Row 6 cell 7</td>
            </tr>
            <tr>
                <td>Row 7 cell 1</th>

                <td>Row 7 cell 2</td>

                <td>Row 7 cell 3</td>

                <td>Row 7 cell 4</td>

                <td>Row 7 cell 5</td>

                <td>Row 7 cell 6</td>

                <td>Row 7 cell 7</td>
            </tr>
            <tr>
                <td>Row 8 cell 1</th>

                <td>Row 8 cell 2</td>

                <td>Row 8 cell 3</td>

                <td>Row 8 cell 4</td>

                <td>Row 8 cell 5</td>

                <td>Row 8 cell 6</td>

                <td>Row 8 cell 7</td>
            </tr>
            <tr>
                <td>Row 9 cell 1</th>

                <td>Row 9 cell 2</td>

                <td>Row 9 cell 3</td>

                <td>Row 9 cell 4</td>

                <td>Row 9 cell 5</td>

                <td>Row 9 cell 6</td>

                <td>Row 9 cell 7</td>
            </tr>
            <tr>
                <td>Row 10 cell 1</th>

                <td>Row 10 cell 2</td>

                <td>Row 10 cell 3</td>

                <td>Row 10 cell 4</td>

                <td>Row 10 cell 5</td>

                <td>Row 10 cell 6</td>

                <td>Row 10 cell 7</td>
            </tr>
        </tbody>
        <caption>
            This is a table caption that describes the table content.
        </caption>
    </table>
</div>

<div aria-labelledby="table-without-row-headers-list-description" class="table-list">
    <ul>
        <li>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 1 cell 1</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 1 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 1 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 1 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 1 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 1 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 2 cell 1</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 2 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 2 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 2 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 2 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 2 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 3 cell 1</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 3 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 3 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 3 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 3 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 3 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 4 cell 1</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 4 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 4 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 4 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 4 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 4 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 5 cell 1</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 5 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 5 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 5 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 5 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 5 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 6 cell 1</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 6 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 6 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 6 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 6 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 6 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 7 cell 1</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 7 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 7 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 7 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 7 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 7 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 8 cell 1</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 8 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 8 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 8 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 8 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 8 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 9 cell 1</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 9 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 9 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 9 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 9 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 9 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Heading col 2</dt>
                <dd>Row 10 cell 1</dd>
            </dl>
            <dl>
                <dt>Heading col 3</dt>
                <dd>Row 10 cell 2</dd>
            </dl>
            <dl>
                <dt>Heading col 4</dt>
                <dd>Row 10 cell 3</dd>
            </dl>
            <dl>
                <dt>Heading col 5</dt>
                <dd>Row 10 cell 4</dd>
            </dl>
            <dl>
                <dt>Heading col 6</dt>
                <dd>Row 10 cell 5</dd>
            </dl>
            <dl>
                <dt>Heading col 7</dt>
                <dd>Row 10 cell 6</dd>
            </dl>
        </li>
    </ul>
    <div class="list-description" id="table-without-row-headers-list-description">
        This is a table caption that describes the table content.
    </div>
</div>

<!-- Table Without Headers -->
<div class="responsive-table">
    <table>
        <tbody>

            <tr>
                <td>Row 1 cell 1</th>

                <td>Row 1 cell 2</td>

                <td>Row 1 cell 3</td>

                <td>Row 1 cell 4</td>

                <td>Row 1 cell 5</td>

                <td>Row 1 cell 6</td>

                <td>Row 1 cell 7</td>
            </tr>
            <tr>
                <td>Row 2 cell 1</th>

                <td>Row 2 cell 2</td>

                <td>Row 2 cell 3</td>

                <td>Row 2 cell 4</td>

                <td>Row 2 cell 5</td>

                <td>Row 2 cell 6</td>

                <td>Row 2 cell 7</td>
            </tr>
            <tr>
                <td>Row 3 cell 1</th>

                <td>Row 3 cell 2</td>

                <td>Row 3 cell 3</td>

                <td>Row 3 cell 4</td>

                <td>Row 3 cell 5</td>

                <td>Row 3 cell 6</td>

                <td>Row 3 cell 7</td>
            </tr>
            <tr>
                <td>Row 4 cell 1</th>

                <td>Row 4 cell 2</td>

                <td>Row 4 cell 3</td>

                <td>Row 4 cell 4</td>

                <td>Row 4 cell 5</td>

                <td>Row 4 cell 6</td>

                <td>Row 4 cell 7</td>
            </tr>
            <tr>
                <td>Row 5 cell 1</th>

                <td>Row 5 cell 2</td>

                <td>Row 5 cell 3</td>

                <td>Row 5 cell 4</td>

                <td>Row 5 cell 5</td>

                <td>Row 5 cell 6</td>

                <td>Row 5 cell 7</td>
            </tr>
            <tr>
                <td>Row 6 cell 1</th>

                <td>Row 6 cell 2</td>

                <td>Row 6 cell 3</td>

                <td>Row 6 cell 4</td>

                <td>Row 6 cell 5</td>

                <td>Row 6 cell 6</td>

                <td>Row 6 cell 7</td>
            </tr>
            <tr>
                <td>Row 7 cell 1</th>

                <td>Row 7 cell 2</td>

                <td>Row 7 cell 3</td>

                <td>Row 7 cell 4</td>

                <td>Row 7 cell 5</td>

                <td>Row 7 cell 6</td>

                <td>Row 7 cell 7</td>
            </tr>
            <tr>
                <td>Row 8 cell 1</th>

                <td>Row 8 cell 2</td>

                <td>Row 8 cell 3</td>

                <td>Row 8 cell 4</td>

                <td>Row 8 cell 5</td>

                <td>Row 8 cell 6</td>

                <td>Row 8 cell 7</td>
            </tr>
            <tr>
                <td>Row 9 cell 1</th>

                <td>Row 9 cell 2</td>

                <td>Row 9 cell 3</td>

                <td>Row 9 cell 4</td>

                <td>Row 9 cell 5</td>

                <td>Row 9 cell 6</td>

                <td>Row 9 cell 7</td>
            </tr>
            <tr>
                <td>Row 10 cell 1</th>

                <td>Row 10 cell 2</td>

                <td>Row 10 cell 3</td>

                <td>Row 10 cell 4</td>

                <td>Row 10 cell 5</td>

                <td>Row 10 cell 6</td>

                <td>Row 10 cell 7</td>
            </tr>
        </tbody>
        <caption>
            This is a table caption that describes the table content.
        </caption>
    </table>
</div>

<div aria-labelledby="table-without-headers-list-description" class="table-list">
    <ul>
        <li>
            <dl>
                <dd>Row 1 cell 1</dd>
            </dl>
            <dl>
                <dd>Row 1 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 1 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 1 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 1 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 1 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dd>Row 2 cell 1</dd>
            </dl>
            <dl>
                <dd>Row 2 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 2 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 2 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 2 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 2 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dd>Row 3 cell 1</dd>
            </dl>
            <dl>
                <dd>Row 3 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 3 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 3 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 3 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 3 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dd>Row 4 cell 1</dd>
            </dl>
            <dl>
                <dd>Row 4 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 4 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 4 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 4 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 4 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dd>Row 5 cell 1</dd>
            </dl>
            <dl>
                <dd>Row 5 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 5 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 5 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 5 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 5 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dd>Row 6 cell 1</dd>
            </dl>
            <dl>
                <dd>Row 6 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 6 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 6 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 6 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 6 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dd>Row 7 cell 1</dd>
            </dl>
            <dl>
                <dd>Row 7 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 7 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 7 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 7 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 7 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dd>Row 8 cell 1</dd>
            </dl>
            <dl>
                <dd>Row 8 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 8 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 8 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 8 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 8 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dd>Row 9 cell 1</dd>
            </dl>
            <dl>
                <dd>Row 9 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 9 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 9 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 9 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 9 cell 6</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dd>Row 10 cell 1</dd>
            </dl>
            <dl>
                <dd>Row 10 cell 2</dd>
            </dl>
            <dl>
                <dd>Row 10 cell 3</dd>
            </dl>
            <dl>
                <dd>Row 10 cell 4</dd>
            </dl>
            <dl>
                <dd>Row 10 cell 5</dd>
            </dl>
            <dl>
                <dd>Row 10 cell 6</dd>
            </dl>
        </li>
    </ul>
    <div class="list-description" id="table-without-headers-list-description">
        This is a table caption that describes the table content.
    </div>
</div>

/* Table */
{
  "columnHeaders": true,
  "rowHeaders": true,
  "numberOfRows": 10,
  "numberOfCols": 6,
  "caption": "This is a table caption that describes the table content."
}

/* Table Without Column Headers */
{
  "columnHeaders": null,
  "rowHeaders": true,
  "numberOfRows": 10,
  "numberOfCols": 6,
  "caption": "This is a table caption that describes the table content."
}

/* Table Without Row Headers */
{
  "columnHeaders": true,
  "rowHeaders": null,
  "numberOfRows": 10,
  "numberOfCols": 6,
  "caption": "This is a table caption that describes the table content."
}

/* Table Without Headers */
{
  "columnHeaders": null,
  "rowHeaders": null,
  "numberOfRows": 10,
  "numberOfCols": 6,
  "caption": "This is a table caption that describes the table content."
}

  • Content:
    div.responsive-table,
    div.table-list {
      .list-description,
      caption {
        @include theme('color', 'color-tertiary--lighten-1', 'table-caption-color');
    
        @include tablet {
          padding-right: 3.3rem;
        }
    
        max-width: 100vw;
        margin: .4rem 0;
        font-size: .6rem;
        text-align: right;
      }
    }
    
    div.responsive-table {
      @include focus-style; // @TODO: https://digipolisgent.atlassian.net/browse/DTGB-715
    
      @include tablet {
        display: block;
      }
    
      display: none;
      overflow-x: auto;
    
    
      table {
        caption-side: bottom;
    
        th {
          font-size: .9rem;
          font-weight: 600;
          line-height: 1.7;
    
          &[scope="col"] {
            @include theme('border-color', 'color-primary--lighten-5', 'table-header-border-color');
    
            border-bottom: 2px solid;
          }
        }
    
        td {
          font-size: .8rem;
        }
    
        tr:nth-child(2n+1) th,
        tr:nth-child(2n+1) td {
          @include theme('background-color', 'color-primary--lighten-5', 'table-row-color');
        }
    
        tr:first-child th[scope="col"] {
          @include theme('background-color', 'color-secondary', 'table-first-row-color');
        }
    
        thead ~ tbody {
          tr:nth-child(2n+1) th,
          tr:nth-child(2n+1) td {
            [class*="cs--"] & {
              background-color: unset;
            }
          }
    
          tr:nth-child(2n) th,
          tr:nth-child(2n) td {
            @include theme('background-color', 'color-primary--lighten-5', 'table-row-color');
          }
        }
    
        th,
        td {
          @include theme('color', 'color-tertiary', 'table-content-color');
    
          min-width: 8rem;
          padding: .3rem .2rem;
          text-align: left;
        }
      }
    }
    
    div.table-list {
      @include tablet {
        display: none;
      }
    
      display: block;
    
      &.js-hidden {
        display: none;
      }
    
      ul {
        @extend %list-no-style;
    
        li {
          padding: .6rem .3rem;
          font-size: .9rem;
    
          &:nth-child(2n) {
            @include theme('background-color', 'color-primary--lighten-5', 'table-list-row-color');
          }
        }
      }
    
      dl {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
    
        > dt {
          @include phablet {
            flex: 0 30%;
          }
    
          flex: 0 50%;
          line-height: 2.1;
        }
    
        > dd {
          @include phablet {
            flex: 1 1 70%;
          }
    
          flex: 0 50%;
          margin: 0;
          padding: 0;
          font-size: .8rem;
          line-height: 2.4;
        }
      }
    }
    
  • URL: /components/raw/table/_table.scss
  • Filesystem Path: components/21-atoms/table/_table.scss
  • Size: 2.3 KB
  • Content:
    /* global ResponsiveTable */
    
    'use strict';
    
    (function () {
      var tablesNodeList = document.querySelectorAll('.responsive-table');
    
      // Optimise all tables with a wrapper div.responsive-table
      for (var i = 0; i < tablesNodeList.length; i++) {
        var table = tablesNodeList[i];
    
        // Adds accessibility support.
        new ResponsiveTable(table, {
          scrollableText: '(scroll to see more)'
        });
      }
    
    })();
    
  • URL: /components/raw/table/table.bindings.js
  • Filesystem Path: components/21-atoms/table/table.bindings.js
  • Size: 413 Bytes
  • Content:
    'use strict';
    
    /* global define, module */
    (function (root, factory) {
      if (typeof define === 'function' && define.amd) {
        define(factory);
      }
      else {
        if (typeof exports === 'object') {
          module.exports = factory();
        }
        else {
          root.ResponsiveTable = factory();
        }
      }
    }(this || window, function () {
      return function (element, options) {
    
        /**
         * The table caption.
         */
        let caption = null;
    
        /**
         * Determine if the table should be focusable.
         */
        const determineFocusable = () => {
          var scrollableWidth = element.parentNode.querySelector('table').scrollWidth;
          var containerWidth = element.parentNode.clientWidth;
    
          // Check if element is scrollable.
          if (scrollableWidth <= containerWidth) {
            // If not remove the tab focus.
            element.removeAttribute('tabindex');
          }
          else if (caption) {
            caption.innerText += ' ' + options.scrollableText;
          }
        };
    
        /**
         * Setup the responsive table.
         */
        const setupResponsiveTable = () => {
          // Set caption id.
          if (caption && !caption.hasAttribute('id')) {
            const tableUid = Math.random().toString(36).substr(2, 16);
            caption.setAttribute('id', 'responsive-table-caption-caption-' + tableUid);
            element.setAttribute('aria-labelledby', caption.getAttribute('id'));
          }
    
          // Set table container attributes.
          element.setAttribute('tabindex', '0');
          element.setAttribute('role', 'group');
    
          // Set th scope attributes.
          let firstRow = element.querySelector('tr');
          let tableHeadingsNodeList = firstRow.querySelectorAll('th');
    
          if (firstRow.getElementsByTagName('th').length === firstRow.querySelectorAll('*').length) {
            for (let i = 0; i < tableHeadingsNodeList.length; i++) {
              // If no scope attribute, set it.
              if (!tableHeadingsNodeList[i].hasAttribute('scope')) {
                tableHeadingsNodeList[i].setAttribute('scope', 'col');
              }
            }
          }
    
          // Set tr scope attributes if first child is a th.
          let tableRowsNodeList = element.querySelectorAll('tr');
          for (let i = 0; i < tableRowsNodeList.length; i++) {
            let firstChild = tableRowsNodeList[i].firstElementChild;
    
            // If no scope attribute, set it.
            if (!firstChild.hasAttribute('scope')) {
              firstChild.setAttribute('scope', 'row');
            }
          }
    
          determineFocusable();
        };
    
        /**
         * Entry point of the script.
         *
         */
        const init = () => {
          if (!element) {
            return;
          }
    
          caption = element.querySelector('caption');
    
          setupResponsiveTable();
        };
    
        init();
    
        return {};
      };
    }));
    
  • URL: /components/raw/table/table.functions.js
  • Filesystem Path: components/21-atoms/table/table.functions.js
  • Size: 2.7 KB