firestoreから取得したデータ一覧をテーブルに表示したい

Question

前提・実現したいこと

firestoreから取得したデータをhtmlのテーブルに表示したいです。

発生している問題・エラーメッセージ

取得した一覧を表示することはできるのですが、列を分けて項目ごとに表示することができません。

該当のソースコード

JavaScript

　　　　　firebase.auth().onAuthStateChanged(function(user) {
         userName = user.displayName;
         userId = user.uid;

　　　　　let inOutTime = document.querySelector('#inOutName');
        　function renderTime(doc){
          
          let li = document.createElement('li');
          let name = document.createElement('span');
          let intime = document.createElement('span');
          let outtime = document.createElement('span');
          let datetoday = document.createElement('span');

          li.setAttribute('data-id', doc.id);
          name.textContent = doc.data().name;
          intime.textContent = doc.data().intime;
          outtime.textContent = doc.data().outTime;
          datetoday.textContent = doc.data().outTimeValue;

          li.appendChild(name);
          li.appendChild(datetoday);
          li.appendChild(intime);
          li.appendChild(outtime);
         
          inOutTime.appendChild(li);
        }

　　　　　database.collection(userId).get().then((snapshot) => {
          snapshot.docs.forEach(doc => {
            renderTime(doc);
          })
        })
html

<table border="1">
<tr>
       <th id="inOutName">名前</th>
       <th id="intime">出勤時間</th>
       <th>退勤時間</th>
     </tr>
     <tr>
</table>

このコードだと一覧を表示することができますが、列を分けられません。

試したこと

JavaScript

let inTime = document.querySelector('#intime');
function renderTime(doc){

      let list = document.createElement('li');
      let intime = document.createElement('span');
      
      list.setAttribute('data-id-in', doc.id);
     
      intime.textContent = doc.data().intime;
      
      list.appendChild(intime);
      
      inTime.appendChild(list);
    }

    let inOutTime = document.querySelector('#inOutName');
    function renderTime(doc){
      
      let li = document.createElement('li');
      let name = document.createElement('span');

      li.setAttribute('data-id', doc.id);
      name.textContent = doc.data().name;

      li.appendChild(name);
      
      inOutTime.appendChild(li);
    }

上記のように項目を分けてみたのですが、そうすると後に書いたものしか表示されません。
動画を見ながら書いたのですがオリジナルも含まれているので滅茶苦茶な書き方だったら申し訳ありません。
どなたか意図を汲んでいただける方ご教授をお願いします。

Comments

[Arahabica]

tableタグを使えば良いのではないでしょうか？

[teddy1121]

Arahabica様
失礼しました。tableタグを記載するのを忘れていました。
質問を編集しました。
既にtableタグは書いてあります。
表にはなるのですが、全てのデータが横に繋がってしまっています。
これを項目ごとに列を分けたいのですができません。よろしくお願いします。

[Arahabica]

<table>
<tr>
<th>列1</th>
<th>列2</th>
</tr>
<tr>
<td>ああ</td>
<td>いい</td>
</tr>
<tr>
<td>ああ</td>
<td>いい</td>
</tr>
</table>

という構造なので、この構造になるようにすれば行けるはずです。
liタグはtableを使うときには使わないはずです。

[teddy1121]

Arahabica様
liタグ使わないのですね！
document.createElement('span')のspanを('td')にしたらテーブル表示になりました！
まだ整っていませんが、あとはCSSで整形すれば理想のテーブルになりそうです！
ありがとうございました！！