Cara Memasang Tabel Responsif Di Blog

Cara Memasang Tabel Responsif Di Blog dan membuat tabel responsif namun sederhana di blog dan berguna untuk meningkatkan kualitas blog semakin baik lagi.

Cara Memasang Tabel Responsif Di Blog

Membuat table HTML responsif dan sederhana pada blogger atau blogspot dengan mudah, akan saya tuliskan dan rangkumkan sedemikian rupa di artikel pada blog sederhana kali ini, dan bertujuan untuk mempermudah sobat dalam mempelajari dan menerapkan di blognya sobat tanpa mengalami kendala yang dihadapi disaat proses pemasangan kedalam blog.

Nah, sobatku semuanya, kode yang dibutuhkan harus sangat responsif namun efisien bagi blog terutama untuk membuat table responsif memang sederhana dan bisa tentunya dilakukan oleh para sobatku dimanapun berada, maka untuk itu sobat, yuk disimak dan dibaca sampai habis yah, sebagai berikut.

Memasang Table Scroll Di Samping Dan Responsive Pada Blog

Ketika membuat sebuah table responsive diblog scroll diarea samping, bisa sobat pasang bukan hanya ada pada platform blogspot (blogger) saja tentunya, namun juga juga bisa dipakai kesemua platform yang ada saat ini, jadi untuk memasang ke HTML table dibagian <div>, sobat dapat melihat kodenya sebagai berikut.

<div class="table">

  <-- Isi tag HTML table -->

</div>

Jadi sobat bisa lihat seperti kode diatas dengan memberi nama class table yang bertujuan dibuat kebagian <div>, hal ini akan mempermudah dimodifikasi dengan mudah oleh para sobatku semuanya.

Cara Penulisan Lengkap

Supaya para sobatku tidak kebingungan, maka sobat dapat melihat bagaimana contoh dan cara penulisan lengkap, maka sobat dapat mengikuti untuk membuat table responsif hanya dengan HTML dan CSS saja.

Menambahkan Kode CSS

Nah, hal pertama sekali, sobat harus menambahkan kode CSS berikut kebagian tema.

.table {

  margin: 1.5rem 0;

  overflow: auto;

  white-space: nowrap;

}

Jadi bagi para sobatku semuanya, ketika ingin membuat table sederhana menggunakan kode CSS, maka sobat dapat menambahkannya dan bertujuan supaya membuat tampilan begitu sederhana dan efisien, kodenya seperti berikut.

table {

  border-collapse: collapse;

  border-spacing: 0;

  width: 100%;

}

th, td {

  padding: 1rem 1.5rem;

  text-align: left;

}

th {

  background-color: #008c5f; /* header background color */

  color: #fff; /* header text color */

  font-weight: 600;

}

tr {

  padding: 0;

}

td {

  vertical-align: top;

}

tr:nth-child(even) td {

  background-color: rgba(0, 0, 0, .075); /* striped background color */

}

Ketika sudah sobat salin kode seperti diatas, tinggal lakukan simpan atau save dibagian pengaturannya sobatku.

Membuat Table Responsive Di Blog

Nah, disaat berada dibagian dari editor blogger, maka sobat telah memilih kode HTML dan bukan compose ya sobat, akan tetapi perlu sobat perhatikan, jangan melakukan perubahan dibagian, yuk diperhatikan dan disimak baik-baik ya sobatku, sebagai berikut.

<div class="table">

  <table>

    <thead>

      <tr>

        <th scope="col">Nama</th>

        <th scope="col">Email</th>

        <th scope="col">Domisili</th>

        <th scope="col">Nilai</th>

        <th scope="col">Langganan</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>Rain</td>

        <td>rain@email.com</td>

        <td>Sukabumi</td>

        <td>90</td>

        <td>Tidak</td>

      </tr>

      <tr>

        <td>Yanfei</td>

        <td>yanfei@email.com</td>

        <td>Liyue</td>

        <td>100</td>

        <td>Ya</td>

      </tr>

      <tr>

        <td>Hayley Williams</td>

        <td>hayley@email.com</td>

        <td>Jakarta</td>

        <td>97</td>

        <td>Ya</td>

      </tr>

      <tr>

        <td>Natasha Romanoff</td>

        <td>nat@email.com</td>

        <td>Cianjur</td>

        <td>100</td>

        <td>Tidak</td>

      </tr>

      <tr>

        <td>Fulan</td>

        <td>fulan@email.com</td>

        <td>Bandung</td>

        <td>60</td>

        <td>Tidak</td>

      </tr>

    </tbody>

  </table>

</div>

Jangan lupa simpan / save ya sobatku, untuk kode seperti diatas tersebut dan lihat hasilnya di blog.

Oh iya sobat, bagaimana dengan tutorial dan tips diatas ? ternyata cukup mudah bukan, begitulah kira-kira untuk tulisan ide kreatif dan bermanfaat bisa sobat coba diblognya tersebut dengan mudah.

Demikianlah untuk tulisan saya diartikel pada blog sederhana ini yang dapat saya bagikan / share mengenai topik pembahasan saya yaitu Cara Memasang Tabel Responsif Di Blog, semoga dengan tulisan ide kreatif bermanfaat ini bisa dengan mudah nantinya sobat dapat menerapkan di blognya sobat dengan mudah, semoga bisa bermanfaat dan membantu, sekian dan terimakasih.