Saturday, January 4, 2020

Cara Membuat Tabel CSS Sederhana Type 2

Cara Membuat Tabel CSS Sederhana Type 2

HobbyTekno - Pada postingan kali ini kita akan membuat Tabel Mewah hanya bermodalkan CSS Saja. Walaupun sederhana, tabel ini saya buat sedikit mewah dengan efek hover dan warna yang flat. Penasaran cara buatnya? Berikut Cara Membuat Tabel Sederhana Type 2.

Langkah-Langkah Membuat Tabel CSS Sederhana Type 2


1. Salin kode HTML dibawah ini lalu simpan sebagai file .html
<!DOCTYPE html>
<html>
<head>
<title>Table Type 2 | HobbyTekno</title>
        <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center><h1>Table Type 2 | HobbyTekno</h1>
<table cellspacing='0'>
<thead>
<tr>
<th>Nama Anggota</th>
<th>Alamat</th>
<th>Pekerjaan</th>
<th>Usia</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ilham</td>
<td>Jakarta Selatan</td>
<td>Web Designer</td>
<td>18</td>
</tr>
<tr>
<td>Fandi</td>
<td>Bandung</td>
<td>Web Developer</td>
<td>22</td>
</tr>
<tr>
<td>Budi</td>
<td>Bekasi</td>
<td>Web Programmer</td>
<td>23</td>
</tr>
<tr>
<td>Akbar</td>
<td>Bali</td>
<td>Teknisi</td>
<td>17</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
2. Setelah selesai, Buat file baru lalu salin kode dibawah ini, Simpan file sebagai style.css
h1{
  font-family: sans-serif;
}
table {
  font-family: Arial, Helvetica, sans-serif;
  color: #666;
  text-shadow: 1px 1px 0px #fff;
  background: #eaebec;
  border: #ccc 1px solid;
}
table th {
  padding: 15px 35px;
  border-left:1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  background: #ededed;
}
table th:first-child{
  border-left:none;
}
table tr {
  text-align: center;
  padding-left: 20px;
}
table td:first-child {
  text-align: left;
  padding-left: 20px;
  border-left: 0;
}
table td {
  padding: 15px 35px;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  background: #fafafa;
  background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
  background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
table tr:last-child td {
  border-bottom: 0;
}
table tr:last-child td:first-child {
  -moz-border-radius-bottomleft: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
table tr:last-child td:last-child {
  -moz-border-radius-bottomright: 3px;
  -webkit-border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
table tr:hover td {
  background: #f2f2f2;
  background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
  background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);

Gimana, Mudah kan? Tabel ini dapat anda kembangkan lagi sesuai keinginan anda. selamat mencoba.

Sekian Cara Membuat Tabel CSS Sederhana Type 2, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar

Komentar


EmoticonEmoticon