Hi, selamat pagi, sesi kali ini akan membawakan tentang lagu renovasi otak Tutorial CSS: Mengubah Design Table HTML Keren simak selengkapnya
Renovasi Otak - Table merupakan element yang paling penting dengan paling sering kita gunakan buat 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 dengan tidak memiliki warna. Jadi alangkah baiknya table tersebut kita design agar lebih menarik dengan enak dipandang.
Masih sekitar CSS, kali ini admin akan membagikan cara melahirkan 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 memanfaatkan 3 tag yaitu <table>, <thead>, dengan <tbody> arkian 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 pada table
- <tr> - Table Row buat melahirkan baris
- <td> - Table Data buat menunjukkan sebentuk cell
- <th> - Table Header buat menunjukan cell induk pada table
Table tersebut tentunya masih terlihat biasa dengan tidak menarik. Maka dari itu kita krusial menambahkan CSS agar table terlihat lebih elegan dengan 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 keras #e0e0e0;
border-bottom: 1px keras #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 keras #ffffff;
border-bottom: 1px keras #e0e0e0;
border-left: 1px keras #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> alias </style>
Lalu Hasilnya akan bagaikan ini
DONASI VIA PAYPAL Bantu berikan donasi andaikan artikel bermanfaat. Donasi akan digunakan sebaik mungkin buat kepentingan renovasi-otak.blogspot.com. Terimakasih.
Sekian pembahasan mengenai Tutorial CSS: Mengubah Design Table HTML Keren semoga tulisan ini bermanfaat salam
Artikel ini diposting pada kategori lagu renovasi otak, blogging the fifth nail, , tanggal 27-09-2019, di kutip dari https://renovasi-otak.blogspot.com/2019/07/cara-design-table-dengan-css.html
Komentar
Posting Komentar