WebAIM - Web Accessibility In Mind

E-mail List Archives

looking for a working example of a table with multiple levels of column headers

for

From: Don Raikes
Date: Aug 13, 2019 9:11PM

Hello,



I am trying to put together an example page for some co-workers on how to properly handle/code an html table which has two levels of column headers.



The table in question consists of two years of financial data.

The first column tells what kind of data (expenses, income etc), the next four columns are for year 1, and the next four columns are for year 2.



I tried using IDs and headers to associate the column headers with the data cells but when I do that the page simply doesn't show the table at all.



How should this be coded so a screenreader will read the year, the quarter, then the value as one moves across the columns.



Any suggestions would be appreciated



--snippet -

<table>

<tr>

<th>type</th>

<th colspan="2">2017</th>

<th colspan="2">2018</th>

</tr>

<tr>

<th>&nbsp;</th>

<th>1st 6 months</th>

<th>Last 6 months</th>

<th>1st 6 months</th>

<th>last 6 months</th>

</tr>

<tr>

<th>Expenses</th>

<td>100,000</td>

<td>100,000</td>

<td>60,000</td>

<td>200,000</td>

</tr>

<.

</table>



--
Thanks, Donald

Accessibility, like security, is better when built-in from the beginning rather than bolted on at the end.


http://www.oracle.com/
Donald Raikes | Accessibility Specialist
Mobile: HYPERLINK "tel:+15202717608"+15202717608 | VOIP: HYPERLINK "tel:+15205744033"+15205744033
Oracle Accessibility Program Office
| Tucson, Arizona

http://www.oracle.com/commitment

Oracle is committed to developing practices and products that help protect the environment