Skip to main content

Tables (<table>, <caption>, <col>, <colgroup>, <thead>, <tbody>, <tfoot>, <tr>, <th> and <td>)

When To Use

  • To present tabular information.

Rules

  • A tables content is organized in the following way:
    1. An optional <caption>: Use the <caption> to create a visible caption/title for the table. You can also use aria-labelledby or aria-label. If used, the <caption> element must be the first child of its parent <table> element. While it is not mandatory, it is very helpful to have a short description. It is strongly recommended to at least have a non visible description via an aria-label on the <table> element. 12 14
    2. Zero or more <col> or <colgroup>: To create column groupings, you can use <col> and <colgroup>. This is useful for creating logical groupings for assistive technologies or setting classes or styles on each cell in a column. If a column group spans only one column, use the <col> element. If it spans multiple columns, use the <colgroup> with the span attribute to define the number of columns included in the group. 3 4
    3. Optional <thead>, <tbody> or <tfooter>:
      1. These elements are designed for grouping table rows, providing user agents with better rendering capabilities for long tables. For instance, it can make the <tbody> scrollable while always showing the header or footer of a table. Additionally, they can be used for styling purposes, enabling users to more easily style specific sections of a page. 12   
      2. It is important to note that only one <thead> and <tfoot> element can be used within a single HTML table, but multiple <tbody> elements are allowed as long as they are consecutive. This allows for the creation of multiple groups of rows within a single table, providing greater flexibility in organizing and structuring data. 1 6
      3. When using a <thead> element in an HTML table, you should use a <tbody> element directly after it, otherwise the table may not render on all browsers correctly 5
      4. If the <thead>, <tbody>, and <tfoot> tags are not used in an HTML table, <th> and <td> elements can be added directly as descendants of the <table> element. However, if direct <td> descendants are used and a <tbody> element is specified, the direct <td> elements will automatically be wrapped inside a <tbody> element by the browser.
  • To define the cells that a <th> element describes in an HTML table, you can use the scope attribute. While browsers can automatically infer this in simple cases, it is important to set the scope attribute in cases where it cannot be automatically inferred. This allows assistive technologies to accurately describe the table to users with disabilities. 9 12 The possible values are:
    • "col": Specifies that the header cell applies to some or all of the cells in the same column as the header cell.
    • "row": Specifies that the header cell applies to some or all of the cells in the same row as the header cell.
    • "colgroup": The header describes multiple columns.
    • "rowgroup": The header describes multiple rows.
  • In HTML tables, you can use the colspan and rowspan attributes on <th> or <td> elements to define a header that relates to multiple columns or rows, as shown in the example. The value describes the number of columns or rows it relates to. 9 10
  • To define an abbreviated description of the content of a <th> element in an HTML table, you can use the abbr attribute, as shown in the example. 9
  • While you can use the headers attribute on <th> or <td> elements to associate table cells with their corresponding header cells in an HTML table, it is generally not recommended because it is more manual and error-prone than using the scope attribute. Additionally, if a table is too complex to be easily understood through assistive technologies, using the headers attribute may not be effective in improving accessibility. 9 10 12
  • To improve accessibility for users with low vision, it is recommended to let the browser window determine the width of the table whenever possible, in order to reduce the need for horizontal scrolling. If cell widths need to be defined, it is best to use relative values such as percentages, rather than pixel values. It is generally best to avoid defining cell heights so that the cells can expand downward to accommodate their content. 12
  • To improve accessibility, it is recommended to avoid using empty cells in tables, as this may not be effectively conveyed to blind users. Instead of using white space for formatting a single table, consider using multiple tables or spanning multiple rows or cells where it makes sense. This can help to ensure that the table is effectively communicated to all users, including those who rely on assistive technologies. 13

Examples

Example of a complex table using some some of the features mention above:

<table>
    <caption>Aria Role Alternatives</caption>
    <col class="row_headers">
    <colgroup span="2" class="row_content"></colgroup>
    <thead>
        <tr>
            <td scope="row" abbr="HTML Type">HyperText Markup Language Type</td>
            <th scope="col">Aria Roles</th>
            <th scope="col">HTML Element</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">General Structure</th>
            <td>navigation</td>
            <td>nav</td>
        </tr>
        <tr>
            <th scope="row" rowspan=2>Elements</th>
            <td>link</td>
            <td>a</td>
        </tr>
        <tr>
            <td>seperator</td>
            <td>hr</td>
        </tr>
        <tr>
           <th scope="row">Elements</th>
            <td>search</td>
            <td>-</td>
        </tr>
    </tbody>
</table>

Sources 

  1. MDN: <table>: The Table element by Mozilla contributors is licensed under CC-BY-SA 2.5
  2. MDN: <caption>: The Table Caption element by Mozilla contributors is licensed under CC-BY-SA 2.5
  3. MDN: <col>: The Table Column element by Mozilla contributors is licensed under CC-BY-SA 2.5
  4. MDN: <colgroup>: The Table Column Group element by Mozilla contributors is licensed under CC-BY-SA 2.5
  5. MDN: <thead>: The Table Head element by Mozilla contributors is licensed under CC-BY-SA 2.5
  6. MDN: <tbody>: The Table Body element by Mozilla contributors is licensed under CC-BY-SA 2.5
  7. MDN: <tfoot>: The Table Foot element by Mozilla contributors is licensed under CC-BY-SA 2.5
  8. MDN: <tr>: The Table Row element by Mozilla contributors is licensed under CC-BY-SA 2.5
  9. MDN: <th>: The Table Header element by Mozilla contributors is licensed under CC-BY-SA 2.5
  10. MDN: <td>: The Table Data Cell element by Mozilla contributors is licensed under CC-BY-SA 2.5
  11. W3C: Tables Tutorial by W3C WAI Tutorial Contributors is licensed under W3C Document License
  12. WebAIM: Creating Accessible Tables © WebAIM
  13. Yale University: Tables Copyright © Yale University
  14. W3C WAI: Caption & Summary by W3C WAI Tutorial Contributors is licensed under W3C Document License
  15. W3C WAI: Tables with Irregular Headers by W3C WAI Tutorial Contributors is licensed under W3C Document License
Created at: 10.03.2023, Last updated at: 11.06.2023