Generování nadpisů v tabulce

ForestCZE:
Problém je, že úpravou hodnoty innerHTML se rovnou modifikuje vnitřní DOM struktura. Schválně se podívej, co to v jednotlivých krocích generuje. Ono to nečeká na to, až ty jednotlivé tagy uzavřeš.

Doporučil bych spíš použít metody insertRow a insertCell:

Je to tím, že když voláš document.querySelector(table).innerHTML += "<tr> tak se do kódu nepřidá jen <tr>. Tedy v první chvíli ano. Jenže prohlížeč chce tu změnu co jsi provedl hned zobrazit. A jelikož jsi tam přidal nevalidní html (tag tr je párový tag) tak si tam přidá ještě jeho uzavírací značku*. Tudíž když pak následně do toho řetězíš th buňky, přidáváš je za konec uzavřeného řádku. Což je zase nevalidní html. S čímž se prohlížeč popere tak, že tu buňku, která se tak bezprizorně válí ve vzduchoprázdnu obalí do tr (které samozřejmě zase uzavře)
Řešení je jednoduché. To generované html nevkládej po částech přímo do stránky ale do pomocné proměnné. Až to budeš mít celé v proměnné, tak to na konci funkce vše nalej do innerHTML. Tedy za předpokladu že si to chceš generovat ručně. U malých tabulek je to jedno, u velkých to může mít tu výhodu že se DOM modifikuje jen jednou a ne tolikrát, kolik je buněk v tabulce.

* situace je ve skutečnosti trochu složitější. On se tam nepřidává jen koncový tag ale ještě se to obaluje to tbody tagu. Pro pochopení problému to je ale nepodstatné a řešení to nemění.