Как правильно выровнять данные в таблице ⇐ Javascript

[Anonymous]

В моем HTML-коде:

Код: Выделить всё

ID
Author Name
Books

В моем JavaScript:

Код: Выделить всё

data.items.forEach(user => {
const row = document.createElement("tr");
row.innerHTML = `
${user.id}
${user.authorname}`;
newTbody.appendChild(row);
user.books.forEach(book => {
const bookdata = document.createElement("td");
bookdata.innerHTML = `${book.id} : ${book.booktitle}`;
newTbody.appendChild(bookdata);
});
});

Выходная таблица выглядит так, как показано ниже, то есть сведения о книгах отображаются в следующей строке, а не в виде td:


Что я здесь делаю не так? Я пытаюсь выровнять сведения о книгах (идентификатор и название) в третьем столбце (Книги). Как мне этого добиться?
Я разместил здесь весь HTML-код:
https://github.com/ajkr195/snippet/blob/main/index.html

Подробнее здесь: https://stackoverflow.com/questions/798 ... e-properly