9 Jul 2025

Tabel HTML

Setelah sebelumnya kita belajar cara membuat daftar di HTML, kali ini kita lanjut ke materi berikutnya yaitu membuat Tabel HTML. Tabel berguna untuk menampilkan informasi dalam bentuk baris dan kolom agar mudah dipahami.

Berikut langkah-langkahnya.

Struktur Dasar Tabel HTML

Contoh struktur dasar tabel HTML yang bisa kamu ikuti:

index.html

<!doctype html>
<html>
  <head>
    <title>blog.adydetra.my.id</title>
  </head>
  <body>
    <!-- Contoh tabel taruh di sini -->
  </body>
</html>

Membuat Tabel Sederhana

Tabel paling sederhana terdiri dari tag <table>, <tr> (table row), <th> (table header), dan <td> (table data):

<table>
  <tr>
    <th>Nama</th>
    <th>Usia</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>Budi</td>
    <td>28</td>
    <td>Jakarta</td>
  </tr>
  <tr>
    <td>Siti</td>
    <td>25</td>
    <td>Bandung</td>
  </tr>
</table>

<th> otomatis membuat teks menjadi tebal dan di tengah.
<td> berisi data biasa.

Menambahkan Garis pada Tabel

Secara default, tabel HTML tampil tanpa garis. Untuk menambahkan garis sederhana gunakan CSS berikut:

<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 8px;
  }
</style>

<table>
  <tr>
    <th>Produk</th>
    <th>Harga</th>
  </tr>
  <tr>
    <td>Kopi</td>
    <td>Rp15.000</td>
  </tr>
  <tr>
    <td>Teh</td>
    <td>Rp10.000</td>
  </tr>
</table>

Menggabungkan Kolom dengan `colspan`

Gunakan colspan untuk menggabungkan beberapa kolom menjadi satu:

<table border="1">
  <tr>
    <th colspan="2">Nama Lengkap</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>Budi</td>
    <td>Setiawan</td>
    <td>28</td>
  </tr>
</table>

Menggabungkan Baris dengan `rowspan`

Gunakan rowspan untuk menggabungkan beberapa baris menjadi satu:

<table border="1">
  <tr>
    <th>Nama</th>
    <td>Budi</td>
  </tr>
  <tr>
    <th rowspan="2">Alamat</th>
    <td>Jl. Merdeka No.1</td>
  </tr>
  <tr>
    <td>Jakarta</td>
  </tr>
</table>

Menambahkan Caption pada Tabel

Kamu juga bisa tambahkan judul atau caption di tabel menggunakan elemen <caption>:

<table border="1">
  <caption>Daftar Harga Minuman</caption>
  <tr>
    <th>Minuman</th>
    <th>Harga</th>
  </tr>
  <tr>
    <td>Kopi</td>
    <td>Rp15.000</td>
  </tr>
  <tr>
    <td>Teh</td>
    <td>Rp10.000</td>
  </tr>
</table>

Tabel dengan Struktur Lengkap (`thead`, `tbody`, `tfoot`)

Untuk tabel yang lebih kompleks dan jelas strukturnya:

<table border="1">
  <thead>
    <tr>
      <th>Produk</th>
      <th>Harga</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Kopi</td>
      <td>Rp15.000</td>
    </tr>
    <tr>
      <td>Teh</td>
      <td>Rp10.000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>Rp25.000</td>
    </tr>
  </tfoot>
</table>

<thead> untuk kepala tabel.
<tbody> untuk isi utama tabel.
<tfoot> untuk bagian bawah atau footer tabel.

Kesimpulan

Tabel HTML sangat membantu dalam menyusun dan menyajikan data secara terstruktur dan jelas. Kombinasikan penggunaan atribut seperti colspan dan rowspan agar tabel lebih fleksibel.

Di bagian berikutnya, kita akan belajar tentang Formulir HTML untuk membuat halaman yang lebih interaktif dengan pengguna.