Membuat Tabel

Cara Membuat Tabel dengan Script: Panduan Lengkap dan Praktis

Dalam dunia pengembangan web, tabel merupakan elemen yang sangat penting untuk menampilkan data secara rapi dan terstruktur. Mulai dari daftar harga, data siswa, laporan keuangan, hingga informasi produk — semuanya bisa disajikan dengan lebih mudah menggunakan tabel. Namun, agar tabel menjadi lebih dinamis dan interaktif, kita tidak cukup hanya menggunakan HTML saja. Diperlukan kombinasi antara HTML, CSS, dan JavaScript (script) untuk membuat tampilan yang menarik dan memiliki fungsi tambahan.

Artikel ini akan membahas secara mendalam cara membuat tabel dengan script, mulai dari dasar HTML, penambahan gaya menggunakan CSS, hingga membuat tabel interaktif menggunakan JavaScript.

1. Pengertian Tabel dalam Web Programming

Tabel pada dasarnya adalah struktur data berbentuk baris (rows) dan kolom (columns) yang digunakan untuk menampilkan informasi secara teratur. Dalam HTML, tabel dibentuk menggunakan elemen-elemen berikut:

<table> → digunakan untuk mendefinisikan tabel.
<tr> → digunakan untuk mendefinisikan baris (table row).
<th> → digunakan untuk mendefinisikan judul kolom (table header).
<td> → digunakan untuk mendefinisikan data di dalam baris dan kolom (table data).

Contoh sederhana:


<table border="1">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>Budi</td>
    <td>25</td>
    <td>Jakarta</td>
  </tr>
  <tr>
    <td>Sinta</td>
    <td>22</td>
    <td>Bandung</td>
  </tr>
</table>

Kode di atas akan menghasilkan tabel sederhana dengan tiga kolom dan dua baris data.

Hasil jadinya :

Tabel Data Siswa

Daftar Siswa

No	Nama	Umur	Kelas
1	Budi	17	XII IPA
2	Siti	16	XI IPS

Nama	Umur	Kota
Budi	25	Jakarta
Sinta	22	Bandung

Namun, tampilan tabel seperti itu masih sangat dasar. Untuk membuatnya lebih menarik, kita bisa menambahkan CSS dan JavaScript (script).

2. Membuat Tabel dengan HTML dan CSS

Sebelum menambahkan script, penting untuk membuat struktur tabel yang rapi. Kita dapat memperindah tampilannya menggunakan CSS.

Contoh kode:


<!DOCTYPE html>
<html>
<head>
  <title>Tabel Data Siswa</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 30px;
    }

    table {
      width: 80%;
      margin: auto;
      border-collapse: collapse;
      background-color: #fff;
    }

    th, td {
      border: 1px solid #ddd;
      padding: 12px;
      text-align: center;
    }

    th {
      background-color: #007BFF;
      color: white;
    }

    tr:nth-child(even) {
      background-color: #f9f9f9;
    }

    tr:hover {
      background-color: #e0f7fa;
    }
  </style>
</head>
<body>

<h2 style="text-align:center;">Daftar Siswa</h2>

<table id="tabelSiswa">
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Umur</th>
    <th>Kelas</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Budi</td>
    <td>17</td>
    <td>XII IPA</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Siti</td>
    <td>16</td>
    <td>XI IPS</td>
  </tr>
</table>

</body>
</html>

Dengan CSS di atas, tabel akan tampil lebih menarik dan mudah dibaca.

Hasil Jadinya :

3. Menambahkan Data ke Tabel Menggunakan Script

Jika kita ingin menambahkan data secara otomatis tanpa mengetikkan baris satu per satu, kita bisa menggunakan JavaScript.

Berikut contohnya:


<script>
  let dataSiswa = [
    { no: 3, nama: "Andi", umur: 17, kelas: "XII IPA" },
    { no: 4, nama: "Lina", umur: 16, kelas: "XI Bahasa" },
    { no: 5, nama: "Rafi", umur: 15, kelas: "X IPS" }
  ];

  let tabel = document.getElementById("tabelSiswa");

  for (let i = 0; i < dataSiswa.length; i++) {
    let row = tabel.insertRow();
    row.insertCell(0).innerHTML = dataSiswa[i].no;
    row.insertCell(1).innerHTML = dataSiswa[i].nama;
    row.insertCell(2).innerHTML = dataSiswa[i].umur;
    row.insertCell(3).innerHTML = dataSiswa[i].kelas;
  }
</script>

Dengan script ini, tiga baris baru akan otomatis muncul di tabel. JavaScript berfungsi menambahkan elemen HTML secara dinamis menggunakan perulangan.

4. Membuat Tabel Dinamis dengan Input Form

Tabel akan lebih berguna jika pengguna dapat menambahkan data secara langsung melalui form input. Berikut contoh cara membuat tabel yang bisa diisi data oleh pengguna:


<!DOCTYPE html>
<html>
<head>
  <title>Tabel Dinamis</title>
  <style>
    table, th, td {
      border: 1px solid #ccc;
      border-collapse: collapse;
      padding: 10px;
    }
    th {
      background-color: #4CAF50;
      color: white;
    }
  </style>
</head>
<body>

<h2>Tambah Data ke Tabel</h2>

<form id="formData">
  Nama: <input type="text" id="nama"><br><br>
  Umur: <input type="number" id="umur"><br><br>
  Kelas: <input type="text" id="kelas"><br><br>
  <button type="button" onclick="tambahData()">Tambah</button>
