HTML Tag Table: Membuat Tabel di HTML

Tag <table> digunakan untuk membuat tabel di HTML yang terdiri dari baris dan kolom untuk menampilkan data secara terstruktur.

Apa Itu HTML Tag Table?

HTML tag <table> adalah elemen HTML yang digunakan untuk membuat tabel di dalam halaman web. Tabel berfungsi untuk menampilkan data dalam bentuk baris (rows) dan kolom (columns) sehingga informasi dapat disusun secara lebih terstruktur, rapi, dan mudah dipahami oleh pengguna.

Di dalam tag <table>, terdapat beberapa elemen pendukung yang digunakan untuk menyusun isi tabel, seperti:

<tr> (table row) untuk membuat baris
<th> (table header) untuk membuat judul kolom
<td> (table data) untuk mengisi data pada setiap sel

Dengan kombinasi elemen-elemen tersebut, pengembang dapat menyusun berbagai jenis data, seperti jadwal, daftar harga, laporan, data statistik, atau informasi lainnya yang membutuhkan tampilan terstruktur.

Secara default, tabel yang dibuat dengan HTML akan memiliki tampilan sederhana. Namun, dengan bantuan CSS, tabel dapat didesain menjadi lebih menarik dan profesional. Misalnya, pengembang dapat menambahkan border, warna latar belakang, jarak antar sel (padding), serta efek hover untuk meningkatkan kenyamanan membaca.

Selain itu, terdapat juga atribut tambahan yang dapat digunakan untuk mengatur tabel, seperti colspan dan rowspan untuk menggabungkan beberapa kolom atau baris, sehingga tampilan tabel menjadi lebih fleksibel dan sesuai kebutuhan.

Dalam pengembangan web modern, penggunaan <table> biasanya difokuskan untuk menampilkan data tabular (data berbentuk tabel), bukan untuk mengatur layout halaman. Hal ini karena layout website saat ini lebih disarankan menggunakan CSS (seperti Flexbox atau Grid) agar lebih responsif dan mudah dikelola.

Karena kemampuannya dalam menyajikan data secara sistematis, tag <table> menjadi elemen penting dalam HTML untuk menampilkan informasi yang kompleks secara jelas, terstruktur, dan mudah dibaca oleh pengguna.

Fungsi HTML tag <table>

Membuat tabel
Digunakan untuk menampilkan data secara terstruktur (baris & kolom).
Menyusun data agar rapi
Memudahkan pembaca memahami informasi dalam bentuk tabel.
Mengorganisasi informasi
Cocok untuk data seperti:
- Jadwal
- Nilai
- Daftar produk
Bisa dikombinasikan dengan tag lain
Tag yang sering digunakan bersama:
- <tr> → baris tabel
- <td> → isi sel
- <th> → header (judul kolom)

Struktur Dasar HTML Tag Table

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>22</td>
  </tr>
</table>

Penjelasan:

<table> → membuat tabel
<tr> → baris
<th> → judul kolom
<td> → isi data

Contoh Penggunaan HTML Tag Table

1. Tabel Sederhana

Tag <table> digunakan bersama <tr>, <th>, dan <td> untuk membuat tabel sederhana.

<!DOCTYPE html>
<html>
<head>
    <title>Tabel Sederhana</title>
</head>
<body>

<table border="1">
  <tr>
    <th>Produk</th>
    <th>Harga</th>
  </tr>
  <tr>
    <td>Apel</td>
    <td>Rp10.000</td>
  </tr>
  <tr>
    <td>Pisang</td>
    <td>Rp8.000</td>
  </tr>
</table>

</body>
</html>

penjelasan: Table terdiri dari baris (tr) dan kolom (td/th).

2. Tabel dengan Banyak Baris

Tag <table> dapat berisi banyak baris data untuk menampilkan informasi yang lebih lengkap.

<!DOCTYPE html>
<html>
<head>
    <title>Tabel Banyak Baris</title>
	<style>
	table {
      border-collapse: collapse; /* ini yang bikin garis jadi satu */
      width: 100%;
    }
	</style>
</head>
<body>

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Kota</th>
    </tr>
    <tr>
        <td>Andi</td>
        <td>Bandung</td>
    </tr>
    <tr>
        <td>Budi</td>
        <td>Jakarta</td>
    </tr>
