HTML – Nested tables with related parent content

[jonnow]

Hi,

Having a semantics issue. I have a basic table with a standard header and footer. Each row contains an order, beneath each row I need to display another table, that will contain a break down of costs relating to that order. Additionally, these inner tables will be displayed with a jQuery accordion to hide and show when required (but I’m just concentrating on the HTML for now)

How can I semantically approach this in HTML?

Example on CodePen…

[jonnow]

Here is also an awesome illustration of my conundrum: http://i.stack.imgur.com/Wlx4N.jpg

[Paulie_D]

How can I semantically approach this in HTML?

Do you mean you don’t want to use a table because this looks like an ideal place to use one?

[__]

Absolutely. <table>s can be nested specifically for this reason: sometimes, you need to display multi-dimensional/ hierarchical data. Nothing un-semantic about it.

[jonnow]

@Paulie_D:
Hey, no I DO want to use a table as it’s data that should be in a table. I was getting confused about how to link sub-table data with it’s parent rows.

Imagine a collapsable accordion layout:

<h3>Title</h3>
<div>Related code</div>

I’m shooting for something just like this, however instead of an <h3> I want a table row with data, and instead of a div another <table> with a breakdown of the <h3> content.

Confusing, yes?! :D

@un-traq-ed:
Thanks, someone also suggested grouping the data by data attributes or by using multiple <tbody>s to group top and sub level.

Any thoughts on that (using multi tbody)?

Thanks,

[__]

Any thoughts on that (using multi tbody)?

Well, data-* attributes are clearly out. They’re scripting hooks. They don’t affect appearance or layout, and explicitly have no semantic meaning.

Multiple tbodys are valid for “grouping” rows, though there aren’t really details on how or for what purpose. My understanding has always been that it’s more of a usability thing, e.g., for pagination. If I understand your scenario correctly, however, I don’t think it would be the proper approach anyway.

I was getting confused about how to link sub-table data with it’s parent rows.

Just nest them.

Without knowing the data structure (or if there is any specific UI you need to accommodate), I couldn’t say for sure. But given a data structure similar to this:

car collectors:
  name
  phone number
  cars
    year
    make
    model

there is nothing wrong (semantically or technically) with a table like this:

| name  | phone   | cars                    |
+-------+---------+-------------------------+
| Alice | KL-5123 | | year | make | model | |
|       |         | +------+------+-------+ |
|       |         | | 1972 | ford | pinto | |
+-------+---------+-------------------------+
| Bob   | KL-5987 | | year | make | model | |
|       |         | +------+------+-------+ |
|       |         | | 1967 | fiat | 1500L | |
|       |         | | 1982 | audi | 5000  | |
+-------+---------+-------------------------+
| etc. ...

[Author]

Posts