先に解決したコード全体を載せます。
**インデントのズレ等は質問者のままとします。**
**JavaScriptはHTML内に埋め込む形にしています。**

あくまで、ねらい通りにレイアウトすることを目標としたので、他の必要なコードが消えているかもしれません。参考として利用してください。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel ="stylesheet" href="css/style.css">
      <title>Todoリスト</title>
    </head>
    <body>
      <h1>Todoリスト</h1>
      <p>
        <input type="radio" name="status" value="1" checked="checked">全て
        <input type="radio" name="status" value="2">作業中
        <input type="radio" name="status" value="3">完了
        </p>
    ​
    <p></p>
    ​
        <table>
          <thead>
            <th>ID</th>
            <th>コメント</th>
            <th>状態</th>
            <th>削除ボタン</th>
          </thead>
          <tbody class ="addTask-target"></tbody>
        </table>
    ​
        <h2>新規タスクの追加</h2>
        <input class="addTask-value" type="text" />
        <button class="addTask-trigger" type="button">追加</button>
      <script src="js/main.js"></script>
    </body>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
    // 必要なDOM要素を取得。
          const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0];
          const addTaskTarget = document.getElementsByClassName('addTask-target')[0];
          const addTaskValue = document.getElementsByClassName('addTask-value')[0];  
          //ID用のインデックスを定義
    let nextId = 0;
    const addTask = (task,id) => {
        // 表のタグを生成する
        const tableItem = document.createElement('tr');
        const addButtonTd = document.createElement('td');
        const addButton = document.createElement('button');
        const removeButtonTd = document.createElement('td');
        const removeButton = document.createElement('button');
        // それぞれ作業中、削除という言葉をボタンに入れる
        addButton.innerText = '作業中';
        removeButton.innerText = '削除';
        //ボタンを押したら以下の作業をする
        removeButton.addEventListener('click', () => removeTask(removeButton));
        // IDを表示するspan要素を作成して tableItem に追加
        const idSpan = document.createElement('span');
        idSpan.innerText = id;
        const idSpanTd = document.createElement('td');
        idSpanTd.append(idSpan);
        
        const taskSpan = document.createElement('span');
        const taskSpanTd = document.createElement('td');
        taskSpan.innerText = task;
        taskSpanTd.append(taskSpan);
    
        addButtonTd.append(addButton);
        removeButtonTd.append(removeButton);
    
        tableItem.append(idSpanTd);
        tableItem.append(taskSpanTd);
        tableItem.append(addButtonTd);
        tableItem.append(removeButtonTd);
    
         //入力タスクを表示
         addTaskTarget.appendChild(tableItem);
    };
    // 追加ボタンに対して、タスク登録イベントを設定
    addTaskTrigger.addEventListener('click', event => {
        const task = addTaskValue.value;
        addTask(task,nextId ++);
        addTaskValue.value = '';
    });
    });
    </script>
    </html>

# 解説
あなたが書いたコードによってどのようなHTMLが生成されているか確認してみましょう。
下記のような感じになっていました。

## おかしな点を探る

    <tbody class="addTask-target">
            <tr>          
            </tr>     
          <thead><span>0</span>aaa<button>作業中</button><button>削除</button></thead><thead><span>1</span>bbb<button>作業中</button><button>削除</button></thead></tbody>

## またもともとのHTMLもおかしいです
### HTMLのおかしいところ

    <tr>ID コメント 状態</tr>

Gifでは4つのデータを表示したいようですが、これでは3つのデータを表示したいように受け取れます。
しかも`<tr>`の中に直接文字を打ち込んでいるのでこれでは何も機能しません。

## JavaScriptのおかしいところ
HTML側と似たようなミスをしていますが、いきなりすべてのデータを `thead` におしこみすぎています。`td` をちゃんと作って一つずつHTMLを構築していくように修正しました。