Cara Membuat Tabel pada HTML/Adi Prayitno

Tabel adalah salah satu elemen penting dalam HTML yang digunakan untuk menampilkan data terstruktur seperti daftar harga, jadwal, laporan, dan informasi tabular lainnya. Jika Anda sudah memahami dasar membuat website dengan HTML, maka mempelajari tabel adalah langkah lanjutan yang wajib dikuasai.

Pada artikel ini, kita akan membahas cara membuat tabel pada HTML dari dasar hingga optimasi tampilan, lengkap dengan contoh kode dan hasil tampilannya.

Apa Itu Tabel dalam HTML?

Tabel HTML adalah struktur yang digunakan untuk menyusun data dalam bentuk baris dan kolom. Elemen utama tabel terdiri dari:

<table> – pembungkus tabel
<tr> – baris tabel
<th> – header kolom
<td> – data tabel

Jika Anda masih bingung perbedaan elemen dan tag HTML, silakan baca panduan lengkap elemen HTML.

Struktur Dasar Tabel HTML

Berikut contoh struktur tabel HTML paling sederhana:

<table>
  <tr>
    <th>Nama</th>
    <th>Umur</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>Adi</td>
    <td>25</td>
    <td>Jakarta</td>
  </tr>
</table>

Hasil Tampilan:

Nama	Umur	Kota
Adi	25	Jakarta

Mengatur Border dan Spasi Tabel

Secara default, tabel HTML tidak memiliki garis. Anda bisa menambahkan atribut border, cellpadding, dan cellspacing untuk mengatur tampilannya.

<table border="1" cellpadding="10" cellspacing="0">
  <tr>
    <th>Produk</th>
    <th>Harga</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>Rp8.000.000</td>
  </tr>
</table>

Untuk mempercantik tabel, Anda juga bisa mengombinasikannya dengan CSS seperti yang dibahas di cara menggunakan CSS pada HTML.

Menggabungkan Baris dan Kolom

HTML menyediakan atribut colspan dan rowspan untuk menggabungkan kolom atau baris.

Contoh Colspan

<table border="1">
  <tr>
    <th colspan="2">Data Mahasiswa</th>
  </tr>
  <tr>
    <td>Nama</td>
    <td>Adi</td>
  </tr>
</table>

Contoh Rowspan

<table border="1">
  <tr>
    <th>Hari</th>
    <th>Mata Kuliah</th>
  </tr>
  <tr>
    <td rowspan="2">Senin</td>
    <td>HTML</td>
  </tr>
  <tr>
    <td>CSS</td>
  </tr>
</table>

Tabel Responsif di HTML

Salah satu masalah umum tabel adalah tidak responsif di layar kecil. Solusinya adalah membungkus tabel dengan container dan mengaktifkan scroll horizontal.

Teknik ini sering digunakan saat menerapkan desain website responsif.

<div style="overflow-x:auto">
  <table border="1">
    ...
  </table>
</div>

Kesalahan Umum Saat Membuat Tabel HTML

Tidak menutup tag <tr> atau <td>
Menggunakan tabel untuk layout (tidak disarankan)
Terlalu banyak nested tabel

Jika tabel Anda tidak tampil sesuai harapan, pelajari cara memperbaiki kesalahan pada HTML.

Kapan Harus Menggunakan Tabel?

Gunakan tabel hanya untuk data tabular, bukan untuk layout halaman. Untuk tata letak website modern, gunakan CSS Grid atau Flexbox, atau framework seperti Bootstrap.

Penutup

Menguasai tabel HTML akan membantu Anda menyajikan data secara rapi dan profesional. Setelah memahami tabel, Anda bisa melanjutkan ke topik lanjutan seperti JavaScript pada HTML atau framework modern seperti React.

Jika Anda belajar dari nol, baca juga panduan dari nol sampai membuat website sendiri.

Cara Membuat Tabel pada HTML