Cara Membuat Tabel Responsive Seperti Jalantikus

CaraBMembuatBTabelBResponsiveBSepertiBJalantikus - Cara Membuat Tabel Responsive Seperti Jalantikus

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

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

Dapat kodenya drmana ? 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 pd 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 dgn EMUI 8.0</td>
<td>Android 8.1 Oreo dgn 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 dgn 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 dr enterblogger, Semoga bisa diterapkan dan bermanfaat, jika ada yg dipertanyakan mengenai artikel ini, silahkan tinggalkan di kolom komentar.
Sampai jumpa di internet+_=

Loading...

Tags: #Cara #Jalantikus #Membuat #Responsive #Seperti #Tabel

author
Author: 
    Suami Akhirnya Bisa Hamil, Model Cantik Ini Bahagia Menanti Kelahiran Anak Pertama!
    slidegossip.com – Kisah pasangan ini mungkin bisa dibilang unik dan jarang terjadi di
    Kisah Pelacur Cantik yg Menikah Dgn Kyai! Saking Cintanya, Sang Kyai Rela Antar Jemput Istrinya Jual Diri!
    slidegossip.com – Meski byk yg sudah bertaubat, namun profesi pelacur nyatanya tak bisa
    Ternyata Istri yg Kunikahi Sudah Hamil Duluan Karena Berzina Dgn Mantan Pacarnya! Apakah Aku Ikut Berdosa?
    slidegossip.com – Peristiwa yg jarang terjadi ini dialami oleh seorang pria baik hati.
    Walikota Cantik Ini Ternyata Mantan PSK! Jadi PSK Sejak Umur 11 Thn, Kini Dpt Gaji Rp 30 Juta Per-Bulan!
    slidegossip.com – Siapapun berhak utk berubah dan siapapun berhak utk merubah keadaan orang-orang

    Leave a reply "Cara Membuat Tabel Responsive Seperti Jalantikus"