th elements are very commonly used to indicate headings for table rows and columns, like so:

<table>
    <thead>
        <tr>
            <td></td>
            <th>Column Heading 1</th>
            <th>Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Row Heading 2</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

This can be improved for accessibility by the use of the scope attribute. The above example would be amended as follows:

<table>
    <thead>
        <tr>
            <td></td>
            <th scope="col">Column Heading 1</th>
            <th scope="col">Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

scope is known as an enumerated attribute, meaning that it can have a value from a specific set of possible values. This set includes:

• col
• row
• colgroup
• rowgroup

References:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope (opens new window)
• https://www.w3.org/TR/WCAG20-TECHS/H63.html (opens new window)

Syntax

• <table></table>
• <thead></thead>
• <tbody></tbody>
• <tfoot></tfoot>
• <tr></tr>
• <th></th>
• <td></td>

Remarks

The various table elements and their content attributes together define the table model. The <table> element is the container element for table models/tabular data. Tables have rows, columns, and cells given by their descendants. The rows and columns form a grid; a table's cells must completely cover that grid without overlap. The list below describes the various elements in the table model:

• <table> - The container element for table models/tabular data. <table> represents data with more than one dimension in the form of a table.
• <caption> - Table caption or title (Like a figcaption to a figure)
• <col> - A column (a no-content element)
• <colgroup> - A grouping of columns
• <thead> - Table header (only one)
• <tbody> - Table body / content (multiple are okay)
• <tfoot> - Table footer (only one)
• <tr> - Table row
• <th> - Table header cell
• <td> - Table data cell

Semantically, tables are meant for holding tabular data. You can think of it as a way to display and describe data that would make sense in a spreadsheet (columns and rows).

Using tables for layout is not recommended. Instead, use CSS rules for layout and formatting, including display: table.

One notable exception typically displayed in the industry regarding using <table> layout is in regards to HTML email: some email clients, including Outlook, rolled back to older rendering engines after Microsoft lose their monopoly case vs. the EU. In order for Microsoft to make IE not part of the OS, they simply rolled back Outlook's rendering engine to an earlier version of Trident. This rollback simply doesn't support modern web technologies, so using <table> based layouts for HTML email is the only way to ensure cross-browser/platform/client compatibility.