Vue Table With Image

<!DOCTYPE html>
<html>

<body>
  <div id="app">
    <h3>Vue Table with Image </h3>
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>Profile Image</th>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(user, index) in users" :key="index">
            <td><img :src="user.profileImage" alt="Profile Image" width="50"></td>
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          users: [
            {
              name: "John Doe",
              email: "johndoe@example.com",
              profileImage: "https://www.sarkarinaukriexams.com/images/editor/1684088774elon-musk-g2eacd7b5f_640.png"
            },
            {
              name: "Jane Doe",
              email: "janedoe@example.com",
              profileImage: "https://www.sarkarinaukriexams.com/images/editor/1684088802andrew-ronalds-g2d4cb2f67_640.jpg"
            },
            {
              name: "Bob Smith",
              email: "bobsmith@example.com",
              profileImage: "https://www.sarkarinaukriexams.com/images/editor/1684088825entrepreneur-g1820f683f_640.jpg"
            }
          ]
        };
      }
    });
    app.mount('#app');
  </script>
  <style scoped>
    #app {
      font-family: Arial, sans-serif;
      margin: 0 auto;
      max-width: 1200px;
      padding: 20px;
    }

/* Reset default styles for tables */
    .table {
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      background-color: #fff;
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    }

/* Style for table headers */
    .table thead th {
      text-align: left;
      padding: 15px;
      font-weight: 600;
      background-color: #007bff;
      color: #fff;
      border-bottom: 2px solid #dee2e6;
    }

/* Style for table body */
    .table tbody td {
      text-align: left;
      padding: 10px 15px;
      font-size: 14px;
      border-bottom: 1px solid #dee2e6;
    }

/* Style for table rows */
    .table tbody tr:hover {
      background-color: #f2f2f2;
    }

/* Style for profile images */
    .table tbody td img {
      display: block;
      margin: 0 auto;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      object-fit: cover;
    }

/* Style for name column */
    .table tbody td:nth-child(2) {
      font-weight: bold;
      color: #495057;
    }

/* Style for email column */
    .table tbody td:nth-child(3) {
      color: #6c757d;
    }

/* Style for table responsiveness */
    .table-responsive {
      overflow-x: auto;
    }

/* Style for table title */
    h3 {
      text-align: center;
      margin: 50px 0;
      font-size: 24px;
      font-weight: bold;
      color: #343a40;
    }
  </style>
</body>

</html>