How to mark up a fuzzy table of data tables for reading from the screen?

Question

I have the following design, which is required for layout, the layout of which I cannot change:

Please ignore the filler text, I know this does not make much sense.

I chose a table, because it looks like a 95% table. But I'm at a standstill when it comes to corresponding semantic markup for the layout of data points under each element. Each point is different, i.e. This is not free-form text, and each time it is placed in the same relative position, but it breaks down the table structure of a traditional table, since no headings or labels are assigned to these points. I am interested in marking up such a layout so that it is:

• Semantic
• Available for modern screen devices (I know that some old screen readers have various errors, but, like old browsers, I do not think it is fair to limit the best / newer methods for outdated software).

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

• Using a separate tbody for each element, and there, using the second line for additional data points, but gave up when I could not figure out how to associate a "dungeon" with the element.
• Stacking a table with all the different data points and headings horizontally, and then using CSS to place things. Unfortunately, contrary to my previous statement about outdated software, I need to support IE 7, and this method does not work.
• I looked at using hidden th rows 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.
• I also considered using nested tables, but this is just very, very wrong.

Any help was appreciated.

Note: Turning this on to display a cross browser is actually not that difficult - I'm wondering how to make this semantic and accessible.

Answer 1

In general, I will have a table with 1 header row and 6 data rows, with the odd data rows containing 3 cells and the even data rows containing one cell spanning three columns.

Inside the even cells, I would have a <h?> Element for the string "lorem 102" and a list for the detailed points. In the even cell <td> element, I would have a headers attribute pointing to the first cell of the line above to provide communication from the dungeon to the element.

I could include a <caption> element or a summary attribute in the <table> element to describe the structure.

UPDATE: after seeing Jasper de Vries answer, I understand that I am omitted to cover the delete column. Just follow his advice for this.

Answer 2

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

• Include the summary attribute to provide a brief description of your table . You can add <caption/> , but this is not required, in some cases there will also be a caption above the table.
• Use the scope attributes of your th and your first td (in most cases, other columns will be associated with the label of the first cell of the row table).
• Start with the text version of the delete button.
• I would use a descriptive title for the delete button.
• Be sure to use the <abbr/> tags in shorter months.

An example of a table might 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 decide to use Ajax on the delete link, first submit it without any Javascript (just provide the URL that will remove the corresponding element), and then add Ajax functionality to it.