Accessible, Proper Multi-Level Tabular Data

[curtiss]

I'm having some trouble with a table I'm creating. Obviously, I can get it laid out just fine using just tr and td tags, but that doesn't meet the accessibility standards. So, I'm trying to figure out how to do this accessibly.

Here's my problem:

I have a table that is basically two levels deep. The second level has four subsets within it.

What it is, is a table detailing the course requirements for a four semester program. Therefore, we will have a dataset for each of the four semesters, but they all should logically go in one table, as they all deal with the same program. I then have a footer at the bottom of each dataset totaling the number of credits for each semester. At the bottom of the table, I have a footer totaling the number of credits for the entire program.

The way I understand it, you are supposed to label your th elements (actually, identify them with the "id" switch), and then refer to them with the "headers" switch in each of your data cells. Each of my datasets should have a header identifying in which semester those courses belong. Also, each of my four datasets should have the identifiers showing that column 1 is the course number, column 2 is the course name, and column 3 is the number of credits for that course. So each of my four headers needs to go at the top of my table. I think that would look something like:

	<tr>
		<th id="sem1" colspan="3">First Semester</th>
	</tr>
	<tr>
		<th id="sem2" colspan="3">Second Semester</th>
	</tr>
	<tr>
		<th id="sem3" colspan="3">Third Semester</th>
	</tr>
	<tr>
		<th id="sem4" colspan="3">Fourth Semester</th>
	</tr>
	<tr>
		<th id="coursenum">Course #</th>
		<th id="coursename">Course Name</th>
		<th id="coursecredits">Credits</th>
	</tr>

Then, I need to have a footer for each of my datasets, as well as a footer for the whole table. This is where I really get tripped up. I can't seem to figure out how to identify which set of rows goes with each footer. According the W3C and section 508 of the accessibility guidelines (at least, the way I understand it), table footers are supposed to be coded and identified at the top of the table. I think that would look something like:

	<tfoot id="sem1footer">
		<tr>
			<td colspan="2" style="text-align: right;">Total</td>
			<td>16</td>
		</tr>
	</tfoot>
	<tfoot id="sem2footer">
		<tr>
			<td colspan="2" style="text-align: right">Total</td>
			<td>18</td>
		</tr>
	</tfoot>
	<tfoot id="sem3footer">
		<tr>
			<td colspan="2" style="text-align: right">Total</td>
			<td>16</td>
		</tr>
	</tfoot>
	<tfoot id="sem4footer">
		<tr>
			<td colspan="2" style="text-align: right">Total</td>
			<td>14</td>
		</tr>
	</tfoot>
	<tfoot id="programtotal">
		<tr>
			<td colspan="2" style="text-align: right;">Total</td>
			<td>64</td>
		</tr>
	</tfoot>

Then, I'm supposed to present my data. I think, if I am understanding correctly, that should look something like (a very small snippet of the information):

	<tbody id="sem1body">
		<tr>
			<td headers="sem1 coursenum">
				ITD 115
			</td>
			<td headers="sem1 coursename">
				Web Design Principles
			</td>
			<td headers="sem1 coursecredits">
				3
			</td>
		</tr>
		<tr>
			<td headers="sem1 coursenum">
				ITD 116
			</td>
			<td headers="sem1 coursename">
				PHP Programming
			</td>
			<td headers="sem1 coursecredits">
				3
			</td>
		</tr>
	</tbody>
	<tbody id="sem2body">
		<tr>
			<td headers="sem2 coursenum">
				ITD 117
			</td>
			<td headers="sem2 coursename">
				Perl Programming
			</td>
			<td headers="sem2 coursecredits">
				3
			</td>
		</tr>
	</tbody>
	<tbody id="sem3body">
		<tr>
			<td headers="sem3 coursenum">
				ITD 118
			</td>
			<td headers="sem3 coursename">
				Javascript
			</td>
			<td headers="sem3 coursecredits">
				3
			</td>
		</tr>
	</tbody>
	<tbody id="sem4body">
		<tr>
			<td headers="sem4 coursenum">
				ITD 119
			</td>
			<td headers="sem4 coursename">
				Macromedia Flash
			</td>
			<td headers="sem4 coursecredits">
				3
			</td>
		</tr>
	</tbody>

My problem is, I can't figure out how to get the headers and footers associated with the right set of information. I have tried using the "headers" tag to associate the right headers with each cell, but that doesn't seem to be working out for me.

The table, ideally, should look something like the attached image called "tableright.png" (with more formatting, etc.). Unfortunately, it currently looks like the attached image called "tablewrong.png".

[\Kritikal\]

Here's a link to the code I cooked up. It's totally semantic but I think that's part of the problem, being too semantic, it certainly doesn't help with formatting.

The nitty gritty of what you need is a dataset within a dataset and this is what my code is, a table within a table.

Just use CSS to format to get it to look nice.

http://kritikal.dyndns.org/temp/table.html

[curtiss]

That's good. I don't know why I didn't think of that. I should be able to make that work without much trouble at all.