WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: optimized data table layout

for

From: Karl Groves
Date: Apr 9, 2008 6:00PM

The WebAIM website has some pretty good guidance on tables:
http://www.webaim.org/techniques/tables/

Karl Groves
AIM/YIM: karlcore
Skype: eight.pistons
www.WebAccessStrategies.com


> -----Original Message-----
> From: <EMAIL REMOVED> [mailto:webaim-forum-
> <EMAIL REMOVED> ] On Behalf Of Lee, Samson (HRSA) [C]
> Sent: Wednesday, April 09, 2008 3:33 PM
> To: WebAIM Discussion List
> Subject: [WebAIM] optimized data table layout
>
> I have a data table that looks like this:
>
> <table border="1">
> <tr>
> <th rowspan="2">Age</th>
> <th rowspan="2">Type</th>
> <th colspan="2">Many Words1 Blah Blah Blah</th>
> <th colspan="2">Many Words2 Blah Blah Blah</th>
> <th rowspan="2">Total</th>
> </tr>
> <tr>
> <th>Male</th>
> <th>Female</th>
> <th>Male</th>
> <th>Female</th>
> </tr>
> <tr>
> <th rowspan="2">10 - 20</th>
> <th align="left">TypeName1</th>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> </tr>
> <tr>
> <th align="left">TypeName2-This name is long</th>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> </tr>
> <tr>
> <th rowspan="2">20 - 30</th>
> <th align="left">TypeName1</th>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> </tr>
> <tr>
> <th align="left">TypeName2-This name is long</th>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> </tr>
> </table>
>
> I'm trying to simplify the table format for accessibility while keeping
> it intuitive from a usability point of view.
>
> There are two options I can think of:
>
> Option 1:
>
> <table border="1">
> <caption>TypeName1</caption>
> <tr>
> <th rowspan="2">Age</th>
> <th colspan="2">Many Words1 Blah Blah Blah</th>
> <th colspan="2">Many Words2 Blah Blah Blah</th>
> <th rowspan="2">Total</th>
> </tr>
> <tr>
> <th>Male</th>
> <th>Female</th>
> <th>Male</th>
> <th>Female</th>
> </tr>
> <tr>
> <th>10 - 20</th>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> </tr>
> <tr>
> <th>20 - 30</th>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> </tr>
> </table>
> <table border="1">
> <caption>TypeName2-This name is long</caption>
> <tr>
> <th rowspan="2">Age</th>
> <th colspan="2">Many Words1 Blah Blah Blah</th>
> <th colspan="2">Many Words2 Blah Blah Blah</th>
> <th rowspan="2">Total</th>
> </tr>
> <tr>
> <th>Male</th>
> <th>Female</th>
> <th>Male</th>
> <th>Female</th>
> </tr>
> <tr>
> <th>10 - 20</th>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> </tr>
> <tr>
> <th>20 - 30</th>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> </tr>
> </table>
>
>
> This gets rid of the spanned rows in the header column, but it has two
> tables with the same header rows, which doesn't seem to be intuitive.
>
> Option 2:
>
> <table border="1">
> <tr>
> <th rowspan="2">Age &amp; Type</th>
> <th colspan="2">Many Words1 Blah Blah Blah</th>
> <th colspan="2">Many Words2 Blah Blah Blah</th>
> <th rowspan="2">Total</th>
> </tr>
> <tr>
> <th>Male</th>
> <th>Female</th>
> <th>Male</th>
> <th>Female</th>
> </tr>
> <tr>
> <th align="left">10 - 20: TypeName1</th>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> </tr>
> <tr>
> <th align="left">10 - 20: TypeName2-This name is long</th>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> </tr>
> <tr>
> <th align="left">20 - 30: TypeName1</th>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> </tr>
> <tr>
> <th align="left">20 - 30: TypeName2-This name is long</th>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> </tr>
> </table>
>
>
> This option keeps everything in one table and it is simplified. I like
> this better than Option 1, but I wonder if it can be improved even
> more.
> Any thoughts?
>