Home/ Questions/Q 466821
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T23:31:08+00:00

I want to know the best way to mark up tabular data on a

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0