先に行を作ったほうがいいのではないか？と考えました。
36 行目の後に書いても問題なく動作はしているようです。

const tr = document.createElement('tr');
document.querySelector('tbody').appendChild(tr);

今回のソースコードでは 40 行目

tr.appendChild(td);

ここで tr の子ノードの末端に td が追加されるが、tr はまだ追加していないのでここでは反映はされない。
42 行目でその td を含めたtr が追加され、ここで HTML に反映される。

「セルを作ってからその行を追加」が、table に対する基本的な書き方ということでしょうか？