Cara Membuat Tabel Ala Jalan Tikus Memggunakan CSS

Assalamualikum, pada kesempatan kali ini saya akan memberikan tutorial lagi untuk kalian semua, tutorial tersebut adalah Cara Membuat Tabel Ala Jalan Tikus Memggunakan CSS.

Tutorial ini di tulis oleh Enterblogger.com, karena artikelnya menarik saya share di blog ini.

Apa sih kegunaal label sebenarnya bagi blog di artikel?? Sebenarnya kegunaan label tersebut adalah untuk memberi penjelasan atau keterang pada sebuah produk salah satunya template.

Nah apa kalian tertarik dengan artikel kali ini, mari ikuti langkah berikut ini.

Cara Membuat Tabel Ala Jalantikus Menggunakan CSS

Langkah pertama kalian masuk akun blogger kalian pilih meni Tema, kemudian pilih tombol Edit HTML, masukkan CSS di bawah ini tepat di atas kode ]]></b: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;

}

Kemudian Simpan Template.

<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>

Untuk memanggilnya kalian cukup gunakan kode ini saja.

Demikian tutorial Cara Membuat Tabel Ala Jalan Tikus Memggunakan CSS, selamat mencoba.

Mas Dar Hanya Blogger Amatiran, dan mulai ngeblog pada tahun 2017 dengan blog Ivhaa Netwoek setelah itu fakum dan ngeblog lagi di tahun 2022 dengan nama sudarjurnalblogg.web.id

Berbagi :