WebAIM - Web Accessibility In Mind

E-mail List Archives

optimized data table layout

for

From: Lee, Samson (HRSA) [C]
Date: Apr 9, 2008 1:40PM

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?