Search code examples
htmlhtml-tablecss-tablessemantic-markup

HTML table semantic structure - alternative data on rows

This is more of a semantics questions as I know I can do it but should I?

I have a load of data that I need to display on a page. It's laid out as tabular data like so:

| Reference | Name | Date | Status | Type |

This is one of the only use cases where HTML tables actually should be used however…

Each row can be clicked on and then it will expand to show more info about that booking in the row below. With all rows opened the structure will look like:

| Reference | Name | Date | Status | Type |
| Info |
| Reference | Name | Date | Status | Type |
| Info |
| Reference | Name | Date | Status | Type |
| Info |

Without using some CSS or JS hackery to force a new row, I'd need to layout the HTML with the Info cell in its own row spanning all columns. This doesn't seem very semantic to me.

Now I'm wondering whether that's fine, or should I skip using tables all together, or has anyone got a better idea?

Solution

  • You can always set table, tbody, tr and td to display: block and then lay out the desired structure in CSS, using the HTML tags as pure structural markup:

    <html>

  <title>Testing table layout</title>

  <style>

    table, tbody, tr, td {
      display: block;
    }
    table {
      width: 610px;
    }
    tbody, tr {
      clear: both;
      width: 100%;
    }
    td {
      float: left;
      width: 33%;
    }
    td.extra {
      clear: left;
      width: 100%;
    }
    /* Colors to make cells visible */
    td { background: #FFEEEE; }
    td+td { background: #EEFFEE; }
    td+td+td { background: #EEFFFF; }
    td+td+td+td { background: #EEDDFF; }

  </style>

  <body>

    <table>

      <tr valign="baseline">

        <td>Left cell</td>

        <td>Middle cell</td>

        <td>Right cell</td>

        <td class="extra">Supplementary cell</td>

      </tr>

      <tr valign="baseline">

        <td>Left cell</td>

        <td>Middle cell</td>

        <td>Right cell</td>

        <td class="extra">Supplementary cell</td>

      </tr>

      <tr valign="baseline">

        <td>Left cell</td>

        <td>Middle cell</td>

        <td>Right cell</td>

        <td class="extra">Supplementary cell</td>

      </tr>

    </table>

  </body>

</html>

    In real life you will of course limit this to a certain class of tables. The supplementary data in the last cell would of course be initially display: none and will get display: block only when needed.