Hallo, selamat malam, sesi kali ini akan membahas tentang bloggingpro job board Tutorial CSS: Mengubah Design Table HTML Keren simak selengkapnya
Renovasi Otak - Table merupakan element yang paling penting dan paling sering kita gunakan buat menampilkan data misalnya. Selain menampilkan data dalam bangun list, kita juga bisa menampilkan data dalam bangun table. Data yang ditampilkan dalam bangun table sangatlah sederhana dan tak memiliki warna. Jadi alangkah baiknya table tersebut kita design agar lebih menarik dan enak dipandang.
Masih seputar CSS, kali ini admin akan memberikan cara melahirkan design table dengan css.
Langsung saja simak penjelasan bersama-sama 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 melahirkan table
- <thead> - Table Head digunakan bagian atas/kepala
- <thbody> - Table Body digunakan bagian isi ala table
- <tr> - Table Row buat melahirkan baris
- <td> - Table Data buat menunjukkan sebuah cell
- <th> - Table Header buat menunjukan cell induk ala table
Table tersebut tentunya masih terlihat biasa dan tak 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 buat keperluan blog, letakkan CSS tersebut tepat DIATAS ]]></b:skin> atau </style>
Lalu Hasilnya akan bagaikan ini
DONASI VIA PAYPAL Bantu berikan donasi jika artikel bermanfaat. Donasi akan digunakan sebaik mungkin buat kepentingan renovasi-otak.blogspot.com. Terimakasih.
begitulah pembahasan tentang Tutorial CSS: Mengubah Design Table HTML Keren semoga tulisan ini berfaedah terima kasih
Artikel ini diposting pada tag bloggingpro job board, blogger login, blogger template free, , tanggal 27-09-2019, di kutip dari https://renovasi-otak.blogspot.com/2019/07/cara-design-table-dengan-css.html
Komentar
Posting Komentar