Varios <thead> / <tbody> en la tabla ¿Válido?

Imagina una lista de listas similar a esta:

var list = [
  { name: 'group1', 
    items: [ 1, 2, 3, 4, 5 ]
  },
  { name: 'group2', 
    items: [ 1, 2, 3, 4, 5 ]
  },
  etc...
]

Ahora olvidar todo el "tablas de datos no son diseñar" argumento, quería mostrar una sola mesa para listy tienen un separado <thead>y <tbody>para cada entrada list.

¿Es esto técnicamente válido? Esto funciona en el navegador, pero mis sentidos de araña están hormigueando en este .

Puede tener tantos <tbody>elementos como desee, pero no más de uno de <thead>y <tfoot>. Referencia :

Modelo de contenido:

En este orden: opcionalmente un elemento de título, seguido de cero o más elementos colgroup, seguido opcionalmente de un elemento thead, seguido de cero o más elementos tbody o uno o más elementos tr, seguido opcionalmente de un elemento tfoot , opcionalmente entremezclado con uno o más elementos de soporte de guiones.

Se permite como máximo uno theady uno , por lo que no debe crear encabezados adicionales. Después de todo, en a le da un significado a sus columnas, como "hora del día", "temperatura", "cantidad de gatos actualmente en llamas".tfoot ththead

Si las entradas de su lista están relacionadas, todas deben estar en la misma tabla y debe proporcionar un encabezado adecuado para mostrar esa relación.

Si las entradas no están relacionadas, debe proporcionar una sola tabla para cada una de ellas. Aún puede aplicar el mismo CSS en cada tabla para obtener un buen resultado.

Lo considero como idatributos. Se supone que son únicos, pero en realidad puede reutilizarlos en la misma página y aún puede seleccionarlos. Dicho esto, el hecho de que se pueda hacer no significa que deba hacerse.

Recomendaría no hacerlo.