Html Question posted in
Some basic documentation can be found here.

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

I have a datatable in my web application, and I need to group a set of columns under a single header. I am trying to determine the best practice for achieving this.

Here are the two approaches I am considering:

  1. 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.

  2. 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.

Which method is considered a best practice for grouping columns in a datatable? Are there any specific pros and cons of using colspan versus nested tables that I should be aware of?

Is there a better way to structure my datatable for accessibility and maintainability?

Tags:

2

Answers


  1. 0

    In my case im use like this, but if you export as csv then have add second head in your js

    <table id="tblAcumuladoHrsExtras" class="table table-hover table-striped table-bordered nowrap" width="100%">
<thead>
    <tr>
        <th class="text-center" colspan=""></th>
        <th class="text-center" colspan="2">Hrs Extras Dobles</th>
        <th class="text-center" colspan="2">Hrs Extras Triples</th>
        <th class="text-center" colspan="2">TOTALES</th>
    </tr>
    <tr>
        <th>Fecha Nómina</th>
        <th>Cant Hrs Ex.</th>
        <th>Importe Hrs Ex.</th>
        <th>Cant Hrs Ex.</th>
        <th>Importe Hrs Ex.</th>
        <th>Cant Hrs Ex.</th>
        <th>Importe Hrs Ex.</th>
    </tr>
</thead>
<tbody></tbody>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search