Cara Membuat Tabel HTML: Pelajari cara membuat tabel HTML responsive yang elegan untuk website Anda. Tutorial ini dilengkapi fitur pencarian (Search Bar) dan tombol Export ke Excel menggunakan CSS & JS sederhana.
Tabel adalah cara terbaik untuk menyajikan data secara terstruktur. Namun, tantangan terbesarnya adalah membuat tabel tetap terlihat bagus di layar HP (responsive) dan mudah dinavigasi saat datanya banyak.
Hari ini, Warkasa1919 akan membagikan tutorial lengkap pembuatan tabel modern yang tidak hanya cantik secara desain, tapi juga memiliki fungsi Pencarian Real-time dan Export CSV.
Dashboard Data Warkasa1919
| No | Nama Lengkap | Poin | Kategori | Status |
|---|---|---|---|---|
| 1 | Jill Smith | 850 | Premium | Aktif |
| 2 | Eve Jackson | 940 | VIP | Aktif |
| 3 | Adam Johnson | 670 | Standard | Pending |
| 4 | Budi Santoso | 720 | Standard | Aktif |
Mengapa Harus Menggunakan Tabel Responsive?
Jika Anda menggunakan tabel standar, tampilan website akan terpotong saat dibuka di perangkat mobile. Dengan teknik overflow-x: auto, pengguna bisa menggeser tabel ke samping tanpa merusak layout website Anda.
Persiapan Kode (HTML, CSS, & JS)
Silakan salin kode lengkap di bawah ini ke editor teks Anda atau langsung pasang di halaman postingan website Anda:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Warkasa1919.com">
<title>Tabel Responsive Modern - Warkasa1919</title>
<style>
/* GLOBAL STYLES */
.warkasa-wrapper {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
margin: 20px auto;
max-width: 1000px;
padding: 20px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.warkasa-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
gap: 15px;
flex-wrap: wrap;
}
/* SEARCH INPUT STYLE */
#warkasaSearch {
padding: 12px 15px;
border: 2px solid #e1e4e8;
border-radius: 8px;
width: 100%;
max-width: 300px;
font-size: 14px;
outline: none;
transition: 0.3s;
}
#warkasaSearch:focus {
border-color: #3498db;
box-shadow: 0 0 8px rgba(52, 152, 219, 0.2);
}
/* BUTTON STYLE */
.btn-export {
background-color: #27ae60;
color: white;
padding: 12px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s;
}
.btn-export:hover {
background-color: #219150;
}
/* TABLE STYLES */
.table-container {
overflow-x: auto;
border: 1px solid #eef2f7;
border-radius: 8px;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 700px; /* Menjaga data tidak berhimpitan di mobile */
}
th {
background-color: #3498db;
color: #ffffff;
font-weight: 600;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.5px;
padding: 15px;
text-align: left;
}
td {
padding: 14px 15px;
border-bottom: 1px solid #f1f1f1;
color: #444;
font-size: 14px;
}
tr:nth-child(even) { background-color: #f9fbff; }
tr:last-child td { border-bottom: none; }
tr:hover { background-color: #f2f7ff; transition: 0.2s; }
/* Label Status (Opsional) */
.status-badge {
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
}
.status-active { background: #e3fcef; color: #155724; }
.status-pending { background: #fff3cd; color: #856404; }
</style>
</head>
<body>
<div class="warkasa-wrapper">
<h2 style="color: #2c3e50; margin-top: 0;">Dashboard Data Warkasa1919</h2>
<div class="warkasa-header">
<input type="text" id="warkasaSearch" onkeyup="filterTabel()" placeholder="Cari nama atau status...">
<button class="btn-export" onclick="downloadCSV()">Ekspor ke Excel</button>
</div>
<div class="table-container">
<table id="warkasaTable">
<thead>
<tr>
<th>No</th>
<th>Nama Lengkap</th>
<th>Poin</th>
<th>Kategori</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><b>Jill Smith</b></td>
<td>850</td>
<td>Premium</td>
<td><span class="status-badge status-active">Aktif</span></td>
</tr>
<tr>
<td>2</td>
<td><b>Eve Jackson</b></td>
<td>940</td>
<td>VIP</td>
<td><span class="status-badge status-active">Aktif</span></td>
</tr>
<tr>
<td>3</td>
<td><b>Adam Johnson</b></td>
<td>670</td>
<td>Standard</td>
<td><span class="status-badge status-pending">Pending</span></td>
</tr>
<tr>
<td>4</td>
<td><b>Budi Santoso</b></td>
<td>720</td>
<td>Standard</td>
<td><span class="status-badge status-active">Aktif</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
// FUNGSI PENCARIAN REAL-TIME
function filterTabel() {
const input = document.getElementById("warkasaSearch");
const filter = input.value.toLowerCase();
const table = document.getElementById("warkasaTable");
const tr = table.getElementsByTagName("tr");
for (let i = 1; i < tr.length; i++) {
const textContent = tr[i].textContent.toLowerCase();
tr[i].style.display = textContent.includes(filter) ? "" : "none";
}
}
// FUNGSI DOWNLOAD CSV (EXCEL)
function downloadCSV() {
let csv = [];
const rows = document.querySelectorAll("#warkasaTable tr");
for (let i = 0; i < rows.length; i++) {
let row = [], cols = rows[i].querySelectorAll("td, th");
for (let j = 0; j < cols.length; j++)
row.push('"' + cols[j].innerText + '"');
csv.push(row.join(","));
}
const csvContent = "data:text/csv;charset=utf-8," + csv.join("\n");
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "data_warkasa1919.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>
Penjelasan Fitur
Pencarian Cerdas: Pengguna tidak perlu menekan tombol "Enter". Begitu mereka mengetik nama atau kategori, tabel akan otomatis menyaring data.
Export CSV: Hanya dengan sekali klik, data di tabel akan diunduh dalam format
.csvyang bisa langsung dibuka di Excel.UI Modern: Menggunakan font-family yang bersih dan efek transisi lembut pada baris (hover effect).
Mobile Friendly: Dengan pembungkus
table-container, tabel tidak akan hancur saat diakses melalui smartphone.
Kesimpulan
Membuat tabel yang bagus adalah kombinasi dari HTML yang bersih, CSS yang modern, dan sedikit JavaScript untuk pengalaman pengguna yang lebih baik. Dengan menggunakan kode di atas, website Anda kini memiliki dashboard data yang setara dengan aplikasi profesional.
Semoga tutorial ini bermanfaat untuk para pembaca setia Warkasa1919.com! Jika ada pertanyaan, silakan tulis di kolom komentar.
.jpg)
.WebP)
