Tutorial CSS: Mengubah Design Table HTML Keren

Membuat Desain Table HTML Keren

Renovasi Otak - Table merupakan element yang paling penting dan paling sering kita gunakan untuk menampilkan data misalnya. Selain menampilkan data dalam bentuk list, kita juga bisa menampilkan data dalam bentuk table. Data yang ditampilkan dalam bentuk table sangatlah sederhana dan tidak memiliki warna. Jadi alangkah baiknya table tersebut kita design agar lebih menarik dan enak dipandang.
Masih seputar CSS, kali ini admin akan membagikan cara membuat design table dengan css.
Langsung saja simak penjelasan berikut ini.

Cara Membuat Design Table dengan CSS

Perhatikan contoh penulisan table dibawah ini

index.html
<!DOCTYPE html>
<html>
<head>
 <title>Renovasi Otak | Cara Membuat Design Table dengan CSS</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Belajar Membuat Design Table dengan CSS - Renovasi Otak</h1>
 <table cellspacing='0'>
  <thead>
      <tr>
         <th>Nama</th>
         <th>Alamat</th>
         <th>Pekerjaan</th>
         <th>Status</th>
      </tr>
  </thead>
  <tbody>
      <tr>
         <td>Budi Hermawan</td>
         <td>Kediri</td>
         <td>Teknisi</td>
         <td>Menikah</td>
      </tr>
      <tr>
         <td>Hilmi Suherman</td>
         <td>Surabaya</td>
         <td>Designer</td>
         <td>Belum Menikah</td>
      </tr>
      <tr>
         <td>Andri Suherman</td>
         <td>Malang</td>
         <td>Admin Operator</td>
         <td>Belum Menikah</td>
      </tr>
  </tbody>
 </table>
</body>
</html>

Pada contoh diatas kita menggunakan 3 tag yaitu <table>, <thead>, dan <tbody> lalu ditambah dengan elemen <tr>, <th>, <td> yang mana penjelasannya sebagai berikut

  • <table> - Untuk membuat table
  • <thead> - Table Head digunakan bagian atas/kepala
  • <thbody> - Table Body digunakan bagian isi pada table
  • <tr> - Table Row untuk membuat baris
  • <td> - Table Data untuk menunjukkan sebuah cell
  • <th> - Table Header untuk menunjukan cell induk pada table

Table tersebut tentunya masih terlihat biasa dan tidak menarik. Maka dari itu kita perlu menambahkan CSS agar table terlihat lebih elegan dan bergaya.

style.css
table {
  font-family: Arial, Helvetica, sans-serif;
  color: #666;
  background: #eaebec;
  border: #ccc 1px solid;
}

table th {
  padding: 10px 35px;
  border-left:1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  background: #737373;
  text-align:center;
  color:white;
}

table th:first-child{  
  border-left:none;  
}

table tr {
  text-align: left;
  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);
}

CATATAN: Jika untuk keperluan blog, letakkan CSS  tersebut tepat DIATAS ]]></b:skin> atau </style>
Lalu Hasilnya akan seperti ini
Membuat Desain Table HTML Keren
Nando
Anda di sini hanya untuk persinggahan yang singkat. Jangan terburu, jangan khawatir. Yakinlah bahwa Anda menghirup wangi bunga sepanjang perjalanan.

Luangkan sedikit waktu Anda untuk membagikan "Tutorial CSS: Mengubah Design Table HTML Keren" kepada teman-teman Anda. Hanya dengan menekan Tombol Sosial Media di bawah ini:

Related Posts

Berlangganan Gratis!

Daftarkan email anda untuk mendapatkan pemberitahuan setiap update artikel terbaru, dan jangan lupa untuk IKUTI Blog kami