Cara Membuat Table HTML With CSS Bloger

By Hilman Mr 21 January 2019

Share Tweet Share Email

Hilman MR

Cara Membuat HTML Keren di blogger meski anda tidak pandai Dengan Programer HTML, CSS tidak perlu Khawatir Berikut Cara Membuat Table HTML With CSS

Pertama Masuk Ke https://www.w3schools.com
Search Table HTML Atau Table Css With HTML dan sejenisnya.

Disana akan banyak Pilihan Table yang anda sukai, yang anda butuhkan silahkan pilih sesuai kebutuhan dan modifikasi sendiri. bisa sambil belajar mengganti warna atau letak,

Berikut Sample HTML Tablenya Silahkan Copy Dan Paste Ke Postingan Blog Anda

<table id="customers">
  <tbody>
<tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
<tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
<tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
<tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
<tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
<tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
<tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
<tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
<tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
<tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
<tr>
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
</tbody></table>

Ini Kode CSS nya

<style>
#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>

Selamat Mencoba.