WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: glen walker
Date: Aug 13, 2019 9:33PM

Your snippet works fine but I would make two adjustments:
1. add scope="col" and scope="row" to the <th> elements
2. make the "type" col header a rowspan="2" and get ride of the &nbsp <th>
in the second row.

On Tue, Aug 13, 2019 at 9:11 PM Don Raikes < <EMAIL REMOVED> > wrote:

> 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
>
>
> > > > >