[TUTORIAL] Cara Membuat Tabel Menu Makanan Khas Nusantara Menggunakan HTML & CSS
Halo sahabat Bagycb! Kembali lagi di portal edukasi dan teknologi kita. Pada kesempatan kali ini, kita akan membahas tutorial praktis membuat Tabel Menu Makanan khas Nusantara menggunakan kombinasi HTML dan CSS.
Jika kamu sedang membuat situs restoran, katering, atau sekadar ingin mengasah keterampilan web development, pembuatan tabel daftar menu dengan penggabungan baris (rowspan) dan kolom (colspan) adalah materi dasar yang sangat penting untuk dikuasai.
Fitur & Keunggulan Desain
- Background Glassmorphism & Backdrop Blur: Memberikan efek kaca transparan yang elegan pada tabel di atas gambar latar.
- Penggabungan Sel (
rowspan&colspan): Mengatur tata letak tabel daftar harga paket secara rapi. - Efek Hover Interaktif (
tr:hover): Baris tabel akan membesar sedikit (scale) dan berubah warna saat kursor diarahkan. - Teks Berjalan (
marquee): Menambahkan dinamika teks pada halaman. - Warna Baris Bervariasi: Memudahkan pembaca membedakan tiap menu makanan.
Kode Lengkap (HTML & CSS)
Silakan copy dan paste kode berikut ke dalam editor teks kamu (seperti VS Code, Notepad++, atau Sublime Text), lalu simpan dengan nama index.html.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Menu Makanan - Bagycb</title>
<style>
body {
background: url('up.jpg') no-repeat center center fixed;
background-size: cover;
font-family: "Poppins", Arial, sans-serif;
color: #fff;
margin: 0;
padding: 30px;
}
h1 {
text-align: center;
margin-bottom: 10px;
font-size: 40px;
font-weight: 700;
letter-spacing: 2px;
text-shadow: 3px 3px 8px #000;
}
.marquee {
width: 400px;
margin: 8px auto;
font-size: 22px;
font-weight: bold;
color: #ffeb3b;
text-shadow: 2px 2px 5px #000;
}
table {
width: 85%;
margin: auto;
border-collapse: collapse;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(6px);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 0 25px rgba(0,0,0,0.7);
}
table th, table td {
padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.25);
font-size: 16px;
}
table th {
background: linear-gradient(45deg, #333, #555);
font-size: 18px;
letter-spacing: 1px;
}
tr img {
border-radius: 10px;
box-shadow: 0 0 10px rgba(255,255,255,0.4);
}
tr {
transition: 0.3s ease;
}
tr:hover {
background-color: rgba(255,255,255,0.15) !important;
transform: scale(1.02);
}
</style>
</head>
<body>
<h1>Menu Makanan</h1>
<div class="marquee"><marquee behavior="alternate">Bagycb</marquee></div>
<div class="marquee"><marquee behavior="alternate">2019</marquee></div>
<table>
<tr>
<th rowspan="2">No</th>
<th rowspan="2">Nama Makanan</th>
<th rowspan="2">Nama Daerah</th>
<th rowspan="2">Foto</th>
<th colspan="3">Harga</th>
</tr>
<tr>
<th>Paket 1</th>
<th>Paket 2</th>
<th>Paket 3</th>
</tr>
<tr style="background-color: #b44ac0; text-align: center;">
<td>1</td>
<td>Gudeg Jogja</td>
<td>Yogyakarta</td>
<td><img src="gudeg1.jpg" width="100" height="100" alt="Gudeg Jogja"></td>
<td>Rp.25.000 <br>isi 1 bungkus</td>
<td>Rp.48.000 <br>isi 2 bungkus</td>
<td>Rp.120.000 <br>isi 5 bungkus</td>
</tr>
<tr style="background-color: #d14a4a; text-align: center;">
<td>2</td>
<td>Sate Madura</td>
<td>Madura</td>
<td><img src="madura.jpg" width="100" height="100" alt="Sate Madura"></td>
<td>Rp.15.000 <br>isi 1 bungkus</td>
<td>Rp.28.000 <br>isi 2 bungkus</td>
<td>Rp.75.000 <br>isi 6 bungkus</td>
</tr>
<tr style="background-color: #4a66d1; text-align: center;">
<td>3</td>
<td>Dodol Garut</td>
<td>Garut</td>
<td><img src="dodol.jpg" width="100" height="100" alt="Dodol Garut"></td>
<td>Rp.27.000 <br>isi 20 pcs</td>
<td>Rp.79.000 <br>isi 60 pcs</td>
<td>Rp.155.000 <br>isi 120 pcs</td>
</tr>
<tr style="background-color: #e3d01b; color:black; text-align:center;">
<td>4</td>
<td>Sosis Solo</td>
<td>Solo</td>
<td><img src="sosis.jpg" width="100" height="100" alt="Sosis Solo"></td>
<td>Rp.30.000 <br>isi 6 pcs</td>
<td>Rp.80.000 <br>isi 18 pcs</td>
<td>Rp.200.000 <br>isi 48 pcs</td>
</tr>
<tr style="background-color: #7a33a8; text-align: center;">
<td>5</td>
<td>Bakpia Pathok</td>
<td>Yogyakarta</td>
<td><img src="bakpia.jpeg" width="100" height="100" alt="Bakpia Pathok"></td>
<td>Rp.30.000 <br>isi 1 pack</td>
<td>Rp.120.000 <br>isi 4 pack</td>
<td>Rp.210.000 <br>isi 8 pack</td>
</tr>
<tr style="background-color: #2ea043; text-align: center;">
<td>6</td>
<td>Telur Bebek</td>
<td>Boyolali</td>
<td><img src="telurb.jpg" width="100" height="100" alt="Telur Bebek"></td>
<td>Rp.28.000 <br>isi 6 pcs</td>
<td>Rp.50.000 <br>isi 12 pcs</td>
<td>Rp.90.000 <br>isi 24 pcs</td>
</tr>
</table>
</body>
</html>Penjelasan Struktur Kode
-
Tag
<table>,<tr>,<th>, dan<td>:<table>digunakan untuk mendeklarasikan tabel.<tr>(Table Row) membuat baris baru.<th>(Table Header) membuat sel judul yang tebal dan berada di tengah secara otomatis.<td>(Table Data) berisi data menu dan detail harganya.
-
Atribut
rowspandancolspan:rowspan="2"menggabungkan 2 baris vertikal pada sel header (seperti No, Nama Makanan).colspan="3"menggabungkan 3 kolom horizontal di bawah header Harga.
-
Gaya Tampilan (CSS Styling):
backdrop-filter: blur(6px)memberikan efek transparan seperti kaca buram di atas background.tr:hovermemberikan animasi interaktif saat kursor mouse diarahkan ke baris menu.- Penggunaan
background-colordinamis membuat daftar makanan tampak atraktif.
Catatan Penting: Pastikan seluruh file gambar (
up.jpg, gudeg1.jpg, madura.jpg, dodol.jpg, sosis.jpg, bakpia.jpeg, dan telurb.jpg) tersimpan di dalam folder yang sama dengan file index.html kamu agar tampilannya muncul sempurna.
Semoga artikel ini bermanfaat! Jika ada pertanyaan mengenai HTML/CSS, silakan tulis di kolom komentar di bawah ya. Selamat mencoba!
0 Response to "Membuat Menu Makanan Menggunakan HTML"
Post a Comment