TFOOT tabindex

Put the TFOOT of all TABLE elements at the end of DOM tree of their respective tables. This way, TFOOT go after TBODY in tabindex, which is more natural and desired. Made with pure javascript as a proof of concept, jQuery used only to give tabindex to TRs in the example code to test it working.

by mexicano21

HTML

<html>
  <head>
    <title>Table</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>T1:H1</th>
          <th>T1:H2</th>
          <th>T1:H3</th>
          <th>T1:H4</th>
          <th>T1:H5</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>T1:F1</td>
          <td>T1:F2</td>
          <td>T1:F3</td>
          <td>T1:F4</td>
          <td>T1:F5</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>R1:C1</td>
          <td>R1:C2</td>
          <td>R1:C3</td>
          <td>R1:C4</td>
          <td>R1:C5</td>
        </tr>
        <tr>
          <td>R2:C1</td>
          <td>R2:C2</td>
          <td>R2:C3</td>
          <td>R2:C4</td>
          <td>R2:C5</td>
        </tr>
        <tr>
          <td>R3:C1</td>
          <td>R3:C2</td>
          <td>R3:C3</td>
          <td>R3:C4</td>
          <td>R3:C5</td>
        </tr>
        <tr>
          <td>R4:C1</td>
          <td>R4:C2</td>
          <td>R4:C3</td>
          <td>R4:C4</td>
          <td>R4:C5</td>
        </tr>
        <tr>
          <td>R5:C1</td>
          <td>R5:C2</td>
          <td>R5:C3</td>
          <td>R5:C4</td>
          <td>R5:C5</td>
        </tr>
      </tbody>
    </table>
    <table>
      <thead>
        <tr>
          <th>T2:H1</th>
          <th>T2:H2</th>
          <th>T2:H3</th>
          <th>T2:H4</th>
          <th>T2:H5</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>T2:F1</td>
          <td>T2:F2</td>
          <td>T2:F3</td>
          <td>T2:F4</td>
          <td>T2:F5</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>R1:C1</td>
          <td>R1:C2</td>
          <td>R1:C3</td>
          <td>R1:C4</td>
          <td>R1:C5</td>
        </tr>
        <tr>
          <td>R2:C1</td>
          <td>R2:C2</td>
          <td>R2:C3</td>
          <td>R2:C4</td>
          <td>R2:C5</td>
        </tr>
        <tr>
          <td>R3:C1</td>
          <td>R3:C2</td>
      ...

CSS

body
{
  margin: 0;
  padding: 10px;
}

table
{
  border: 1px outset;
  border-collapse: separate;
  border-spacing: 5px;
  width: 100%;
}

td, th
{
  border: 1px inset;
}

JavaScript

$('tr').attr('tabindex', '0');
var tables = document.querySelectorAll('table');
if (tables.length > 0) for (var i = 0; i < tables.length; i++)
{
  var tfoot = tables[i].querySelector('tfoot');
  if (tfoot)
    tables[i].appendChild(tfoot);
}