Free - Cara Menciptakan Tabel Responsive Menyerupai Jalantikus

Untuk Membuat Tabel Responsive di blog caranya gampang sekali, tapi kali ini membahas tabel menyerupai jalantikus yang salah satu situs teknologi populer di indonesia.

Tabel juga berfungsi untuk menunjukkan klarifikasi mendetail terkait sajian menu, menyerupai sajian harga, dan sajian lainnya, mungkin sahabat lebih paham dan lebih tau fungsi baik dari tabel ini. Tapi kali ini tidak membahas tabel biasam tapi luar biasa sebab memakai tabel Seperti jalantiksu+_=

Dapat kodenya darimana ? Ya dapat lah dikit dikit ngambil gpp kan hehe, ingin tau kan ? Yuk sahabat kita lihat bagaimana cara buatnya

Cara Membuat Tabel Responsive Seperti Jalantikus

1. Login ke Blogger

2. Lihat tab Tema > Edit HTML

3. Letakkan aba-aba CSS berikut ini, sempurna diatas aba-aba ]]></: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 jikalau 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 menyerupai jalantikus, silahkan taruh aba-aba dibawah ini, sempurna diatas aba-aba </head>

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

LIHAT DEMO

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