</table>

</body>
</html>

penjelasan: Setiap tr menambahkan baris baru pada tabel.

3. Tabel dengan CSS Styling

Tag <table> dapat diberi style menggunakan CSS untuk mengatur tampilan seperti border dan warna.

<!DOCTYPE html>
<html>
<head>
    <title>Tabel CSS</title>
	<style>
		table {
		  border-collapse: collapse; /* ini yang bikin garis jadi satu */
		  width: 100%;
		}

		th, td {
		  border: 1px solid black;
		  padding: 8px;
		  text-align: left;
		}

		th {
		  background-color: #f2f2f2;
		}
	</style>
</head>
<body>

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Kota</th>
    </tr>
    <tr>
        <td>Andi</td>
        <td>Bandung</td>
    </tr>
    <tr>
        <td>Budi</td>
        <td>Jakarta</td>
    </tr>
</table>

</body>
</html>

penjelasan: CSS membuat tampilan tabel lebih rapi dan menarik.

4. Tabel dengan Colspan

Atribut colspan digunakan untuk menggabungkan beberapa kolom menjadi satu sel.

<!DOCTYPE html>
<html>
<head>
    <title>Tabel Colspan</title>
</head>
<body>

<table border="1">
    <tr>
        <th colspan="2">Data Pengguna</th>
    </tr>
    <tr>
        <td>Nama</td>
        <td>Andi</td>
    </tr>
</table>

</body>
</html>

penjelasan: Colspan menggabungkan beberapa kolom.

5. Tabel dengan Rowspan

Atribut rowspan digunakan untuk menggabungkan beberapa baris dalam satu sel.

<!DOCTYPE html>
<html>
<head>
    <title>Tabel Rowspan</title>
</head>
<body>

<table border="1">
  <tr>
    <th rowspan="2">Nama</th>
    <th colspan="2">Nilai</th>
  </tr>
  <tr>
    <th>Matematika</th>
    <th>Bahasa</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>90</td>
    <td>85</td>
  </tr>
</table>

</body>
</html>

penjelasan: Rowspan menggabungkan beberapa baris.

6. Tabel dengan Header dan Footer

Tag <thead> dan <tfoot> digunakan untuk memisahkan bagian header dan footer tabel.

<!DOCTYPE html>
<html>
<head>
    <title>Tabel Header Footer</title>
</head>
<body>

<table border="1">
  <thead>
    <tr>
      <th>Produk</th>
      <th>Harga</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apel</td>
      <td>Rp10.000</td>
    </tr>
    <tr>
      <td>Pisang</td>
      <td>Rp8.000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>Rp18.000</td>
    </tr>
  </tfoot>
</table>

</body>
</html>

penjelasan: Thead, tbody, dan tfoot membantu struktur tabel.

7. Tabel dengan Class CSS

Tag <table> dapat menggunakan class untuk styling yang dapat digunakan kembali.

<!DOCTYPE html>
<html>
<head>
    <title>Tabel Class</title>
    <style>
        .tabel{
            border:1px solid gray;
        }
    </style>
</head>
<body>

<table class="tabel">
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

</body>
</html>

penjelasan: Class memudahkan penggunaan style pada tabel.

8. Tabel dengan Zebra Stripe

CSS dapat digunakan untuk membuat tampilan baris tabel bergantian warna agar lebih mudah dibaca.

<!DOCTYPE html>
<html>
<head>
    <title>Tabel Zebra</title>
    <style>
        tr:nth-child(even){
            background-color:#f2f2f2;
        }
    </style>
</head>
<body>

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

</body>
</html>

penjelasan: Zebra stripe membantu membedakan baris tabel.

9. Contoh HTML dan CSS Lengkap: Table Style Dengan CSS.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Daftar Kabupaten Jawa Barat</title>
</head>
<body>

<h2>Contoh Table Style CSS: Daftar Kabupaten di Jawa Barat</h2>

