How to markup an obscure data table layout for screen readers?

Question

I have the following design I am required to markup, the layout of which I cannot modify:

Please ignore the filler text, I know it doesn't make much sense.

I opted for a table, as it feels 95% table-like. But I'm stumped when it comes to the appropriate semantic markup for the layout of the data points underneath each item. Each point is distinct i.e. this isn't freeform text, and placed in the same relative position every time - but it breaks the traditional data table layout as there are no assigned headers or labels rendered for these points. I am interested in marking up such a layout so that it is both:

1. Semantic
2. Properly available to modern screen readers (I know some older screen readers have various bugs, but much like older browsers, I don't think it's fair to restrict better/newer techniques for deprecated software).

I have encountered this problem numerous times over the past few years, and finally cracked and turned to the community for advice. I have tried:

1. Using separate tbodys for each item, and there within using a second row for the extra data points, but gave up when I couldn't figure out how to associate the "subrow" with the item.
2. Laying out the table with all the various data points and headers horizontally, and then using CSS to position things. Unfortunately, contrary to my earlier statement about deprecated software, I need to support IE 7 and this technique fails.
3. I have considered using hidden row-ths and rowspans to create a more complex table layout and trying to use ARIA to get the desired screen reading results, all to no avail.
4. I have also considered using nested tables, but that just feels very, very wrong.

Any help appreciated.

Note: Rendering this to display cross-browser isn't really that hard - I am interested in how to make this semantic and accessible.

Answer 1

Yes, go with a table! It took me a few iterations to get a site containing tables Webrichtlijnen compliant, but it finally passed all criteria. There are a few things you need to take care of:

• Include a summary attribute to provide a brief summary of your table. You could add a <caption/>, but it's not required, in some cases a heading above the table will also do.
• Use scope attributes on your th and your first td (in most cases the other columns will be associated with the label the first table cell of a row).
• Start with a text version of the delete button.
• I would use a descriptive header for the delete button.
• Make sure to use <abbr/> tags on the abbreviated months.

An example of the table could be:

<table summary="summary">
  <thead>
    <tr>
      <th scope="col">Course</th>
      <th scope="col">Column 2</th>
      <th scope="col">Column 3</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">
        <div class="title">Title</div>
        <div class="sub-title">Subtitle</div>
        <div class="period">Period</div>
      </td>
      <td class="number">1.45</td>
      <td class="number">$1,047</td>
      <td><a href="">Delete</a></td>
    </tr>
  <tbody>
</table>

If you choose to use Ajax on the delete link, first implement it without any Javascript (just point to an URL that deletes the appropriate item) and then add the Ajax functionality to it.

Answer 2

Broadly speaking, I'd have a table with 1 header row and 6 data rows, with the odd data rows having 3 cells, and the even data rows having one cell spanning the three columns.

Inside the even rowed cells, I'd have a <h?> element for the "lorem 102" line and a list for the detail points. On the <td> element of the even rowed cells, I'd have a headers attribute to point to the first cell of the row above, to provide the association from the subrow to the item.

I might well include a <caption> element or a summary attribute on the <table> element to describe the structure as well.

UPDATE: having seen Jasper de Vries's answer, I realise I omitted to cover the delete column. Just follow his advice for that.