E-mail List Archives
Thread: looking for a working example of a table with multiple levels of column headers
Number of posts in this thread: 3 (In chronological order)
From: Don Raikes
Date: Tue, Aug 13 2019 9:11PM
Subject: looking for a working example of a table with multiple levels of column headers
No previous message | Next message →
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> </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
From: glen walker
Date: Tue, Aug 13 2019 9:33PM
Subject: Re: looking for a working example of a table with multiple levels of column headers
← Previous message | Next message →
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   <th>
in the second row.
On Tue, Aug 13, 2019 at 9:11 PM Don Raikes < = EMAIL ADDRESS 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> </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
>
>
> > > > >
From: Birkir R. Gunnarsson
Date: Wed, Aug 14 2019 3:29AM
Subject: Re: looking for a working example of a table with multiple levels of column headers
← Previous message | No next message
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 ADDRESS 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   <th>
> in the second row.
>
> On Tue, Aug 13, 2019 at 9:11 PM Don Raikes < = EMAIL ADDRESS 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> </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.