<table>
  <tr>
    <th>No</th>
    <th>Nama Kabupaten</th>
    <th>Ibu Kota</th>
  </tr>
  <tr><td>1</td><td>Kabupaten Bandung</td><td>Soreang</td></tr>
  <tr><td>2</td><td>Kabupaten Bandung Barat</td><td>Ngamprah</td></tr>
  <tr><td>3</td><td>Kabupaten Bekasi</td><td>Cikarang</td></tr>
  <tr><td>4</td><td>Kabupaten Bogor</td><td>Cibinong</td></tr>
  <tr><td>5</td><td>Kabupaten Ciamis</td><td>Ciamis</td></tr>
  <tr><td>6</td><td>Kabupaten Cianjur</td><td>Cianjur</td></tr>
  <tr><td>7</td><td>Kabupaten Cirebon</td><td>Sumber</td></tr>
  <tr><td>8</td><td>Kabupaten Garut</td><td>Tarogong Kidul</td></tr>
  <tr><td>9</td><td>Kabupaten Indramayu</td><td>Indramayu</td></tr>
  <tr><td>10</td><td>Kabupaten Karawang</td><td>Karawang</td></tr>
  <tr><td>11</td><td>Kabupaten Kuningan</td><td>Kuningan</td></tr>
  <tr><td>12</td><td>Kabupaten Majalengka</td><td>Majalengka</td></tr>
  <tr><td>13</td><td>Kabupaten Pangandaran</td><td>Parigi</td></tr>
  <tr><td>14</td><td>Kabupaten Purwakarta</td><td>Purwakarta</td></tr>
  <tr><td>15</td><td>Kabupaten Subang</td><td>Subang</td></tr>
  <tr><td>16</td><td>Kabupaten Sukabumi</td><td>Palabuhanratu</td></tr>
  <tr><td>17</td><td>Kabupaten Sumedang</td><td>Sumedang</td></tr>
  <tr><td>18</td><td>Kabupaten Tasikmalaya</td><td>Singaraja</td></tr>
</table>

</body>
</html>

Atribut Penting HTML Tag Table

Atribut	Fungsi	Contoh
border	Menentukan tebal garis batas tabel	`<table border="1">`
cellspacing	Jarak antar sel	`<table cellspacing="5">`
cellpadding	Jarak isi sel dengan batas sel	`<table cellpadding="5">`
width	Lebar tabel	`<table width="50%">`
height	Tinggi tabel	`<table height="100">`

Atribut Lanjutan HTML Tag Table

Atribut	Fungsi	Contoh
summary	Ringkasan tabel untuk aksesibilitas	`<table summary="Data produk">`
frame	Menentukan garis tepi tabel	`<table frame="box">`
rules	Menentukan garis antar sel	`<table rules="all">`
align	Posisi tabel di halaman	`<table align="center">`
bgcolor	Warna latar tabel	`<table bgcolor="#f2f2f2">`

Atribut Global yang Didukung HTML Tag Table

Atribut	Fungsi	Contoh
id	Identitas unik tabel	`<table id="data1">`
class	Kelas CSS	`<table class="tabel-style">`
style	Styling inline	`<table style="border:1px solid black">`
title	Keterangan tambahan	`<table title="Tabel produk">`
data-*	Data kustom	`<table data-type="produk">`

Manfaat Menggunakan HTML Tag Table

Membuat data terstruktur dalam baris dan kolom
Meningkatkan keterbacaan dan organisasi informasi
Dapat digabungkan dengan CSS untuk tampilan lebih baik
Dapat digunakan untuk laporan, jadwal, dan perhitungan
Mempermudah aksesibilitas dengan summary dan caption

Best Practice Penggunaan Tag Table

Gunakan untuk data, bukan layout halaman
Selalu gunakan <thead>, <tbody>, dan <tfoot> untuk struktur jelas
Gunakan CSS untuk styling, hindari atribut deprecated seperti bgcolor atau align
Tambahkan caption dan summary untuk aksesibilitas

Kesimpulan

HTML tag <table> memungkinkan pembuatan tabel untuk menampilkan data dalam format baris dan kolom. Dengan atribut penting, lanjutan, dan dukungan CSS, tabel menjadi terstruktur, mudah dibaca, dan responsif.

Untuk memahami dasar tag HTML lebih lengkap, silakan baca dokumentasi tag HTML lengkap.

Cara Menggunakan Tag Table