Semantic markup for complex or nested HTML tables?

Question

I want to know the best way to mark up tabular data on a web page when data rows contain complex data that can't fit within a single table row.

Here's a concrete example. The first line has a list of extra information attached to it about arms and legs.

Shadrach  M  Banana     12
  Arms  Blue    2
  Legs  Yellow  3
Meshgah   M  Apple      34
Abednego  M  Persimmon   0

Is there a good way to mark this up other than using a spanned cell containing a nested table like this?

+-------+--+--------+-----+
|       |  |        |     |
+-------+--+--------+-----+
| +-------+------+-+      |
| |       |      | |      |
| +-------+------+-+      |
| |       |      | |      |
| +-------+------+-+      |
+-------+--+--------+-----+
|       |  |        |     |
+-------+--+--------+-----+
|       |  |        |     |
+-------+--+--------+-----+

I'm not completely happy with this because the outer table has four columns, with specific headings and meanings; but the second row spans all four columns and contains something different. I really want this information to be part of the first line item (Shadrach), not part of the top-level table. But HTML doesn't seem to allow me to do this.

Is there a better, more semantic way?

Answer 1

If you put the table in the first column of the detail row, make it span all four columns, and add descriptive table headers to the table, then that should provide some basic semantics to relate the detail table to the column that it describes.

I think this is a case though where the traditional HTML semantics fail to convey what you are looking for, and you should think about making use of XHTML and extending it with ARIA attributes laid out by the W3C WAI to augment existing XHTML semantics to describe complex structures like the one you are trying to create. Perhaps if you added an aria-describedby attribute to the cell the detail table describes, that would provide the additional semantics you are looking for:

<table>
     <thead>
        <tr>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
          <th>column 4</th>
        </tr>
     </thead>
     <tbody>
        <tr>
          <td id="master" aria-describedby="detail">Shadrach</td>  
          <td>M</td>  
          <td>Banana</td>     
          <td>12</td>
        </tr>
        <tr>
          <td colspan="4">
             <table id="detail">
                <tbody>
                   <tr>
                      <td>arms</td>
                      <td>blue</td>
                      <td>2</td>
                   </tr> 
                   <tr>
                      <td>legs</td>
                      <td>yellow</td>
                      <td>3</td>
                   </tr>
                </tbody>
             </table>
          </td>
        </tr>
     </tbody
 </table>

There are a multitude of aria-roles and attributes you may find useful, for example, treegrid role for tables with hierarchical layouts and expanding rows. Take a look through the ARIA working draft and I'm sure you'll find something that can describe what you are trying to convey.

Answer 2

One thing you need to ask yourself when trying to make your markup more semantic is to what end you are doing it. Semantic markup has value because it's easier to style, and apply different stylesheets to without having to customize them for the markup you are using. It has value because it aids accessibility, making it easier for screenreaders or alternative rendering engines to analyze it appropriately. And sometimes it has value because search engine or other automated tools can extract information from it.

Sometimes, however, you come across a case that HTML just can't handle. This seems to be one of them. HTML does not have any way of nesting hierarchical data in tables with columns that don't match the other columns of the table. So, you need to do the best with what you've got. At this point, worrying about making it more semantic doesn't buy you all that much; you're doing something fairly special-case, that other stylesheets, screen readers, and tools probably won't know what to do with, so pretty much any solution you come up with that isn't completely contrary to the purpose of the elements in question is OK.

I think the solution you mention is about the best you can do. Mark those rows containing nested tables with a class that indicates that they aren't like the other rows, and call it good. If you wanted, you could group them together with the rows they are attached to using multiple <tbody> elements:

<table>
<tbody>
  <tr><td>Shadrach  <td>M  <td>Banana     <td>12
  <tr class=nested><td colspan=4>
    <table>...</table>
<tbody>
  <tr><td>Meshgah   <td>M  <td>Apple      <td>34
<tbody>
  <tr><td>Abednego  <td>M  <td>Persimmon   <td>0
</table>