Cara Membuat Tabel dengan HTML

Cara membuat tabel dengan HTML adalah keterampilan dasar yang wajib dikuasai saat membangun halaman web yang rapi, terstruktur, dan mudah dipahami.

Halo teman-teman, semoga kalian dalam keadaan sehat dan semangat belajar coding hari ini. Pada artikel ini kodelyly.com akan membahas langkah-langkah praktis, tips, serta contoh kode yang bisa langsung kalian salin untuk menampilkan data berbentuk tabel di project web kalian.

Cara Membuat Tabel Dengan HTML

Membuat tabel di HTML berarti memanfaatkan elemen semantik seperti table, thead, tbody, dan tfoot untuk mengelompokkan header, isi, dan bagian kaki. Kunci utamanya adalah menyusun baris dengan tr dan sel dengan th atau td. Dengan struktur yang benar, tabel akan lebih mudah distilasi, diakses pembaca layar, dan diberi gaya menggunakan CSS.

Struktur Dasar Tabel HTML

Contoh struktur minimal berikut sudah memuat caption, header, isi, dan footer agar konten data tersaji rapih dan informatif.

<table>
  <caption>Daftar Produk</caption>
  <thead>
    <tr>
      <th>No</th>
      <th>Nama</th>
      <th>Harga</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Keyboard</td>
      <td>Rp150.000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mouse</td>
      <td>Rp80.000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total 2 item</td>
    </tr>
  </tfoot>
</table>

Penjelasan Tag Penting

Berikut ringkasan elemen yang paling sering dipakai saat membuat tabel. Gunakan th untuk judul kolom agar screen reader memahami konteks data secara tepat.

Menambahkan Styling Dasar

Agar tabel terlihat profesional, tambahkan CSS untuk batas sel, jarak, dan penekanan visual pada header. Kalian bisa menaruh CSS di <style> atau file terpisah.

<style>
  table { border-collapse: collapse; width: 100%; }
  th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
  thead th { background: #f5f5f5; }
  tfoot td { font-weight: 600; }
  caption { caption-side: top; font-weight: 600; margin-bottom: 8px; }
  .table-wrapper { overflow-x: auto; }
</style>

Untuk menjaga responsivitas, bungkus tabel dalam elemen pembungkus seperti <div class="table-wrapper"> supaya ketika layar sempit, pengguna tetap dapat melakukan scroll horizontal tanpa merusak layout.

Aksesibilitas Dan Praktik Baik

Berikan caption yang informatif, manfaatkan atribut scope pada th untuk menandai cakupan header (kolom atau baris), serta hindari menggunakan tabel untuk membuat layout non-data. Jika ada sel yang merentang beberapa kolom atau baris, pakai colspan atau rowspan secara tepat. Jaga konten teks agar singkat dan konsisten sehingga mesin pencari maupun pembaca layar mudah memahami struktur data.

Contoh header dengan scope:

<thead>
  <tr>
    <th scope="col">No</th>
    <th scope="col">Nama</th>
    <th scope="col">Harga</th>
  </tr>
</thead>

Kesimpulan

Cara membuat tabel dengan HTML yang baik dimulai dari struktur semantik yang benar, penggunaan elemen thead, tbody, tfoot, serta pemilihan th dan td secara tepat, kemudian dilengkapi CSS yang rapi serta praktik aksesibilitas seperti caption dan scope. Dengan langkah-langkah di atas, tabel kalian akan tampil jelas, responsif, dan ramah SEO. Sekian artikel dari kodelyly.com, semoga bermanfaat dan selamat mencoba di proyek kalian berikutnya!