Cara Membuat Tabel Responsive Seperti Jalantikus

Untuk Membuat Tabel Responsive di blog caranya mudah sekali, tapi kali ini membahas tabel seperti jalantikus yang salah satu situs teknologi terkenal di indonesia.

Tabel juga berfungsi untuk memberikan penjelasan mendetail terkait menu menu, seperti menu harga, dan menu lainnya, mungkin sobat lebih paham dan lebih tau fungsi baik dari tabel ini. Tapi kali ini tidak membahas tabel biasam tapi luar biasa karena menggunakan tabel Seperti jalantiksu+_=

Dapat kodenya darimana ? Ya bisa lah dikit dikit ngambil gpp kan hehe, penasaran kan ? Yuk sobat kita lihat bagaimana cara buatnya

Cara Membuat Tabel Responsive Seperti Jalantikus

1. Login ke Blogger

2. Lihat tab Tema > Edit HTML

3. Letakkan kode CSS berikut ini, tepat diatas kode ]]></:skin> atau </style>



table {
    width: 100%;
    margin-bottom: 12px;
}thead {
    height: 65px;
    border: none;
    border-collapse: collapse;
    border-radius: 4px 4px 0 0;
    width: 100%;
    background: #ef6a65;
    background: -webkit-linear-gradient(right,#f7a784,#ef6a65);
    background: -o-linear-gradient(left,#f7a784,#ef6a65);
    background: -o-linear-gradient(right,#f7a784,#ef6a65);
    background: -webkit-gradient(linear,right top,left top,from(#f7a784),to(#ef6a65));
    background: linear-gradient(270deg,#f7a784,#ef6a65);
    font-size: 14px;
    color: #fff;
}tr th:first-child {
    border-radius: 5px 0 0 0;
}
tr th {
    padding: 15px 20px;
}tr th {
    padding: 15px 20px;
  border-left:1px solid #ebebeb;
    font-family: 'Roboto Slab', serif;
}tr:nth-child(2n) {
    background-color: #fbf9f9;
}
tr:nth-child(2n) {
    background-color: #fbf9f9;
}
tr td {
    padding: 20px;
    font-size: 15px;
    line-height: 24px;
    color: #6d6d6d;
    border-left: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
      font-family: 'Roboto Slab', serif;

}

JIka sudah, Masukkan HTML dibawah ini pada tiap postingan jika ingin Menampilkan Table
Kode Pembungkus HTML, Masukkan di Mode HTML bukan Compose



<table cellspacing="0"><thead><tr><th>Spesifikasi</th>
 <th>Huawei Nova 2 Lite</th>
 <th>Oppo A3s</th>
</tr></thead><tbody><tr><td>Dimensi</td>
 <td>158.3 x 76.7 x 7.8 mm<br>155 gram</td>
 <td>156.2 x 75.6 x 8.2 mm<br>168 gram</td>
</tr><tr><td>Layar</td>
 <td>5.99 inci IPS LCD capacitive touchscreeb<br>720 x 1440 piksel</td>
 <td>6.2 inci IPS LCD capacitive touchscreen<br>720 x 1520 piksel</td>
</tr><tr><td>Chipset</td>
 <td>Qualcomm MSM8937 Snapdragon 430 octa-core 1.4GHz<br>GPU Adreno 505</td>
 <td>Qualcomm SDM450 Snapdragon 450 octa-core 1.8GHz<br>GPU Adreno 506</td>
</tr><tr><td>Sistem Operasi</td>
 <td>Android 8.0 Oreo dengan EMUI 8.0</td>
 <td>Android 8.1 Oreo dengan ColorOS 5.1</td>
</tr><tr><td>Memori</td>
 <td>RAM 3GB, Memori Internal 32GB<br>MicroSD up to 256GB</td>
 <td>RAM 32GB, Memori Internal 32GB<br>MicroSD up to 256GB</td>
</tr><tr><td>Kamera</td>
 <td>Kamera Belakang Dual 13MP f/2.2 PDAF + 2MP depth sensor<br>Kamera Depan 8MP f/2.0</td>
 <td>Kamera Belakang Dual 13MP f/2.2 PDAF + 2MP f/2.4 depth sensor<br>Kamera Depan 8MP f/2.2</td>
</tr><tr><td>Jaringan</td>
 <td>GSM/HSPA/LTE</td>
 <td>GSM/HSPA/LTE</td>
</tr><tr><td>Baterai</td>
 <td>3000 mAh</td>
 <td>4230 mAh</td>
</tr><tr><td>Warna</td>
 <td>Black, Gold, Blue</td>
 <td>Red, Dark Purple</td>
</tr></tbody></table>

jika ingin terlihat Mirip dengan Aslinya, Maka harus menyesuaikan Font seperti jalantikus, silahkan taruh kode dibawah ini, tepat diatas kode </head>



<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet'/>

LIHAT DEMO

Sekian Artikel dari enterblogger, Semoga bisa diterapkan dan bermanfaat, jika ada yg dipertanyakan mengenai artikel ini, silahkan tinggalkan di kolom komentar.
Sampai jumpa di internet+_=