Table // feature recommendation Public discussion

The Table feature allows the user to create data table.

UI / UX

• UI: A feature providing the user with a way to set up properties for the new table, usually represented as a button with the “Table” icon that opens a dialog window with form fields to edit the table properties
• Title: “Table”
• Keystroke: –

HTML Markup

The <figure> element MUST be used to represent the Table feature as it is the standard way to express self-contained non-textual additional content^[1].

The <figure> element SHOULD have a class attribute which value is set to table to identify that the element is being used for representing table and to allow styling that particular use-case.

The <table> element MUST be used to represent the table itself as it is the standard way to express a table in HTML^[2].

The <table> SHOULD have a header placed inside <thead> element^[3]. If the <thead> element is not present, the first row of the table MUST represent the header^[4]. The header MUST contain a row with headings for each column, represented by <tr> element with <th> elements inside^{[5, 6]}. The <th> elements MAY have scope attribute with value set to col^[7].

The contents of the table SHOULD be placed inside <tbody> element^[8]. The content MUST be divided into rows, represented by <tr> elements, and rows MUST be divided into cells, represented by <td> elements^{[4, 9]}. Rows MAY contain also headings, represented by <th> elements with scope attribute with value set to row^[7].

The caption for the table, if it is present, MUST be placed inside <figcaption> element^[10].

Example:

<figure class="table">
    <table>
        <thead>
            <tr>
                <th scope="col">Person</th>
                <th scope="col">Position</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Smith</td>
                <td>JS developer</td>
            </tr>
            <tr>
                <td>John Doe</td>
                <td>Java developer</td>
            </tr>
            <tr>
                <td>John DeFoe</td>
                <td>ASP .NET developer</td>
            </tr>
        </tbody>
    </table>
    <figcaption>Company's most valuable employees</figcaption>
</figure>

References

1. The <figure> element definition in the HTML5 standard.
2. The <table> element definition in the HTML5 standard.
3. The <thead> element definition in the HTML5 standard.
4. Techniques for WCAG 2.0. H51: Using table markup to present tabular information.
5. The <tr> element definition in the HTML5 standard.
6. The <th> element definition in the HTML5 standard.
7. The scope attribute definition in the HTML5 standard.
8. The <tbody> element definition in the HTML5 standard.
9. The <td> element definition in the HTML5 standard.
10. The <figcaption> element definition in the HTML5 standard.