Renovasi Otak – Tabel 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 Tabel. Data yang ditampilkan dalam bentuk Tabel sangatlah sederhana dan tidak memiliki warna. Jadi alangkah baiknya Tabel tersebut kita design agar lebih menarik dan responsif.
Baca Juga: Cara Membuat Tombol Download dengan CSS
Masih seputar CSS, kali ini admin akan membagikan cara membuat Tabel di blogger dengan css.
Langsung saja simak penjelasan berikut ini.
Cara Membuat Tabel Responsive di Blogger
Perhatikan contoh penulisan Tabel dibawah ini
index.html
<!DOCTYPE html>
<html>
<head>
<title>Renovasi Otak | Cara Membuat Design Tabel dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Belajar Membuat Design Tabel 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
Tabel tersebut tentunya masih terlihat biasa, tidak menarik dan responsif. Maka dari itu kita perlu menambahkan CSS agar Tabel 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
