Tutorial CSS: Mengubah Design Table HTML Keren
Hohoho, berjumpa kembali di blog AUTOGOBLOOG , pada kali ini akan dibahas mengenai blogger artinya Tutorial CSS: Mengubah Design Table HTML Keren simak selengkapnya
Renovasi Otak - Table melambangkan element yang paling penting dan paling sering saya gunakan buat menampilkan data misalnya. Selain menampilkan data di bentuk list, saya juga bisa menampilkan data di bentuk table. Data yang ditampilkan di bentuk table sangatlah sederhana dan tidak memiliki warna. Jadi alangkah baiknya table tersebut saya design agar lebih menarik dan enak dipandang.
Masih seputar CSS, kali ini admin bakal membagikan cara melaksanakan 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 saya menggunakan 3 tag yaitu <table>, <thead>, dan <tbody> kalakian ditambah dengan elemen <tr>, <th>, <td> yang mana penjelasannya sebagai berikut
- <table> - Untuk melaksanakan table
- <thead> - Table Head digunakan belahan atas/kepala
- <thbody> - Table Body digunakan belahan isi pada table
- <tr> - Table Row buat melaksanakan baris
- <td> - Table Data buat menunjukkan sebuah cell
- <th> - Table Header buat menunjukan cell induk pada table
Table tersebut tentunya masih terlihat biasa dan tidak menarik. Maka dari itu saya krusial menambahkan CSS agar table terlihat lebih anggun 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 bulat #e0e0e0;
border-bottom: 1px bulat #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 bulat #ffffff;
border-bottom: 1px bulat #e0e0e0;
border-left: 1px bulat #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 hajat blog, letakkan CSS tersebut tepat DIATAS ]]></b:skin> atau </style>
Lalu Hasilnya bakal seperti ini
DONASI VIA PAYPAL Bantu berikan donasi jika artikel bermanfaat. Donasi bakal digunakan seindah mungkin buat kepentingan renovasi-otak.blogspot.com. Terimakasih.
Sekian pembahasan mengenai Tutorial CSS: Mengubah Design Table HTML Keren semoga info ini berfaedah terima kasih
Artikel ini diposting pada kategori
Belum ada Komentar untuk "Tutorial CSS: Mengubah Design Table HTML Keren"
Posting Komentar