Tabel dalam HTML dibuat menggunakan tag <table> sebagai wadah utama. Di dalamnya, setiap baris tabel didefinisikan dengan tag <tr> (table row). Setiap sel dalam baris tersebut dapat berupa sel data (<td>, table data) atau sel header (<th>, table header). Tag <th> umumnya digunakan untuk header kolom atau baris, dan teks di dalamnya secara default ditampilkan dengan format tebal (bold) serta rata tengah. Tabel memungkinkan penyajian data terstruktur seperti daftar, jadwal, atau informasi berbasis grid.

Struktur tabel juga mendukung atribut seperti colspan dan rowspan untuk menggabungkan sel secara horizontal atau vertikal. Penggunaan tabel sebaiknya hanya untuk data tabular, bukan untuk tata letak halaman. Untuk meningkatkan tampilan, CSS dapat diaplikasikan untuk menambahkan border, padding, warna, atau responsivitas.

Contoh Implementasi Tabel HTML

Contoh 1: Tabel Dasar

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>30</td>
  </tr>
</table>

Hasil: Tabel sederhana dengan header “Nama” dan “Usia”, serta dua baris data.

Contoh 2: Menggunakan colspan

<table border="1">
  <tr>
    <th colspan="2">Informasi Pegawai</th>
  </tr>
  <tr>
    <td>Nama</td>
    <td>Lisa</td>
  </tr>
</table>

Hasil: Header “Informasi Pegawai” menggabungkan dua kolom.

Contoh 3: Tabel dengan rowspan

<table border="1">
  <tr>
    <th rowspan="2">Kode</th>
    <th>Produk</th>
  </tr>
  <tr>
    <td>P001</td>
  </tr>
</table>

Hasil: Sel “Kode” menggabungkan dua baris.

Contoh 4: Tabel dengan CSS Dasar (Gabungan CSS)

<style>
  .tabel-stylish {
    border-collapse: collapse;
    width: 50%;
  }
  .tabel-stylish th, .tabel-stylish td {
    border: 1px solid #333;
    padding: 8px;
    text-align: left;
  }
  .tabel-stylish th {
    background-color: #f2f2f2;
  }
</style>

<table class="tabel-stylish">
  <tr>
    <th>Kota</th>
    <th>Suhu (°C)</th>
  </tr>
  <tr>
    <td>Jakarta</td>
    <td>28</td>
  </tr>
</table>

Hasil: Tabel dengan border rapi, padding, dan header berwarna abu-abu.

Contoh 5: Tabel Responsif dengan CSS

<style>
  .tabel-responsive {
    width: 100%;
    overflow-x: auto;
  }
  .tabel-responsive td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }
</style>

<div class="tabel-responsive">
  <table>
    <tr>
      <th>No.</th>
      <th>Item</th>
      <th>Harga</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Buku</td>
      <td>Rp 50.000</td>
    </tr>
  </table>
</div>

Hasil: Tabel yang bisa di-scroll horizontal pada layar kecil.