templates/index.html

<!DOCTYPE html>
<html>
<head>
  <title>RFID Web UI</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <-- add Bootstrap CSS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <-- add jquery -->
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <-- add popper.js -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <-- add Bootstrap JS -->
</head>
<body>
  <table class="table"> <-- add a Bootstrap table class -->
    <thead> <-- add a Bootstrap table headers -->
      <tr> 
        <th>Card ID</th>
        <th>Name</th>
        <th>Binary Value</th>
        <th>Timestamp</th>
      </tr>
    </thead>
    <tbody> <-- fill the table with data -->
      {% for card in cards %}
      <tr>
        <td>{{ card.card_id }}</td>
        <td>{{ card.name }}</td>
        <td>{{ card.binary_value }}</td>
        <td>{{ card.timestamp }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</body>
</html>