</form>

<br>

<table id="tabelData">
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Umur</th>
    <th>Kelas</th>
  </tr>
</table>

<script>
let no = 1;

function tambahData() {
  let nama = document.getElementById("nama").value;
  let umur = document.getElementById("umur").value;
  let kelas = document.getElementById("kelas").value;

  if (nama === "" || umur === "" || kelas === "") {
    alert("Semua field harus diisi!");
    return;
  }

  let tabel = document.getElementById("tabelData");
  let baris = tabel.insertRow();

  baris.insertCell(0).innerHTML = no++;
  baris.insertCell(1).innerHTML = nama;
  baris.insertCell(2).innerHTML = umur;
  baris.insertCell(3).innerHTML = kelas;

  document.getElementById("formData").reset();
}
</script>

</body>
</html>

Script di atas memungkinkan pengguna menambah data ke tabel dengan menekan tombol Tambah. Data akan langsung tampil di tabel di bawahnya tanpa harus memuat ulang halaman.

5. Menambahkan Fitur Hapus Data

Untuk membuat tabel lebih interaktif, kita bisa menambahkan tombol “hapus” di setiap baris agar data bisa dihapus secara langsung.

Modifikasi script di atas menjadi:


<script>
let nomor = 1;

function tambahData() {
  let nama = document.getElementById("nama").value;
  let umur = document.getElementById("umur").value;
  let kelas = document.getElementById("kelas").value;

  if (nama === "" || umur === "" || kelas === "") {
    alert("Semua field harus diisi!");
    return;
  }

  let tabel = document.getElementById("tabelData");
  let baris = tabel.insertRow();
  
  baris.insertCell(0).innerHTML = nomor++;
  baris.insertCell(1).innerHTML = nama;
  baris.insertCell(2).innerHTML = umur;
  baris.insertCell(3).innerHTML = kelas;
  baris.insertCell(4).innerHTML = `<button onclick="hapusBaris(this)">Hapus</button>`;

  document.getElementById("formData").reset();
}

function hapusBaris(btn) {
  let baris = btn.parentNode.parentNode;
  baris.parentNode.removeChild(baris);
}
</script>

Dengan tambahan kode ini, setiap baris tabel akan memiliki tombol Hapus yang berfungsi menghapus baris tersebut secara instan.

6. Membuat Tabel Interaktif dengan Sort dan Search

Agar lebih profesional, kita bisa menambahkan fitur pencarian (search) dan pengurutan (sort) menggunakan JavaScript murni.

Berikut contoh sederhananya:


<input type="text" id="cari" placeholder="Cari nama..." onkeyup="cariNama()">

<table id="tabelCari">
  <tr>
    <th onclick="urutkan(0)">Nama</th>
    <th onclick="urutkan(1)">Umur</th>
  </tr>
  <tr><td>Budi</td><td>25</td></tr>
  <tr><td>Siti</td><td>20</td></tr>
  <tr><td>Andi</td><td>23</td></tr>
</table>

<script>
function cariNama() {
  let input = document.getElementById("cari").value.toLowerCase();
  let tabel = document.getElementById("tabelCari");
  let tr = tabel.getElementsByTagName("tr");

  for (let i = 1; i < tr.length; i++) {
    let td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      let teks = td.textContent || td.innerText;
      tr[i].style.display = teks.toLowerCase().indexOf(input) > -1 ? "" : "none";
    }
  }
}

function urutkan(n) {
  let tabel = document.getElementById("tabelCari");
  let switching = true, arah = "asc";
  while (switching) {
    switching = false;
    let baris = tabel.rows;
    for (let i = 1; i < baris.length - 1; i++) {
      let harusTukar = false;
      let x = baris[i].getElementsByTagName("TD")[n];
      let y = baris[i + 1].getElementsByTagName("TD")[n];
      if (arah === "asc" && x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        harusTukar = true;
        break;
      } else if (arah === "desc" && x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
        harusTukar = true;
        break;
      }
    }
    if (harusTukar) {
      baris[i].parentNode.insertBefore(baris[i + 1], baris[i]);
      switching = true;
    } else if (!switching && arah === "asc") {
      arah = "desc";
      switching = true;
    }
  }
}
</script>

Fitur ini memungkinkan pengguna mencari nama dalam tabel serta mengurutkan data berdasarkan kolom tertentu dengan hanya mengklik judul kolom.

7. Kesimpulan

Membuat tabel dengan script (JavaScript) bukan hanya soal menampilkan data, tetapi juga bagaimana membuatnya dinamis, interaktif, dan mudah digunakan.

Dengan kombinasi HTML untuk struktur, CSS untuk tampilan, dan JavaScript untuk interaksi, kita bisa menciptakan tabel profesional yang bisa menambah data, menghapus, mencari, bahkan mengurutkan isi tabel tanpa harus menggunakan database.

Langkah-langkah utama yang bisa kamu pelajari:

Membuat struktur tabel dengan HTML.
Menata tampilan tabel dengan CSS.
Menambahkan data secara dinamis dengan JavaScript.
Membuat tabel interaktif dengan fitur hapus, cari, dan urutkan.

Dengan memahami konsep ini, kamu bisa mengembangkan berbagai aplikasi web — mulai dari sistem absensi, daftar produk, hingga dashboard data bisnis — dengan tabel yang modern dan efisien.

Belajar Membuat Script