15 Variasi Tabel UX Friendly Beserta Source Code

<table class="tbl-striped">
<style>
.tbl-striped {
  width:100%;
  border-collapse: collapse;
}
.tbl-striped th, .tbl-striped td {
  border:1px solid #ddd;
  padding:12px;
}
.tbl-striped tr:nth-child(even) {
  background:#f9f9f9;
}
.tbl-striped th {
  background:#222;
  color:#fff;
}
</style>
<tr><th>Nama</th><th>Umur</th><th>Kota</th></tr>
<tr><td>Ana</td><td>20</td><td>Jakarta</td></tr>
<tr><td>Budi</td><td>22</td><td>Bandung</td></tr>
<tr><td>Cici</td><td>19</td><td>Surabaya</td></tr>
</table>

<table class="tbl-hover-glow">
<style>
.tbl-hover-glow {
  width:100%;
  border-collapse: collapse;
}
.tbl-hover-glow th, .tbl-hover-glow td {
  border:1px solid #ddd;
  padding:10px;
  transition:0.3s;
}
.tbl-hover-glow tr:hover {
  background:#ffe57f;
  box-shadow:0 0 10px #ffd740;
}
.tbl-hover-glow th {
  background:#111;
  color:white;
}
</style>
<tr><th>Produk</th><th>Harga</th><th>Stok</th></tr>
<tr><td>Laptop</td><td>8jt</td><td>Ready</td></tr>
<tr><td>HP</td><td>3jt</td><td>Sold Out</td></tr>
<tr><td>Tablet</td><td>2jt</td><td>Ready</td></tr>
</table>