Best Practices

Table 1: Simple Data Table

• WCAG Technique H39 Uses a descriptive caption.
• WCAG Technique H63 Uses scope="col" and scope="row" to explicitly define header relationships.
• Every piece of data has its own semantic cell, no <br> tags used for layout.

Preview

Employee Directory and Assigned Departments

ID	Employee Name	Department	Office Location
101	John Doe	Engineering	Building A, Room 12
102	Jane Smith	Marketing	Building B, Room 4
103	Alice Williams	Human Resources	Building A, Room 2

Code (HTML)

<table>
    <caption>Employee Directory and Assigned Departments</caption>
    <tr>
        <th scope="col">ID</th>
        <th scope="col">Employee Name</th>
        <th scope="col">Department</th>
        <th scope="col">Office Location</th>
    </tr>
    <tr>
        <th scope="row">101</th>
        <td>John Doe</td>
        <td>Engineering</td>
        <td>Building A, Room 12</td>
    </tr>
    <tr>
        <th scope="row">102</th>
        <td>Jane Smith</td>
        <td>Marketing</td>
        <td>Building B, Room 4</td>
    </tr>
    <tr>
        <th scope="row">103</th>
        <td>Alice Williams</td>
        <td>Human Resources</td>
        <td>Building A, Room 2</td>
    </tr>
</table>

Table 2 & 3: Breaking Down Complex Tables

• rather than creating a massive table with complex colspan and rowspan attributes (which can be difficult for screen readers to navigate, even when done correctly), the data is broken up into two simpler tables
• WCAG Technique G18 uses high-contrast zebra striping to aid users with cognitive or reading difficulties without sacrificing readability.

Preview

Q1 Hardware Inventory: Laptops

Model	In Stock	Assigned	On Order
Dell XPS 15	12	45	5
MacBook Air M2	8	30	10
Lenovo ThinkPad	15	60	0

Q1 Hardware Inventory: Mobile Devices

Model	In Stock	Assigned	On Order
iPhone 14	20	110	15
Google Pixel 7	14	40	5
iPad Pro 11”	5	25	2

Code (HTML)

<table class="zebra-table">
    <caption>Q1 Hardware Inventory: Laptops</caption>
    <tr>
        <th scope="col">Model</th>
        <th scope="col">In Stock</th>
        <th scope="col">Assigned</th>
        <th scope="col">On Order</th>
    </tr>
    <tr>
        <th scope="row">Dell XPS 15</th>
        <td>12</td>
        <td>45</td>
        <td>5</td>
    </tr>
    <tr>
        <th scope="row">MacBook Air M2</th>
        <td>8</td>
        <td>30</td>
        <td>10</td>
    </tr>
    <tr>
        <th scope="row">Lenovo ThinkPad</th>
        <td>15</td>
        <td>60</td>
        <td>0</td>
    </tr>
</table>

<table class="zebra-table">
    <caption>Q1 Hardware Inventory: Mobile Devices</caption>
    <tr>
        <th scope="col">Model</th>
        <th scope="col">In Stock</th>
        <th scope="col">Assigned</th>
        <th scope="col">On Order</th>
    </tr>
    <tr>
        <th scope="row">iPhone 14</th>
        <td>20</td>
        <td>110</td>
        <td>15</td>
    </tr>
    <tr>
        <th scope="row">Google Pixel 7</th>
        <td>14</td>
        <td>40</td>
        <td>5</td>
    </tr>
    <tr>
        <th scope="row">iPad Pro 11"</th>
        <td>5</td>
        <td>25</td>
        <td>2</td>
    </tr>
</table>

Table 4: Complex Data Table

While simplifying tables is preferred, if you must use a complex layout with merged cells, you must explicitly link the data to the headers.

• WCAG Technique H43
  • Uses the id attribute on header cells and the headers attribute on data cells to unambiguously associate them, even across nested columns.

Preview

Employee Equipment Assignments

Employee Name	Assigned Equipment
	Type	Model
John Doe	Laptop	Dell XPS 15
Jane Smith	Tablet	iPad Pro

Code (HTML)

<table>
    <caption>Employee Equipment Assignments</caption>
    <tr>
        <th rowspan="2" id="hdr-employee">Employee Name</th>
        <th colspan="2" id="hdr-equipment">Assigned Equipment</th>
    </tr>
    <tr>
        <th id="hdr-type" headers="hdr-equipment">Type</th>
        <th id="hdr-model" headers="hdr-equipment">Model</th>
    </tr>
    <tr>
        <th id="emp-john" headers="hdr-employee">John Doe</th>
        <td headers="emp-john hdr-equipment hdr-type">Laptop</td>
        <td headers="emp-john hdr-equipment hdr-model">Dell XPS 15</td>
    </tr>
    <tr>
        <th id="emp-jane" headers="hdr-employee">Jane Smith</th>
        <td headers="emp-jane hdr-equipment hdr-type">Tablet</td>
        <td headers="emp-jane hdr-equipment hdr-model">iPad Pro</td>
    </tr>
</table>