digg

In addition to a nice caption tag and summary attribute, you may know that a data table requires table header cells (TH) for the header rows and/or columns, and a scope attribute (see Web Axe episode 3, Data Tables). But what is there is more than… More…

In addition to a nice caption tag and summary attribute, you may know that a data table requires table header cells (TH) for the header rows and/or columns, and a scope attribute (see Web Axe episode 3, Data Tables). But what is there is more than one row of headers? This is called a complex table, and a different type of coding should be used. Download Web Axe Episode 36 (Complex Data Tables) A complex table: can have any number of rows as a set of headers and/or the first column as a set of headers can contain data rows inbetween the header rows uses the id and headers attributes Links: The headers and ID attributes (WebAIM) Identifying rows and column information (W3C WCAG Techniques 5.1.2) Sample code (modified from WebAIM): <table summary="Name, birthdate, and age of Shelly's daughters. Also organized by children by birth and by marriage."><caption>Shelly's Daughters</caption><tr><td></td><th id="name">Name</th><th id="age">Age</th><th id="birthday">Birthday</th></tr><tr><th rowspan="2" id="birth">by birth</th><th id="jackie">Jackie</th><td headers="birth jackie age">5</td><td headers="birth jackie birthday">April 5</td></tr><tr><th id="beth">Beth</th><td headers="birth beth age">8</td><td headers="birth beth birthday">January 14</td></tr><tr><th id="step">by marriage</th><th id="jenny">Jenny</th><td headers ="step jenny age">12</td><td headers="step jenny birthday">Feb 12</td></tr></table>