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: Birkir R. Gunnarsson
Date: Aug 14, 2019 3:29AM

You mean scope="colgroup" on the <th> cells that span two columns
<th scope="colgroup" colspan="2">2016</th>
<th scope="colgroup" colspan="2">2017</th>
and, yes,
<th scope="rowgroup" rowspan="2">type</th>

I would also add scope="col" to the <th> cells in the second row
(first 6 months and last 6 months), this scope is implied for simple
tables with <th> in the first row but needs to be specified when the
cells are not in the first row.



On 8/13/19, glen walker < <EMAIL REMOVED> > wrote:
> 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
>>
>>
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.