E-mail List Archives
Thread: optimized data table layout
Number of posts in this thread: 4 (In chronological order)
From: Lee, Samson (HRSA) [C]
Date: Wed, Apr 09 2008 12:00PM
Subject: optimized data table layout
No previous message | Next message →
I have a data table that looks like this:
Age
Type
Many Words1 Blah Blah Blah
Many Words2 Blah Blah Blah
Total
Male
Female
Male
Female
10 - 20
TypeName1
TypeName2-This name is long
20 - 30
TypeName1
TypeName2-This name is long
I'm trying to simplify the table format for accessibility while keeping
it intuitive from usability's point of view.
There are two options I can think of:
Option 1:
TypeName1
Age
Many Words1 Blah Blah Blah
Many Words2 Blah Blah Blah
Total
Male
Female
Male
Female
10 - 20
20 - 30
TypeName2-This name is long
Age
Many Words1 Blah Blah Blah
Many Words2 Blah Blah Blah
Total
Male
Female
Male
Female
10 - 20
20 - 30
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:
Age & Type
Many Words1 Blah Blah Blah
Many Words2 Blah Blah Blah
Total
Male
Female
Male
Female
10 - 20: TypeName1
10 - 20: TypeName2-This name is long
20 - 30: TypeName1
20 - 30: TypeName2-This name is long
This option keeps everything in one table and it is simplified. I like
this better than Option 1, but I wonder if I can improve even more. Any
thoughts?
From: Lee, Samson (HRSA) [C]
Date: Wed, Apr 09 2008 1:40PM
Subject: optimized data table layout
← Previous message | Next message →
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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th align="left">TypeName2-This name is long</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th rowspan="2">20 - 30</th>
<th align="left">TypeName1</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th align="left">TypeName2-This name is long</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>20 - 30</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>20 - 30</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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 & 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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th align="left">10 - 20: TypeName2-This name is long</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th align="left">20 - 30: TypeName1</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th align="left">20 - 30: TypeName2-This name is long</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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?
From: Karl Groves
Date: Wed, Apr 09 2008 6:00PM
Subject: Re: optimized data table layout
← Previous message | Next message →
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 ADDRESS REMOVED = [mailto:webaim-forum-
> = EMAIL ADDRESS 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> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
> <tr>
> <th align="left">TypeName2-This name is long</th>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
> <tr>
> <th rowspan="2">20 - 30</th>
> <th align="left">TypeName1</th>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
> <tr>
> <th align="left">TypeName2-This name is long</th>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </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> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
> <tr>
> <th>20 - 30</th>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </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> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
> <tr>
> <th>20 - 30</th>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </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 & 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> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
> <tr>
> <th align="left">10 - 20: TypeName2-This name is long</th>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
> <tr>
> <th align="left">20 - 30: TypeName1</th>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
> <tr>
> <th align="left">20 - 30: TypeName2-This name is long</th>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </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?
>
From: Chris Hoffman
Date: Wed, Apr 09 2008 10:40PM
Subject: Re: optimized data table layout
← Previous message | No next message
Hi Samson,
On Wed, 2008-04-09 at 15:33 -0400, Lee, Samson (HRSA) [C] wrote:
> I'm trying to simplify the table format for accessibility while keeping
> it intuitive from a usability point of view.
First, remember that the best table layout will be the one that allows
the reader to make the most interesting or significant comparisons
across categories.
Second, consider changing the first column in option two to something
like:
Type 1
10-20 years old
20-30 years old
Type 2-This name is long
10-20 years old
20-30 years old
Each type could be in a separate <tbody> (instead of separate tables,
like option one), and the type headings could have @scope="rowgroup".
The resulting first column would be a lot easier to read.
Finally, if you are able to without losing a valuable set of
comparisons, consider getting rid of the totals column. Readers can add
values themselves if they want or need to, so summing categories is
unnecessary a lot of the time. The same can be said for other basic
calculations, like minimums, maximums and means.
--Chris