Membuat Tabel Responsif di Blog Tampilan Unik

Cara membuat table HTML responsive di blog hanya dengan CSS dengan memunculkan label (judul) pada setiap baris pada saat dibuka di versi mobile.

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

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">rain@email.com</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

6 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • kukoin
    27 Agustus, 2023
    Profil: https://www.blogger.com/profile/04758359586964183200
    Ka kenapa Judul aku tidak berubah yah ketika format Vertikal, tp kalau horisontal berubah
  • Blognoler
    24 Desember, 2022
    Profil: https://www.blogger.com/profile/17361664189112470871
    Mbak Igniel kalau misal saya mau buat kolom pertama itu headingnya 'No' trus bawahnya angka 1 dan seterusnya, saya mau buat kolom pertama tidak terlalu lebar karena isinya hanya angka itu bagaimana mba?
    • Igniel
      25 Desember, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Di heading kasih width aja. Jadi gini.
      <th scope="col" width="25px">No</th>
      Nanti lebar kebawahnya juga ikut headingnya.
  • Muhammad Herdy Iskandar
    25 Januari, 2022
    Profil: https://www.blogger.com/profile/05264892071045885882
    Input css nya ke bagian yang mana ya gan?