Tantangan Menampilkan Data Tabel di Perangkat Mobile

Menampilkan data angka besar, seperti daftar inventaris sekolah atau detail dana BOSP, seringkali menjadi masalah di tampilan HP (layar kecil). Dalam kebanyakan kasus, tabel akan terpotong atau membuat pengguna menggeser layar secara horizontal. Google sangat tidak menyukai desain yang tidak responsif.

Struktur HTML Dasar

Langkah pertama adalah membuat struktur tabel yang bersih. Kami akan memberi Anda class tertentu yang dapat diatur menggunakan CSS.

<div class="table-container">
  <table class="styled-table">
    <thead>
      <tr>
        <th>Komponen Penggunaan</th>
        <th>Persentase</th>
        <th>Keterangan</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Gaji Honorer</td>
        <td>Maks 50%</td>
        <td>Sesuai Juknis 2025</td>
      </tr>
      <tr>
        <td>Pemeliharaan Sarpras</td>
        <td>Sesuai Kebutuhan</td>
        <td>Skala Prioritas</td>
      </tr>
    </tbody>
  </table>
</div>

Sentuhan CSS agar Responsif

Kami menambahkan CSS berikut agar tabel tidak rusak di HP. Metode ini menggunakan overflow-x: auto, yang memungkinkan penggeseran tabel di dalam wadahnya tanpa mengganggu layout website utama.

.table-container {
  overflow-x: auto;
  margin: 20px 0;
}
.styled-table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
  min-width: 400px;
}
.styled-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
}
.styled-table th, .styled-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #dddddd;
}

Kesimpulan

Tabel Anda akan tampil menarik di desktop dan berfungsi di perangkat seluler dengan kode di atas. Ini adalah teknik SEO teknis terbaik yang disukai pembaca dan mesin pencari.