Belajar CSS - Menghias Table Dengan CSS
Hallo teman teman , Alhamdulillah kita bertemu lagi di kesempatan ini. Pada waktu yang sebelumnya kita sudah membahas tentang Bagaimana cara Menghias Link dengan CSS, jika teman teman ingin melihat lagi materi nya silahkan untuk mengunjungi Halaman Sebelumnya.
Oke teman teman , pada kesempatan ini, kita akan membahas tentang bagaimana cara Menghias Table dengan CSS.
BELAJAR CSS | CARA MENGHIAS LINK DENGAN CSSdan jika ingin melihat kategori lengkap dari Kategori CSS maka masuk disini
TUTORIAL BELAJAR CSS DASAR
 |
| Menghias Table |
Oke teman teman , pada kesempatan ini, kita akan membahas tentang bagaimana cara Menghias Table dengan CSS.
Oiyaa sebelumnya pada kategori HTML, sudah ada materi tentang Table, disini link nya
BELAJAR HTML | CARA MUDAH MEMBUAT TABLE & LIST DI HTML
Oke langsung saja kita masuk kemateri , disini kita hanya akan membahas mengenai CSS dan Sekilas tentang Table.
Di bagian ini , saya membuat contoh menggunakan data table yang berisi dari data artikel di blog Awonapa JR ini.
/*index.html*/
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<div id= "div1">
<h1>Data Artikel Awonapa JR 07/04/2019</h1>
</div>
<table>
<thead>
<th>Kategori</th>
<th>Jumlah</th>
<th>Bulan</th>
<th>Author</th>
<th>Link Lengkap</th>
</thead>
<tbody>
<tr class="textcenter">
<td>Blogging</td>
<td>8 Artikel</td>
<td>June / July</td>
<td>Wahyup</td>
<td>
<a href="https://www.awonapa.com/search/label/BLOGGING"><button type="submit" class="button"><b> Blogging </b></button></a>
</td>
</tr>
<tr class="textcenter">
<td>CSS</td>
<td>6 Artikel</td>
<td>March / April</td>
<td>Wahyup</td>
<td>
<a href="https://www.awonapa.com/search/label/CSS"><button type="submit" class="button"><b> CSS </b></button></a>
</td>
</tr>
<tr class="textcenter">
<td>Desain Web</td>
<td>6 Artikel</td>
<td>August</td>
<td>Unknown</td>
<td>
<a href="https://www.awonapa.com/search/label/DESAIN%20WEB"><button type="submit" class="button"><b> Desain Web </b></button></a>
</td>
</tr>
<tr class="textcenter">
<td>HTML</td>
<td>16 Artikel</td>
<td>Sept / October / March</td>
<td>Wahyup</td>
<td>
<a href="https://www.awonapa.com/search/label/HTML"><button type="submit" class="button"><b> HTML </b></button></a>
</td>
</tr>
<tr class="textcenter">
<td>Kehidupan</td>
<td>4 Artikel</td>
<td>June </td>
<td>Wahyup</td>
<td>
<a href="https://www.awonapa.com/search/label/BLOGGING"><button type="submit" class="button"><b> Lifestyle </b></button></a>
</td>
</tr>
</tbody>
</table>
/*style.css*/
.button {
padding: 5px;
width: 80%;
}
.button:hover {
background: blue;
color: white;
cursor: pointer;
}
table {
width: 50%;
height: 150px;
background-color: #13CE7E;
margin: auto;
}
th {
background-color: #F25E09;
height: 30px;
}
#div1 {
margin-top: 50px;
color: #0846FA;
text-align: center;
}
.textcenter {
text-align: center;
}
Oke kita akan menjelaskan sekilas CSS diatas.
- Pada CSS diatas kita menggunakan button, yang diberi CSS Hover. dan akan menghasilkan background biru jika cursor kita berada diatas button tersebut
- Untuk penggunaan CSS table dan th, kita menggunakan property dan nilai width, height, background, dan margin.
Baik dari hasil HTML, dan CSS diatas adalah seperti ini
Oke sekian cara menghias table. terimakasih sudah berkunjung teman.
Salam Semangat!
Posting Komentar untuk "Belajar CSS - Menghias Table Dengan CSS"