colspan="#" - cell spans multiple (#) columns
rowspan="#" - cell spans multipls (#) rows
NVDA works well (FF), JAWS - columns only, VO - has difficulties
| Poster name | Color | Sizes available | ||
|---|---|---|---|---|
| Zodiac | Full color | Medium | Large | X-large |
| Black and white | Small | Medium | Large | |
| Sepia | Large | X-large | Giant | |
| Angels | Black and white | Small | Large | X-Large |
| Sepia | Medium | Large | Giant | |
<table>
<caption>
Poster availability
</caption>
<thead>
<tr>
<th scope="col">Poster name</th>
<th scope="col">Color</th>
<th colspan="3">Sizes available</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">Zodiac</th>
<th scope="row">Full color</th>
<td>Medium</td>
<td>Large</td>
<td>X-large</td>
</tr>
these have no effect on screen readers but may be useful for styling.
| Poster name | Color | Sizes available | ||
|---|---|---|---|---|
| Zodiac | Full color | Medium | Large | X-large |
| Black and white | Small | Medium | Large | |
| Sepia | Large | X-large | Giant | |
| Angels | Black and white | Small | Large | X-Large |
| Sepia | Medium | Large | Giant | |
<table>
<caption>Poster availability</caption>
<colgroup> [defines all columns in a table]
<col>[first column]
<col> [second column]
<col span="3">[last 3 columns]
</colgroup>
<thead>
<tr>
<th scope="col">Poster name</th>
<th scope="col">Color</th>
<th colspan="3" scope="colgroup">Sizes available</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3" scope="rowgroup">Zodiac</th>
<th scope="row">Full color</th>
<td>Medium</td>
<td>Large</td>
<td>X-Large</td>
...