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.

9
Membuat Tabel Responsif di Blog Tampilan Unik
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.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • X (Twitter)
  • Pinterest
  • LinkedIn

Artikel Terkait

9 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.
  • PasarJagad
    22 November, 2023
    Profil: https://www.blogger.com/profile/04756738921666405255
    ini sudah include di igniplex V3?. atau harus di tambahkan?
  • Seirotan
    27 Oktober, 2023
    Profil: https://www.blogger.com/profile/07191320326516215671
    kalau saya pakai html dari wordtohtml apakah bisa kak ? contohnya di blog saya ini www.seirotan.com
  • Muslim Kreatif
    22 Oktober, 2023
    Profil: https://www.blogger.com/profile/14431702447913316364
    maaf kak, kok di tampilan hp gk bentuk table ya?
  • 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
  • Mas Edy
    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?