How to group columns in a datatable: Using nested tables or colspan?

I am working on a web application and need to group a set of columns under a single header in a datatable. I am considering two approaches:

Using colspan:

This seems straightforward and keeps the HTML structure simple.

However, I am concerned about how it will scale with more complex data structures and if there are any limitations.

Using nested tables:

This approach might provide more flexibility for complex groupings, but I am worried it could make the code harder to maintain and affect accessibility.

Are there any specific pros and cons of using colspan versus nested tables that I should be aware of?

Are there considerations about structuring my datatable for accessibility and maintainability?

TL;DR Use colspan

Here are a couple of reasons

1. It's semantic. The browser, accessibility apps and devices and search engines (if you are interesed) will understand the site better
2. Its what they are designed for. As you can read here, if you want to have complex headers with nested levels, this is the way to go. Nested tables although available, are never suggested and not very recommended because it adds complexity to the design (more about this below)
3. Its easier to maintain. Yes, maybe consider that a nested table gives you more flexibility, but listening to events, styling and many other basic thigs will get complicated easily. For instance, if you dont eliminate properly all the spaces between tables and handle properly padding and margin, then you may see disalignment. And the event listeners can be set up in a more straighforward manner, for example if you want to create some selection functionality in your table, how are you going to corelate the fact that the row 15 is the row 13 in your embeded table? you would have to do some complex logics to figure exactly where you are if you are to navigate the table and if you dont set the events properly you may end up with double firing events. With colspan your row 5 is always your row 5th. If you need any cell you can go to the parent and then look for any other neighboor cell.

You could use nesting tables, but you need to be very careful with events, and with styling. Probably you'll have to remove all styling from the table itself and ensure to style only the outer table or have specific styles for each table/level. If you want to keep accessibility you can use the aria attributes to simulate the table like aria-colspan and aria-role

If you want more flexibility you can try to generate the table based on the data itself, like write a json2table function or something like that, so that the html is generated based on the data and you have only one source to update (and not have to add a column to the data, then to the HTML everytime the data changes). Also if you care about accessibility you can use other optional aria atributes like aria-level and things like that

Good luck