<title>My Example</title>
border-collapse: collapse;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
background-color: #2c3e50;
border-bottom: 1px solid #dddddd;
.table-zebra tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
.table-zebra tbody tr:last-of-type {
border-bottom: 2px solid #2c3e50;
.table-zebra tbody tr:hover {
background-color: #e2e8f0;
<div class="table-container">
<table class="table-zebra">
<caption>List of Active Users as of Today</caption>
<th scope="col">User ID</th>
<th scope="col">Full Name</th>
<th scope="col">Email Address</th>
<th scope="col">Role</th>
<th scope="col">Last Login</th>
<td>adent@example.com</td>
<td>fprefect@example.com</td>
<td>Zaphod Beeblebrox</td>
<td>zbeeblebrox@example.com</td>
<td>tricia@example.com</td>
<td>paranoid.android@example.com</td>