Membuat Tabel Responsif di Blog Tampilan Unik

Sesuai janji, saya akan kembali membuat salah satu jenis table responsif di blog dengan tampilan yang sedikit atraktif alias nggak monoton. Dia memakai tag orisinil semantik table. Artinya, penulisannya sama saja seperti saat akan membuat table HTML biasa. Tapi memang perlu menambahkan sedikit atribut pada penulisan kodenya. Yuk langsung saja.

Table Responsif Mobile Dengan Label
Setiap baris akan terpisah dan memiliki labelnya sendiri per kolom.

Table Responsive Dengan Label Saat di Mobile

Cara membuat table responsive di Blogger (Blogspot) ini juga bisa dipakai di semua jenis platform blog. Jadi kalau kamu pakai WordPress atau lainnya, tenang saja, bisa dipakai kok.

Pada tampilan desktop, table akan terlihat normal. Namun saat dibuka di perangkat dengan layar lebih kecil, tampilannya akan berubah. Dia mengelompokkan diri satu persatu sesuai dengan jumlah baris yang dimiliki. Jadi table HTML responsive CSS only ini mobile friendly banget.

1. Tambahkan Kode CSS

Tambahkan kode CSS berikut ke dalam tema yang sedang dipakai.

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

2. Buat Table

Saat akan membuat table, pilih mode HTML, bukan Compose. Langsung copy saja kode berikut dan lakukan perubahan pada bagian teks sesuai dengan tulisan yang ingin dimunculkan.

<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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</td>
      <td data-label="Domisili">Bandung</td>
      <td data-label="Nilai">60</td>
      <td data-label="Langganan">Tidak</td>
    </tr>
  </tbody>
</table>

Perhatikan baik-baik bahwa di setiap <td> terdapat atribut baru yang ditambahkan yaitu data-label. Isi dari data-label harus sama dengan judul pada table.

Misalnya begini nih. Pada contoh di atas, judul table yang terdapat pada tag <th> secara berututan adalah Nama, Email, Domisili, Nilai, dan Langganan. Dicontohkan dengan kode berikut:

<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 saat menambahkan atribut data-label pun isinya harus berurutan sesuai dengan judul. Dicontohkan dengan kode berikut:

<td data-label="Nama">Rain</td>
<td data-label="Email">[email protected]</td>
<td data-label="Domisili">Sukabumi</td>
<td data-label="Nilai">90</td>
<td data-label="Langganan">Tidak</td>

Kalau semuanya sudah sesuai, tampilannya kurang lebih seperti ini:

Sekian tutorial untuk membuat table HTML responsif hanya dengan CSS. Semoga penjelasannya mudah dimengerti. Nantikan jenis table responsif lain hanya di blog Igniel.

Artikel Terkait

2 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Muhammad Herdy Iskandar
    25/1/22
    Profil: https://draft.blogger.com/profile/05264892071045885882
    Input css nya ke bagian yang mana ya gan?
    • Igniel
      26/1/22
      Profil: https://draft.blogger.com/profile/09199170379661896200
      di atas ]]></b:skin>