Cara Membuat Tabel Responsive di Blogger Dengan Tampilan Unik

Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial cara membuat table yang sangat responsive dan memiliki tampilan yang sangat unik di blogger dengan mudah.

Tabel yang saya bagikan tidak monoton atau itu - itu saja, tabel ini sangat atraktif karena menggunakan tag orisinil semantik table yang artinya saat penulisan sama seperti membuat table HTML biasa namun harus menambahkan atribut saat penulisan kodenya.

Untuk membuat tabel yang responsive ini tidak hanya berlaku pada blogspot saja namun bisa juga di pasang di wordpress dan lain sebagainya.

Pada tampilan dekstop akan terlihat normal dan sangat cantik tapi ketika di akses pada mobile maka tampilan akan berubah lebih kecil dan mengelompokan disi 1 per 1 sesuai baris yang dimiliki.

Itulah kelebihan tabel yang saya bagikan kali ini sangat responsive sekali dan mobile friendly. Kelebihan utama dari tabel ini hanya menggunakan CSS saja dan sangat ringan sekali.

Untuk demonya silahkan klik tombol demo yang ada di bawah ini:

Demo

---

Cara Membuat Tabel Responsive di Blogger Dengan Tampilan Unik

Menambahkan kode CSS

• Silahkan buka blog kalian lalu pilih tema dan edit html Salin kode di bawah ini dan letakan di atas kode ]]></b:skin>

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 2rem 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: middle;
}
tr:nth-child(even) td {
  background-color: rgba(0, 0, 0, .075); /* striped background color */
}
@media screen and (max-width: 640px) {
  thead, th {
    display: none;
  }
  tr, td {
    display: block;
  }
  tr {
    border: 1px solid rgba(0, 0 , 0 ,.15);
    margin-bottom: 2rem;
  }
  tr:last-child {
    margin-bottom: 0;
  }
  tr:nth-child(even) td {
    background-color: transparent;
  }
  td {
    clear: both;
    text-align: right;
  }
  td:before {
    content: attr(data-label)': ';
    float: left;
    font-weight: bold;
    margin-right: 1rem;
  }
}

Membuat Table

• Untuk membuat table silahkan pilih mode HTML dan letakan kode di bawah ini ke dalam mode HTML

<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 data-label="Nama">Rain</td>
      <td data-label="Email">rain@email.com</td>
      <td data-label="Domisili">Sukabumi</td>
      <td data-label="Nilai">90</td>
      <td data-label="Langganan">Tidak</td>
    </tr>
    <tr>
      <td data-label="Nama">Yanfei</td>
      <td data-label="Email">yanfei@email.com</td>
      <td data-label="Domisili">Liyue</td>
      <td data-label="Nilai">100</td>
      <td data-label="Langganan">Ya</td>
    </tr>
    <tr>
      <td data-label="Nama">Hayley Williams</td>
      <td data-label="Email">hayley@email.com</td>
      <td data-label="Domisili">Jakarta</td>
      <td data-label="Nilai">97</td>
      <td data-label="Langganan">Ya</td>
    </tr>
    <tr>
      <td data-label="Nama">Natasha Romanoff</td>
      <td data-label="Email">nat@email.com</td>
      <td data-label="Domisili">Cianjur</td>
      <td data-label="Nilai">100</td>
      <td data-label="Langganan">Tidak</td>
    </tr>
    <tr>
      <td data-label="Nama">Fulan</td>
      <td data-label="Email">fulan@email.com</td>
      <td data-label="Domisili">Bandung</td>
      <td data-label="Nilai">60</td>
      <td data-label="Langganan">Tidak</td>
    </tr>
  </tbody>
</table>

Silahkan rubah pada bagian teks sesuai dengan kubutuhan kalian.

Catatan
di setiap kode <td> terdapat attribut baru yang di tambahkan data-label, isi dari data-label harus sama dengan judul table

---

Pada contoh di atas yang menggunakan tag <th> secara berututan adalah Nama, Email, Domisili, Nilai, dan Langganan. Seperti kode di bawah ini

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

Maka untuk menambahkan atribut data-label isinya harus berurutan sesuai dengan judul seperti kode di bawah ini

<td data-label="Nama">Rain</td>
<td data-label="Email">rain@email.com</td>
<td data-label="Domisili">Sukabumi</td>
<td data-label="Nilai">90</td>
<td data-label="Langganan">Tidak</td>

Jika tutorial di atas sudah benar maka tampilannya akan seperti gambar di bawah ini:

Sekian tutorial tentang Cara Membuat Tabel Responsive di Blogger Dengan Tampilan Unik semoga artikel saya gampang di mengerti. Nantikan tutorial tentang blogger selanjutnya hanya di telatngoding.com. Semoga bermanfaat dan terimakasih sudah berkunjung.

Baca juga :

Go to Link