Langsung ke konten

Membuat Tabel Dasar di HTML dengan `<table>`

Pelajari cara membuat tabel di HTML menggunakan tag <table>, <tr>, <td>, dan <th>. Pahami juga <thead>, <tbody>, <tfoot>, dan attribute tabel.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah menyelesaikan seri list, kita masuk ke modul baru: tabel. Tabel berguna untuk menampilkan data secara terstruktur dalam baris dan kolom.

Apa itu Tabel HTML?

Tabel adalah cara menampilkan data dalam format baris dan kolom. HTML punya beberapa tag untuk membuat tabel: <table>, <tr>, <td>, dan <th>.

Tabel cocok untuk:

  • Data statistik
  • Jadwal
  • Perbandingan harga
  • Daftar dengan beberapa kolom informasi

Struktur Dasar Tabel

Empat tag utama membentuk tabel:

  • <table> — Container utama tabel
  • <tr> — Table row (baris)
  • <td> — Table data (sel data)
  • <th> — Table header (sel header)
<table>
  <tr>
    <th>Nama</th>
    <th>Usia</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>Budi</td>
    <td>25</td>
    <td>Jakarta</td>
  </tr>
  <tr>
    <td>Ani</td>
    <td>22</td>
    <td>Bandung</td>
  </tr>
</table>

Output:

NamaUsiaKota
Budi25Jakarta
Ani22Bandung

Perbedaan <th> dan <td>

  • <th> — Teks tebal dan rata tengah secara default. Untuk header kolom atau baris.
  • <td> — Teks biasa. Untuk data sel.

Gunakan <th> untuk judul kolom atau baris. Gunakan <td> untuk isi data.

<thead>, <tbody>, <tfoot>

HTML menyediakan tiga elemen untuk mengelompokkan bagian tabel:

  • <thead> — Bagian header tabel
  • <tbody> — Bagian isi tabel
  • <tfoot> — Bagian footer tabel
<table>
  <thead>
    <tr>
      <th>Produk</th>
      <th>Harga</th>
      <th>Stok</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>Rp 8.000.000</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>Rp 150.000</td>
      <td>50</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total Produk</td>
      <td>60</td>
    </tr>
  </tfoot>
</table>

Pengelompokan ini membantu browser memahami struktur tabel dan memudahkan styling dengan CSS.

Attribute pada Tabel

border

border menambahkan garis tepi pada tabel dan sel:

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Nilai</th>
  </tr>
  <tr>
    <td>Matematika</td>
    <td>90</td>
  </tr>
</table>

cellpadding

cellpadding mengatur jarak antara isi sel dengan tepi sel:

<table border="1" cellpadding="10">
  <tr>
    <th>Nama</th>
    <th>Nilai</th>
  </tr>
  <tr>
    <td>Matematika</td>
    <td>90</td>
  </tr>
</table>

cellspacing

cellspacing mengatur jarak antar sel:

<table border="1" cellpadding="10" cellspacing="5">
  <tr>
    <th>Nama</th>
    <th>Nilai</th>
  </tr>
  <tr>
    <td>Matematika</td>
    <td>90</td>
  </tr>
</table>

Contoh Tabel Lengkap

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Contoh Tabel HTML</title>
  </head>
  <body>
    <h1>Data Siswa</h1>

    <table border="1" cellpadding="8" cellspacing="0">
      <thead>
        <tr>
          <th>No</th>
          <th>Nama</th>
          <th>Kelas</th>
          <th>Nilai</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Budi Santoso</td>
          <td>XII IPA 1</td>
          <td>92</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Ani Wijaya</td>
          <td>XII IPA 1</td>
          <td>88</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Deni Kurniawan</td>
          <td>XII IPA 2</td>
          <td>85</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">Rata-rata</td>
          <td>88.3</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Best Practice Tabel HTML

  • Gunakan <thead>, <tbody>, <tfoot> untuk struktur yang jelas
  • Pakai <th> untuk header, bukan <td> dengan bold manual
  • Hindari tabel untuk layout halaman. Gunakan CSS Flexbox atau Grid
  • Tambahkan attribute summary atau caption untuk aksesibilitas
  • Untuk tabel kompleks, gunakan CSS daripada attribute HTML

Ringkasan

  • <table> jadi container utama tabel
  • <tr> untuk baris, <td> untuk data, <th> untuk header
  • <thead>, <tbody>, <tfoot> mengelompokkan bagian tabel
  • Attribute: border, cellpadding, cellspacing
  • Tabel untuk data, bukan untuk layout

Langkah Selanjutnya

Kamu sudah bisa membuat tabel dasar. Artikel selanjutnya membahas mengatur tabel lebih lanjut, termasuk merge cells dan styling.