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.
BELAJAR CSS | CARA MENGHIAS LINK DENGAN CSS
dan jika ingin melihat kategori lengkap dari Kategori CSS maka masuk disini
TUTORIAL BELAJAR CSS DASAR
css table
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
See the Pen
Table
by Wahyu Pambudi (@wahyup)
on CodePen.


Oke sekian cara menghias table. terimakasih sudah berkunjung teman.
Salam Semangat!

Tambah Skill Kamu, dengan Mengisi Email untuk Update!!

Belum ada Komentar untuk "Belajar CSS - Menghias Table Dengan CSS"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel