<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table, th, td{
            border: 1px solid black;
        }
        th,td{
            padding: 10px;
        }
    </style>
    <title>Books</title>
</head>
<body>
    <table>
        <tr>
            <th>Book Name</th>
            <th>Author</th>
            <th>Genre</th>
        </tr>
        <% bookList.forEach((bookList)=>{ %>
            <tr class="fw-normal">
              <th>
                <img
                  src="images/book.png"
                  alt="avatar 1"
                  style="width: 45px; height: auto"
                />
                <span class="ms-2" style="color: black;">  <%= bookList.name %></span>
              </th>
              <td class="align-middle">

            
                    <span  style="color: black;">
                      <%= bookList.author %>
                    </span>
                 
            
              </td>
              <!-- <td class="align-middle">
                <h6 class="mb-0">
                  <span class="badge bg-danger">High priority</span>
                </h6>
              </td> -->
              <td class="align-middle">

            
                <span  style="color: black;">
                  <%= bookList.genre %>
                </span>
             
        
          </td>
             
   
            </tr>
            <% }) %>
    </table>
</body>
</html>