Cara Membuat Tabel Responsive dan Mobile Friendly

TUTORIAL WEBSITE – Tabel adalah salah satu elemen HTML yang sering digunakan untuk menampilkan data atau informasi dalam bentuk terstruktur. Namun, tabel juga merupakan salah satu elemen yang sulit untuk disesuaikan dengan ukuran layar yang berbeda-beda, terutama pada perangkat seluler. Jika tabel terlalu lebar atau memiliki banyak kolom, maka tabel tersebut akan terpotong atau terlihat terlalu kecil pada layar yang sempit.Untuk mengatasi masalah ini, kita perlu membuat tabel yang responsive dan mobile friendly. Tabel yang responsive dan mobile friendly adalah tabel yang dapat menyesuaikan diri dengan lebar layar dan memberikan pengalaman pengguna yang baik. Ada beberapa cara untuk membuat tabel yang responsive dan mobile friendly, di antaranya adalah:

1. Mengatur Lebar Tabel Menjadi 100%

Cara termudah untuk membuat tabel yang responsive adalah dengan mengatur lebar tabel menjadi 100%. Dengan cara ini, tabel akan meregang secara horizontal sesuai dengan lebar kontainer. Namun, cara ini memiliki kelemahan, yaitu pada orientasi potret dari perangkat seluler, tabel akan terlihat terlalu sempit dan tidak nyaman untuk dibaca.

Contoh kode HTML dan CSS untuk membuat tabel dengan lebar 100% adalah sebagai berikut:

<style>
  .full {
    width: 100%;
  }
</style>

<table class="full">
  <tr>
    <th>Kolom 1</th>
    <th>Kolom 2</th>
    <th>Kolom 3</th>
  </tr>
  <tr>
    <td>Kolom 1</td>
    <td>Kolom 2</td>
    <td>Kolom 3</td>
  </tr>
</table>

2. Membungkus Tabel dalam Kontainer dengan Overflow Auto

Untuk mencegah tabel terpotong atau terlihat terlalu kecil pada layar yang sempit, kita bisa membungkus tabel dalam sebuah kontainer <div> dengan properti CSS overflow: auto. Dengan cara ini, kita bisa menggulirkan tabel secara horizontal jika tabel melebihi lebar layar. Namun, cara ini juga memiliki kekurangan, yaitu adanya scrollbar yang mungkin mengganggu tampilan dan interaksi pengguna.

Contoh kode HTML dan CSS untuk membuat tabel yang dibungkus dalam kontainer dengan overflow auto adalah sebagai berikut:

<style>
  .twrap {
    width: 100%;
    overflow-x: auto;
  }
</style>

<div class="twrap">
  <table>
    <tr>
      <th>Kolom 1</th>
      <th>Kolom 2</th>
      <th>Kolom 3</th>
    </tr>
    <tr>
      <td>Kolom 1</td>
      <td>Kolom 2</td>
      <td>Kolom 3</td>
    </tr>
  </table>
</div>

3. Menyembunyikan Beberapa Kolom pada Ukuran Layar Kecil

Jika kita ingin menghemat ruang layar dan hanya menampilkan kolom-kolom penting pada ukuran layar kecil, kita bisa menggunakan media query CSS untuk menyembunyikan beberapa kolom pada tabel. Dengan cara ini, kita bisa mengurangi jumlah informasi yang ditampilkan pada layar yang sempit dan meningkatkan keterbacaan tabel. Namun, cara ini juga memiliki kelemahan, yaitu kita bisa kehilangan informasi yang mungkin berguna atau relevan bagi pengguna.

Contoh kode HTML dan CSS untuk membuat tabel yang menyembunyikan kolom kedua pada ukuran layar maksimal 768px adalah sebagai berikut:

<style>
  .hidder {
    width: 100%;
  }
  @media screen and (max-width: 768px) {
    .hidder th:nth-child(2),
    .hidder td:nth-child(2) {
      display: none;
    }
  }
</style>

<table class="hidder">
  <tr>
    <th>Kolom 1</th>
    <th>Kolom 2</th>
    <th>Kolom 3</th>
  </tr>
  <tr>
    <td>Kolom 1</td>
    <td>Kolom 2</td>
    <td>Kolom 3</td>
  </tr>
</table>

4. Membungkus Sel-sel dalam Baris Baru pada Ukuran Layar Kecil

Jika kita ingin menampilkan semua informasi pada tabel tanpa harus menggulirkan atau menyembunyikan kolom, kita bisa menggunakan teknik CSS untuk membungkus sel-sel dalam baris baru pada ukuran layar kecil. Dengan cara ini, kita bisa membuat tabel menjadi lebih vertikal dan mudah dibaca pada layar yang sempit. Namun, cara ini juga memiliki kelemahan, yaitu kita bisa membuat tabel menjadi terlalu panjang dan memakan banyak ruang layar.

Contoh kode HTML dan CSS untuk membuat tabel yang membungkus sel-sel dalam baris baru pada ukuran layar maksimal 600px adalah sebagai berikut:

<style>
  @media screen and (max-width: 600px) {
    table thead {
      display: none;
    }
    table td {
      display: flex;
    }
    table td::before {
      content: attr(label);
      font-weight: bold;
      width: 120px;
      min-width: 120px;
    }
  }
</style>

<table>
  <tr>
    <th>Kolom 1</th>
    <th>Kolom 2</th>
    <th>Kolom 3</th>
  </tr>
  <tr>
    <td label="Kolom 1">Kolom 1</td>
    <td label="Kolom 2">Kolom 2</td>
    <td label="Kolom 3">Kolom 3</td>
  </tr>
</table>

Contoh tampilan tabel yang membungkus sel-sel dalam baris baru pada layar lebar dan sempit adalah sebagai berikut:

5. Menggunakan Kontainer Grid sebagai Tabel

Jika kita ingin membuat tabel yang lebih fleksibel dan kreatif, kita bisa menggunakan kontainer grid CSS sebagai tabel. Dengan cara ini, kita bisa mengatur posisi, ukuran, dan tata letak sel-sel dengan lebih bebas dan mudah. Kita juga bisa menggunakan media query CSS untuk mengubah tampilan tabel sesuai dengan ukuran layar.

Contoh kode HTML dan CSS untuk membuat tabel dengan kontainer grid adalah sebagai berikut: