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

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>

Answer 2

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 3

Is there a better, more semantic way?

Yes - don't put a nested table in there. The Arms/Legs should either be more columns on the original table, or a separate table altogether. Then use CSS to style as appropriate¹.

¹No, I don't know how you could possibly get the same visual effect with semantic HTML and CSS. But that's not the point. You're looking for semantic markup - not how to make it fit with what you think is UX appropriate (hint: if you're using tables for layout (as you are) then it's only UX appropriate for visual users).

Answer 4

The WAI's tables tutorial provides a very simple introduction to dealing with complex tables. The example from the original post might illustrate a kind of multi-level table.

Answer 5

Unless you have explicit semantics for your information there is no single way to do this. You appear to have a tree-like structure inside the rows and some nested DIV may be useful. So it may be possible to have a DIV child of a row cell, though it will be complex to work with. Alternatively you could try to create nested tables (TABLE as the contents or a cell).

If you want to preserve complex semantics then HTML is not the best way to do it and maybe you should either use an XML representation or RDF. These can both be transformed to HTML for display while preserving the semantics.