Semantics of nested tables and table header

Question

I have a table in which elements can have children with the same attributes, for example:

ITEM ATTRIBUTE 1 ATTRIBUTE 2 item value value sub value value sub value value item value value 

From this, I created the markup as follows:

 <table> <thead> <tr> <th>ITEM</th> <th>ATTRIBUTE 1</th> <th>ATTRIBUTE 2</th> </tr> </thead> <tbody> <tr> <td>item</td> <td>value</td> <td>value</td> </tr> <tr> <td colspan=3> <table> <tbody> <tr> <td>sub</td> <td>value</td> <td>value</td> </tr> </tbody> </table> </td> </tr> <tr> <td>item</td> <td>value</td> <td>value</td> </tr> </tbody> </table> 

Now my questions are:

• Is this the best semantic solution?
• Is another approach more appropriate? If so, which one is recommended?
• Is the table title responsible for both tables or do I need to create a new one (perhaps with visibility: hidden for the nested table?

Answer 1

Is this the best semantic solution?

Not really. Although the action of embedding an element A inside another element of B can be used to indicate that A is a child of B, this is not what you are doing here: you will enclose the table in a completely different row, so that the relationship between parents and children between A and B.

By creating a cell that spans all the columns in the table and then creates another table in it with the same number of columns, you also effectively say: "these are some other columns that are not related to those in the external table."

You can see the implied (absence) relationship between the columns by adding a border to the cells in the above example:

Obviously, you can fix this with CSS, but unidentified rendering of an HTML fragment is often a good guide for its semantics.

Is another approach more appropriate? If so, is this the recommended way?

There is no standard way to represent hierarchical relationships between table rows in HTML. The criterion from the answer I gave to a similar question , however you can do this with additional classes, identifiers and data- :

 <table> <thead> <tr> <th>ITEM</th> <th>ATTRIBUTE 1</th> <th>ATTRIBUTE 2</th> </tr> </thead> <tbody> <tr id=100> <td>item</td> <td>value</td> <td>value</td> </tr> <tr id=110 data-parent=100 class=level-1> <td>sub</td> <td>value</td> <td>value</td> </tr> <tr id=200> <td>item</td> <td>value</td> <td>value</td> </tr> </tbody> </table> 

The relationship between parents and children will not be displayed in unpainted rendering (there is no other way you could do this without adding additional content, as far as I can see), but there are enough hooks to add CSS

 .level-1 > td:first-child { padding-left: 1em; } 

..., which leads to the following:

With a little javascript, you can also use the id and data-parent attributes for customization, so that, for example, hovering over a string causes the parent to be highlighted.

Is the table title responsible for both tables, or do I need to create a new one?

In the proposed solution, creating one cell that spans all columns and then creates another table inside it means that there is no connection between the header cells and the cells of your "child" row. Obviously, my proposed solution above does not have this problem.

Answer 2

This is the recommendation of the W3C:

Currently, those who want to provide consistent Technology support for tables in which the headers are not in the first row / column can use the method for complex H43 tables: using id attributes and headers to associate data cells with header cells in data tables. For simple tables that have headings in the first column or row, we recommend using the th and td elements.

you can block this post: Best way to create html semantic table

hope you can get an answer

Answer 3

Speaking of semantics, we should have more time than finding the answer to your question.

But for the whole point, this link will help you. This page contains all the information you are interested in. Interestingly, unlike the usual "declarative" w3c specification, it has a "suggestive" spelling of the question in this context. You might want to familiarize yourself from the start.

Answer 4

I think putting children in a separate table is the wrong way. Nested tables are not like nested lists; they do not carry the same semantic hierarchy. It seems that everything should be in the same table if everything contains the same information.

For example, if your table had headers

 REGION POPULATION AREA 

then you can have item1 = Earth, item2 = France, item3 = Paris ... and it doesn't matter if France was the birthplace of the Earth or Paris was a child of France; you still better keep everything in one table and not try to make the relationship between parents and children different from the CSS style.

If your table is really not clear, if someone does not know what the relationship is between the parent and the child, could you give an example of the table data so that I can better understand how to structure it?