Table

<table class="table " tabindex="0" role="table">
    <caption class="table__caption">
        This is a table. Binded text in caption should explain what kind of data this table presents. Can be also a longer text with inline HTML elements inside
    </caption>
    <thead>
        <tr role="row">
            <th class="" scope="col" role="columnheader">
                Example heading
            </th>
            <th class="" scope="col" role="columnheader">
                Example heading
            </th>
            <th class="" scope="col" role="columnheader">
                Example heading
            </th>
        </tr>
    </thead>
    <tbody>
        <tr role="row">
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
        </tr>
        <tr role="row">
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
        </tr>
        <tr role="row">
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr role="row">
            <td class="" colspan='3' role="gridcell">
                Footer content
            </td>
        </tr>
    </tfoot>
</table>
<table
    class="table {{ class }}"
    tabindex="0"
    role="table"
    {{{ additionalAttributes }}}
>
    {{#if captionText}}
        <caption class="table__caption">
            {{ captionText }}
        </caption>
    {{/if}}
    {{#each mainTags }}
        <{{{ mainTag }}} {{{mainAttributes}}}>
            {{#each rowTags}}
                <{{{ rowTag }}} {{{ rowTagAttributes }}}>
                    {{#each childTags}}
                        <{{{ childTag }}}
                             class="{{ childTagClasses }}"
                             {{{ childTagAttributes }}}
                        >
                            {{#if contentVisuallyHidden}}
                                <span class="table__visually-hidden">
                                    {{{ content }}}
                                </span>
                            {{else}}
                                {{#if contentComponent}}
                                    {{ render (component contentComponent) contentContext }}
                                {{else}}
                                    {{{ content }}}
                                {{/if}}
                            {{/if}}
                        </{{{ childTag }}}>
                    {{/each}}
                </{{{ rowTag }}}>
            {{/each}}
        </{{{ mainTag }}}>
    {{/each}}
</table>
{
  "captionText": "This is a table. Binded text in caption should explain what kind of data this table presents. Can be also a longer text with inline HTML elements inside",
  "mainTags": [
    {
      "mainTag": "thead",
      "rowTags": [
        {
          "rowTag": "tr",
          "rowTagAttributes": "role=\"row\"",
          "childTags": [
            {
              "childTag": "th",
              "content": "Example heading",
              "childTagAttributes": "scope=\"col\" role=\"columnheader\""
            },
            {
              "childTag": "th",
              "content": "Example heading",
              "childTagAttributes": "scope=\"col\" role=\"columnheader\""
            },
            {
              "childTag": "th",
              "content": "Example heading",
              "childTagAttributes": "scope=\"col\" role=\"columnheader\""
            }
          ]
        }
      ]
    },
    {
      "mainTag": "tbody",
      "rowTags": [
        {
          "rowTag": "tr",
          "rowTagAttributes": "role=\"row\"",
          "childTags": [
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            },
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            },
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            }
          ]
        },
        {
          "rowTag": "tr",
          "rowTagAttributes": "role=\"row\"",
          "childTags": [
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            },
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            },
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            }
          ]
        },
        {
          "rowTag": "tr",
          "rowTagAttributes": "role=\"row\"",
          "childTags": [
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            },
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            },
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            }
          ]
        }
      ]
    },
    {
      "mainTag": "tfoot",
      "rowTags": [
        {
          "rowTag": "tr",
          "rowTagAttributes": "role=\"row\"",
          "childTags": [
            {
              "childTag": "td",
              "content": "Footer content",
              "childTagAttributes": "colspan='3' role=\"gridcell\""
            }
          ]
        }
      ]
    }
  ]
}
  • Content:
    // Table
    $table__width                                                : 100% !default;
    $table__padding                                              : 0 !default;
    $table__background                                           : $white !default;
    $table__margin                                               : $spacer 0 !default;
    $table__border-width-base                                    : $border-width-base !default;
    $table__border                                               : $table__border-width-base $border-style-base $gray-light !default;
    $table__border-radius                                        : $border-radius !default;
    $table__border-collapse                                      : separate !default;
    $table__border-spacing                                       : 0 !default;
    $table__color                                                : $black !default;
    $table__line-height                                          : $font-line-height !default;
    $table__font-size                                            : $font-size-base !default;
    $table__font-size\@medium                                    : $font-size-medium !default;
    
    // Clean variant
    $table__th-font-weight--clean                                : $font-weight-bold !default;
    $table__th-background--clean                                 : transparent !default;
    $table__background-odd--clean                                : $gray-lighter !default;
    $table__background-even--clean                               : $white !default;
    
    // Table heading
    $table__th-background                                        : $gray-lightest !default;
    $table__th-padding                                           : 0 !default;
    $table__th-padding\@medium                                   : $spacer--medium !default;
    $table__th-border-bottom\@medium                             : $table__border !default;
    $table__th-border-right\@medium                              : $table__border !default;
    $table__th-text-align                                        : left !default;
    $table__th-background-row                                    : $white !default;
    $table__th-padding-row                                       : $spacer--medium !default;
    $table__th-border-width-row                                  : $table__border-width-base 0 !default;
    $table__th-text-align-row                                    : left !default;
    $table__th-width-row                                         : 50% !default;
    
    // Table data
    $table__td-background                                        : $white !default;
    $table__td-padding                                           : $spacer $spacer--medium !default;
    $table__td-padding\@medium                                   : $spacer--medium !default;
    $table__td-border-bottom\@medium                             : $table__border !default;
    $table__td-border-right\@medium                              : $table__border !default;
    $table__td-font-weight-before                                : bold !default;
    $table__td-margin-right-before                               : $spacer !default;
    $table__td-width-before                                      : 25% !default;
    $table__td-max-width-before                                  : 25% !default;
    
    // Table row
    $table__tr-padding                                           : $spacer--medium 0 !default;
    $table__tr-padding\@medium                                   : 0 !default;
    $table__tr-border-bottom                                     : $table__border !default;
    $table__tr-border-bottom\@medium                             : 0 !default;
    
    // Table footer
    $table__tfoot-tr-border-top-first-child                      : $table__border !default;
    $table__tfoot-td-padding                                     : $spacer $spacer--medium !default;
    $table__tfoot-td-padding\@medium                             : $spacer--medium !default;
    $table__tfoot-td-background                                  : $table__background !default;
    $table__tfoot-td-background\@medium                          : $table__background !default;
    $table__tfoot-td-border-right\@medium                        : $table__border !default;
    $table__tfoot-td-border-top\@medium                          : $table__border !default;
    
    // Odd even variant
    $table__background-odd--odd-even                             : $white !default;
    $table__background-even--odd-even                            : $gray-lighter !default;
    $table__td-background--odd-even                              : transparent !default;
    $table__border-top-left-radius-first-child--odd-even         : 0 !default;
    $table__border-top-left-radius-first-child--odd-even\@medium : 0 !default;
    $table__border-top-right-radius-first-child--odd-even        : 0 !default;
    $table__border-top-right-radius-first-child--odd-even\@medium: 0 !default;
    
    // Scope row variant
    $table__tr-padding--scope-row                                : 0 !default;
    $table__border-width--scope-row                              : $table__border-width-base 0 0 0 !default;
    $table__tr-background-odd--scope-row                         : $table__background-even--odd-even !default;
    $table__th-font-wieght--scope-row                            : $font-weight-normal !default;
    
    // Table footer scope row variant
    $table__tfoot-th-border-right-width--tfoot-scope-row         : $border-width-base !default;
    $table__tfoot-th-border-top--tfoot-scope-row                 : $table__border !default;
    
  • URL: /components/raw/table/_table-variables.scss
  • Filesystem Path: build/components/Molecules/table/_table-variables.scss
  • Size: 5.4 KB
  • Content:
    @import 'table-variables';
    
    .table {
        width: $table__width;
        margin: $table__margin;
        padding: $table__padding;
        background: $table__background;
        border: $table__border;
        border-radius: $table__border-radius;
        border-collapse: $table__border-collapse;
        border-spacing: $table__border-spacing;
        color: $table__color;
        font-size: $table__font-size;
        line-height: $table__line-height;
    
        @include mq($screen-m) {
            font-size: $table__font-size\@medium;
        }
    
        &--odd-even {
            tbody {
                tr {
                    &:nth-child(odd) {
                        background: $table__background-odd--odd-even;
                    }
    
                    &:nth-child(even) {
                        background: $table__background-even--odd-even;
                    }
    
                    &:first-child {
                        border-top-left-radius: $table__border-top-left-radius-first-child--odd-even;
                        border-top-right-radius: $table__border-top-right-radius-first-child--odd-even;
    
                        @include mq($screen-m) {
                            border-top-left-radius: $table__border-top-left-radius-first-child--odd-even\@medium;
                            border-top-right-radius: $table__border-top-right-radius-first-child--odd-even\@medium;
                        }
                    }
                }
    
                td {
                    background-color: $table__td-background--odd-even;
                }
            }
        }
    
        &--clean {
            margin: 0;
            border: 0;
            border-radius: 0;
    
            thead {
                tr {
                    padding: 0;
                    border-bottom: 0;
                }
            }
    
            th {
                border-bottom: 0;
                border-right: 0;
                background: $table__th-background--clean;
                text-align: left;
                font-weight: $table__th-font-weight--clean;
            }
    
            td {
                border-bottom: 0;
                border-right: 0;
                background: $table__th-background--clean;
            }
    
            tbody {
                tr {
                    &:nth-child(odd) {
                        background: $table__background-odd--clean;
                    }
    
                    &:nth-child(even) {
                        background: $table__background-even--clean;
                    }
                }
            }
        }
    
        &--tfoot-scope-row {
            tfoot {
                tr {
                    th {
                        border-top: $table__tfoot-th-border-top--tfoot-scope-row;
                        border-bottom: 0;
    
                        &[scope="row"] {
                            border-right-width: $table__tfoot-th-border-right-width--tfoot-scope-row;
                        }
                    }
                }
            }
        }
    
        &--scope-row {
            border-width: $table__border-width--scope-row;
    
            tbody {
                tr {
                    padding: $table__tr-padding--scope-row;
    
                    &:nth-child(odd) {
                        th[scope="row"],
                        td {
                            background-color: $table__tr-background-odd--scope-row;
                        }
                    }
    
                    &:last-child {
                        border-bottom: $table__tr-border-bottom;
    
                        td {
                            @include mq($screen-m) {
                                border-bottom: $table__td-border-bottom\@medium;
                            }
                        }
                    }
    
                    @include mq($screen-s) {
                        th {
                            &[scope="row"] + td {
                                &:before {
                                    margin-bottom: 0;
                                }
                            }
                        }
                    }
                }
    
                th {
                    font-weight: $table__th-font-wieght--scope-row;
                }
            }
        }
    
        &__caption,
        &__visually-hidden {
            @include visually-hidden();
        }
    
        &__heading-wrapper {
            display: flex;
            align-items: center;
        }
    
        tr {
            display: block;
            padding: $table__tr-padding;
            border-bottom: $table__tr-border-bottom;
    
            &:last-child {
                border-bottom: 0;
    
                td {
                    @include mq($screen-m) {
                        border-bottom: 0;
                    }
                }
            }
    
            @include mq($screen-m) {
                display: table-row;
                padding: $table__tr-padding\@medium;
                border-bottom: $table__tr-border-bottom\@medium;
            }
        }
    
        th {
            display: none;
            padding: $table__th-padding;
            background: $table__th-background;
            text-align: $table__th-text-align;
    
            @include mq($screen-m) {
                display: table-cell;
                padding: $table__th-padding\@medium;
                border-bottom: $table__th-border-bottom\@medium;
                border-right: $table__th-border-right\@medium;
            }
    
            &:last-child {
                border-right: 0;
            }
    
            &[scope="row"] {
                padding: $table__th-padding-row;
                border-width: $table__th-border-width-row;
                background: $table__th-background-row;
                text-align: $table__th-text-align-row;
                width: $table__th-width-row;
    
                & + td {
                    flex-flow: column nowrap;
                    padding: $spacer--medium;
    
                    @include mq($screen-s) {
                        flex-flow: row nowrap;
                    }
    
                    &:before {
                        max-width: 100%;
                        width: 100%;
                        margin-bottom: $spacer;
    
                        @include mq($screen-s) {
                            max-width: 50%;
                            width: 50%;
                        }
                    }
                }
            }
        }
    
        td {
            display: flex;
            padding: $table__td-padding;
            background: $table__td-background;
    
            &:before {
                display: block;
                content: attr(data-th);
                font-weight: $table__td-font-weight-before;
                margin-right: $table__td-margin-right-before;
                max-width: $table__td-max-width-before;
                width: $table__td-width-before;
                min-width: $table__td-width-before;
    
                @include mq($screen-m) {
                    display: none;
                }
            }
    
            &:last-child {
                @include mq($screen-m) {
                    border-right: 0;
                }
            }
    
            @include mq($screen-m) {
                display: table-cell;
                padding: $table__td-padding\@medium;
                border-bottom: $table__td-border-bottom\@medium;
                border-right: $table__td-border-right\@medium;
            }
        }
    
        thead {
            tr {
                padding: 0;
                border-bottom: 0;
    
                @include mq($screen-m) {
                    border-top-left-radius: $table__border-radius;
                    border-top-right-radius: $table__border-radius;
                }
            }
    
            th {
                &:first-child {
                    @include mq($screen-m) {
                        border-top-left-radius: $table__border-radius;
                    }
                }
    
                &:last-child {
                    @include mq($screen-m) {
                        border-top-right-radius: $table__border-radius;
                    }
                }
            }
        }
    
        tbody {
            tr {
                &:last-child {
                    td {
                        &:first-child {
                            @include mq($screen-m) {
                                border-bottom-left-radius: $table__border-radius;
                            }
                        }
    
                        &:last-child {
                            @include mq($screen-m) {
                                border-bottom-right-radius: $table__border-radius;
                            }
                        }
                    }
                }
            }
        }
    
        tfoot {
            tr {
                &:first-child {
                    border-top: $table__tfoot-tr-border-top-first-child;
    
                    @include mq($screen-m) {
                        border-top: 0;
                    }
                }
    
                &:last-child {
                    border-bottom: 0;
    
                    td {
                        &:first-child {
                            @include mq($screen-m) {
                                border-bottom-left-radius: $table__border-radius;
                            }
                        }
    
                        &:last-child {
                            @include mq($screen-m) {
                                border-bottom-right-radius: $table__border-radius;
                            }
                        }
                    }
                }
            }
    
            td {
                display: block;
                padding: $table__tfoot-td-padding;
                background: $table__tfoot-td-background;
    
                @include mq($screen-m) {
                    display: table-cell;
                    padding: $table__tfoot-td-padding\@medium;
                    background: $table__tfoot-td-background\@medium;
                    border-top: $table__tfoot-td-border-top\@medium;
                    border-right: $table__tfoot-td-border-right\@medium;
                    border-bottom: 0;
                }
            }
        }
    }
    
  • URL: /components/raw/table/_table.scss
  • Filesystem Path: build/components/Molecules/table/_table.scss
  • Size: 9.2 KB

Tables accessibility

  • Use table semantics elements: table, tbody, tr, th, td
  • Use scope="col" or scope="row" for table headings (th elements)
  • use caption element to describe what kind of data are presented in the table
  • To make mobile table accessible, please add appropriate aria roles:
    • role="columnheader" for th elements
    • role="row" for row elements
    • role="gridcell" for td elements

In desktop mode (wide screens) HTML5 tags are sufficient to make HTML table accessible. However, we change display mode on small screen to set our table visible without horizontal scrolling, so we need to ad appropriate aria roles to make it focusable and well read by AT.