Loop through an array of objects and display the objects within a html/css defined table

function Book(name, author, ReadOrNot) {
    this.name = name
    this.author = author
    this.ReadOrNot = ReadOrNot
}

const book1 = new Book("The Hobbit", "J.R.R Tolkien", "Read")
const book2 = new Book("A game of thrones", "George R.R. Martin", "Not read")

let myLibrary = []

function addBookToLibrary(...arr) {
  myLibrary.push(...arr)
}

addBookToLibrary(book1)
addBookToLibrary(book2)

function addBookToTable(){
  let tbody = document.querySelector('tbody')
  myLibrary.forEach(b =>{
    let tr = document.createElement('tr')
    let content = '<td>' + b.name + '</td><td>' + b.author + '</td>'
    if(b.ReadOrNot == 'Read'){
      content += '<td><button id="readbtn" class="btn rdbtn" onclick="toggle()">Read</button></td>'  
     }else{
       content += '<td></td>'
     }
     content += '<td><button class="btn delbtn">Delete</button></td>'
    tr.innerHTML = content
    tbody.appendChild(tr)
   })
}

addBookToTable()

*{
    box-sizing: border-box;
    --darkblue: #465c6b;
    --blue: #779bb3;
    --lightgrey: rgb(244, 242, 242);
}


table{
    border-collapse: collapse;
    width: 30em;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 10px 30px 5px rgba(0,0,0,.15);
    margin: 100px auto;
    
}

table thead td{
    background-color: rgb(38, 36, 36);
    color: whitesmoke;
    border-bottom: .5px solid black;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 8px;
    
}

table tbody td {
    padding: 8px;
    
}

table tbody tr td:nth-child(4){
    text-align: center;
}

table tbody tr td:nth-child(3){
    text-align: center;
}

table thead tr td:nth-child(3){
    text-align: center;
}

table td{
    font-size: 18px;
    color: rgb(38, 36, 36);
}

.btn.delbtn{
    background-color: #990026;
    min-width: 100px;
    
}

.delbtn:hover{
    background-color: #ec0e46;
    transition: 0.7s;
    cursor: pointer;
}

.btn{
    border-radius: 4px;
    font-weight: 1000;
    font-size: 1rem;
    background-color: var(--darkblue);
    color: aliceblue;
    border: none;
    letter-spacing: 0.7px;
    padding: 10px 20px 10px 20px;
    min-width: 110px;
   
}

.rdbtn:hover{
    cursor: pointer;
    background-color: var(--blue);
    transition: 0.7s;
}

.submit-btn {
    border-radius: 4px;
    font-weight: 500;
    font-size: 1rem;
    background-color: var(--lightgrey);
    color: var(--darkblue);
    border: none;
    letter-spacing: 0.7px;
    padding: 10px 20px 10px 20px;
    
}

.submit-btn:hover{
    cursor: pointer;
}

<table>
        <thead>
            <tr>
                <td>Name</td>
                <td>Author</td>
                <td>Status</td>
                <td>      </td>
            </tr>
        </thead>
       
        <tbody>
            <tr>
                <td>The Hobbit</td>
                <td>J.R.R Tolkien</td>
                <td><button id="readbtn" class="btn rdbtn" onclick="toggle()">Read</button></td>
                <td><button class="btn delbtn">Delete</button></td>
            </tr>
        </tbody>
    </table>