Web accessibility service pageWeb accessibility service page

5.1:H105100 For data tables, identify row and column headers.

Improper design

Below is an improper design, there was no TH label indicating the titles for the table.

Improper design:

<TABLE border="1"
summary="Xiao-Ann Lee the parliament politician drinks 10 mocha with sugar every day, 
Da-Yi Wu the parliament politician drinks 5 latte without sugar.">
<CAPTION>
The total number of coffee intake by Xiao-Ann Lee and Da-Yi Wu
</CAPTION>
<TR>
<TD>politician names</TD>
<TD>coffee intake (cup)</TD>
<TD abbr="Type">type of coffee</TD>
<TD>with or without sugar?</TD>
</TR>
<TR>
<TD>Xiao-Ann Lee</TD>
<TD>10</TD>
<TD>Mocha</TD>
<TD>yes</TD>
</TR>
<TR>
<TD>Da-Yi Wu</TD>
<TD>5</TD>
<TD>Latte</TD>
<TD>no</TD>
</TR>
</TABLE>
          

Proper demonstration

Below is proper example which used TH label to indicate the titles.

Proper example:

<TABLE border="1"
summary="Xiao-Ann Lee the parliament politician drinks 10 mocha with sugar every day, 
Da-Yi Wu the parliament politician drinks 5 latte without sugar.">
<CAPTION>
The total number of coffee intake by Xiao-Ann Lee and Da-Yi Wu
</CAPTION>
<TR>
<TH>politician names</TH>
<TH>coffee intake (cup)</TH>
<TH abbr="Type">coffee type</TH>
<TH>with or without sugar?</TH>
</TR>
<TR>
<TD>Xiao-Ann Lee</TD>
<TD>10</TD>
<TD>mocha</TD>
<TD>yes</TD>
</TR>
<TR>
<TD>Da-Yi Wu</TD>
<TD>5</TD>
<TD>latte</TD>
<TD>no</TD>
</TR>
</TABLE>
          
End of Main Content