Selamat datang kembali di seri “Belajar HTML”! Setelah sebelumnya kita membahas paragraf, kini saatnya kita mempelajari cara menyajikan data secara terstruktur menggunakan tabel. Tabel adalah elemen yang sangat berguna untuk menampilkan informasi dalam format baris dan kolom, seperti jadwal, daftar harga, atau data statistik.

Pada tutorial ini, kita akan membahas tuntas cara membuat tabel di HTML, mulai dari struktur paling dasar hingga yang lebih kompleks.

Anatomi Dasar Tabel HTML

Untuk membuat sebuah tabel, kita memerlukan beberapa tag utama yang bekerja sama. Bayangkan seperti membangun sebuah lemari: ada kerangka utamanya, ada rak-raknya, dan ada isi di setiap rak.

Tag-tag dasar tersebut adalah:

• <table>: Tag pembungkus utama yang menandakan awal dan akhir dari sebuah tabel.
• <tr> (Table Row): Tag untuk membuat baris baru di dalam tabel.
• <td> (Table Data): Tag untuk membuat sel data di dalam sebuah baris. Ini adalah tempat di mana Anda meletakkan konten Anda.
• <th> (Table Head): Tag khusus untuk membuat sel header atau judul kolom. Teks di dalam <th> secara otomatis akan ditampilkan tebal (bold) dan berada di tengah oleh browser.

Mari kita lihat struktur paling sederhana dari sebuah tabel 2×2 (dua baris dan dua kolom):

<table border="1">
  <tr>
    <td>Baris 1, Kolom 1</td>
    <td>Baris 1, Kolom 2</td>
  </tr>
  <tr>
    <td>Baris 2, Kolom 1</td>
    <td>Baris 2, Kolom 2</td>
  </tr>
</table>

Catatan: Atribut border="1" digunakan di sini agar garis tabel terlihat. Namun, praktik modern menyarankan penggunaan CSS untuk styling. Kita akan membahas ini lebih lanjut.

Menggunakan Header Tabel (<th>)

Setiap tabel yang baik memiliki judul kolom yang jelas. Menggunakan <th> tidak hanya membuat tampilan header berbeda, tetapi juga penting untuk aksesibilitas (membantu screen reader) dan SEO. Biasanya, baris header ditempatkan di paling atas.

Perhatikan contoh tabel data siswa berikut:

<table border="1">
  <tr>
    <th>No.</th>
    <th>Nama</th>
    <th>Kelas</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Budi Santoso</td>
    <td>10A</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Citra Lestari</td>
    <td>10B</td>
  </tr>
</table>

Hasilnya, “No.”, “Nama”, dan “Kelas” akan tampil lebih menonjol sebagai judul kolom.

Struktur Semantik: <thead>, <tbody>, dan <tfoot>

Untuk tabel yang lebih kompleks dan terstruktur, HTML menyediakan tiga tag tambahan untuk mengelompokkan bagian-bagian tabel:

• <thead>: Untuk mengelompokkan konten kepala tabel (baris <th>).
• <tbody>: Untuk mengelompokkan konten isi atau badan tabel (baris <td>).
• <tfoot>: Untuk mengelompokkan konten kaki tabel (misalnya, baris total atau ringkasan).

Penggunaan tag-tag ini membantu browser dan mesin pencari memahami struktur tabel Anda dengan lebih baik.

<table border="1">
  <thead>
    <tr>
      <th>Produk</th>
      <th>Harga</th>
      <th>Stok</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Buku Tulis</td>
      <td>Rp 5.000</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Pensil 2B</td>
      <td>Rp 2.000</td>
      <td>100</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total Jenis Barang:</td>
      <td>2</td>
    </tr>
  </tfoot>
</table>

Menggabungkan Sel: colspan dan rowspan

Terkadang, Anda perlu satu sel untuk membentang menempati beberapa kolom atau beberapa baris. Untuk ini, kita menggunakan atribut colspan dan rowspan.

• colspan (Column Span): Menggabungkan beberapa sel secara horizontal (ke samping).
• rowspan (Row Span): Menggabungkan beberapa sel secara vertikal (ke bawah).

Nilai dari atribut ini adalah angka yang menunjukkan berapa banyak kolom atau baris yang ingin digabungkan.

Contoh colspan:

Misalnya, kita ingin membuat sel “Jadwal Pelajaran” membentang di atas tiga kolom.

<table border="1">
  <tr>
    <th colspan="3">Jadwal Pelajaran</th>
  </tr>
  <tr>
    <th>Hari</th>
    <th>Jam</th>
    <th>Mata Pelajaran</th>
  </tr>
  <tr>
    <td>Senin</td>
    <td>07.00 - 09.00</td>
    <td>Matematika</td>
  </tr>
</table>

Contoh rowspan:

Misalnya, kita ingin membuat sel “Senin” membentang ke bawah untuk dua baris jadwal.

<table border="1">
  <tr>
    <th>Hari</th>
    <th>Jam</th>
    <th>Mata Pelajaran</th>
  </tr>
  <tr>
    <td rowspan="2">Senin</td>
    <td>07.00 - 09.00</td>
    <td>Matematika</td>
  </tr>
  <tr>
    <td>09.00 - 11.00</td>
    <td>Bahasa Indonesia</td>
  </tr>
</table>

Memberikan Judul Tabel dengan <caption>

Untuk memberikan judul atau deskripsi resmi pada tabel Anda, gunakan tag <caption>. Tag ini harus ditempatkan persis setelah tag pembuka <table>.

<table border="1">
  <caption>Daftar Harga Buah per Agustus 2025</caption>
  <thead>
    <tr>
      <th>Buah</th>
      <th>Harga per Kg</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apel</td>
      <td>Rp 35.000</td>
    </tr>
    <tr>
      <td>Jeruk</td>
      <td>Rp 25.000</td>
    </tr>
  </tbody>
</table>

Praktik Terbaik: Hindari Atribut Lama, Gunakan CSS

Dahulu, tabel sering dihias menggunakan atribut HTML seperti border, width, height, cellpadding, cellspacing, dan bgcolor.

PENTING: Praktik ini sudah usang dan tidak direkomendasikan dalam HTML5. Standar modern menekankan pemisahan antara struktur konten (HTML) dan presentasi visual (CSS).

• HTML (Struktur): Fokus pada penggunaan tag yang benar (<table>, <th>, <tbody>, dll.).
• CSS (Tampilan): Gunakan untuk mengatur garis (border), lebar (width), warna latar (background-color), jarak sel (padding), dan semua aspek visual lainnya.

Dengan memisahkan keduanya, kode Anda menjadi lebih bersih, lebih mudah dikelola, dan lebih sesuai dengan standar web modern.

Selamat! Anda kini telah mempelajari dasar-dasar pembuatan tabel di HTML. Kunci untuk mahir adalah dengan terus berlatih membuat berbagai macam struktur tabel. Pada artikel selanjutnya, kita akan membahas elemen penting lainnya dalam HTML.