JSFiddle - React, Tailwind, and code Playground
by stellamudd
HTML
<h1>Irregular Table Headers (row headings not in the left most column)</h1>
<h2>Table using the headers/id</h2>
<table>
<thead>
<tr>
<th scope="col" id="col1">col 1</th>
<th scope="col" id="col2">col 2</th>
<th scope="col" id="col3">col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="col1 row1">data 1</td>
<th id="row1" scope="row">row header 1</th>
<td>data 2</td>
</tr>
<tr>
<td headers="col1 row2">data 3</td>
<th id="row2" scope="row">row header 2</th>
<td>data 4</td>
</tr>
</tbody>
</table>
<h2>Table using aria-labelledby</h2>
<table>
<thead>
<tr>
<th scope="col" id="col1-1">col 1</th>
<th scope="col" id="col2-1">col 2</th>
<th scope="col" id="col3-1">col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td aria-labelledby="col1-1 row1-1">data 1</td>
<th id="row1-1" scope="row">row header 1</th>
<td>data 2</td>
</tr>
<tr>
<td aria-labelledby="col1-1 row2-1">data 3</td>
<th id="row2-1" scope="row">row header 2</th>
<td>data 4</td>
</tr>
</tbody>
</table>
<h2>Table using aria-describedby</h2>
<table>
<thead>
<tr>
<th scope="col" id="col1-2">col 1</th>
<th scope="col" id="col2-2">col 2</th>
<th scope="col" id="col3-2">col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td...