<thead> element for sorting columns is invalid HTML

[ritchieanesco]

The rendered markup for sorting the columns are placed in a section element with a thead.

I've run the rendered markup through https://validator.w3.org/ and the structure is deemed invalid.

Is there any reason why the thead is not apart of the table?

Current structure

<article class="dt-table">
  <section>
    <thead>
      <tr>
        <th></th>
      </tr>
    </thead>
  </section>
  <table> ... </table>
</article>

Proposed solution

<article class="dt-table">
 <table>
    <thead>
      <tr>
        <th><button>...</button></th>
      </tr>
    </thead>
    <tbody>...</tbody>
 </table>  
</article>

Alternatively, if you need to keep the header and columns seperate you can emulate table cell styling with display: table.

<article class="dt-table">
  <section>
    <div class="thead">
      <div class="tr">
        <div class="th><button>column title</button></div>
      </div>
    </div>
  </section>
  <table> ... </table>
</article>

<style>
  .thead { display: table; }
  .tr { display: table-row; }
  .th { display: table-cell; }
</style>