Cara Membuat Tabel di Blog (Panduan Lengkap + Contoh)
Tabel sangat berguna untuk menampilkan informasi seperti daftar harga, spesifikasi motor, atau data penting lainnya. Karena Blogger tidak menyediakan fitur “Insert Table”, kita perlu memakai kode HTML. Berikut contoh-contoh tabel lengkap beserta tampilannya.
1. Tabel HTML Dasar
Ini tabel paling sederhana, cocok untuk pemula.
Kode HTML:<table border="1" cellspacing="0" cellpadding="8" style="border-collapse:collapse;
width:100%;">
<tr>
<th>No</th>
<th>Item</th>
<th>Harga</th>
</tr>
<tr>
<td>1</td>
<td>Filter Oli</td>
<td>Rp 25.000</td>
</tr>
</table>
| No | Item | Harga |
|---|---|---|
| 1 | Filter Oli | Rp 25.000 |
2. Tabel dengan Header Berwarna
Cocok untuk artikel harga atau spesifikasi.
Kode HTML:<table border="1" cellspacing="0" cellpadding="8"
style="border-collapse:collapse; max-width:350px; width:100%; margin:auto;">
<tr style="background:#f2f2f2; text-align:center;">
<th>No</th>
<th>Sparepart</th>
<th>Harga</th>
</tr>
<tr>
<td>1</td>
<td>Busi NGK</td>
<td>Rp 20.000</td>
</tr>
</table>
| No | Sparepart | Harga |
|---|---|---|
| 1 | Busi NGK | Rp 20.000 |
| 2 | Oli MPX 2 | Rp 39.000 |
3. Tabel Zebra (Strip Selang-Seling)
Sering dipakai di website profesional karena enak dibaca.
Kode HTML:<table style="width:100%; border-collapse:collapse;">
<tr style="background:#333; color:#fff;">
<th>No</th>
<th>Nama Produk</th>
<th>Harga</th>
</tr>
<tr style="background:#fafafa;">
<td>1</td>
<td>Aki Motor</td>
<td>Rp 165.000</td>
</tr>
</table>
| No | Nama Produk | Harga |
|---|---|---|
| 1 | Aki Motor | Rp 165.000 |
| 2 | Kampas Rem | Rp 35.000 |
4. Tabel Dark Mode
Kode HTML:<table style="width:100%; border-collapse:collapse; background:#222; color:#fff;">
<tr style="background:#444;">
<th>Tipe</th>
<th>Nilai</th>
</tr>
</table>
| Tipe | Nilai |
|---|---|
| Kompresi | 10:1 |
| Isi Silinder | 150 cc |
5. Tabel Responsif (Bisa Geser di HP)
<div style="overflow-x:auto;"> ... </div>
| Kode | Nama Barang | Harga | Stok |
|---|---|---|---|
| SP-01 | Oli Yamalube | Rp 38.000 | Tersedia |
6. Contoh Tabel Nota Bengkel (Siap Pakai)
ABM GARAGE
Jl. Supit Urang Mipitan No. 123, Kota Kediri
Telp/WA: 0812-3456 .....
Email: abmgarage@example.com
| Nomor Nota | : INV-00125 |
| Tanggal | : 22 Mar 2023 |
| Nama Pelanggan | : P. Dory |
| No | Nama Barang / Jasa | Qty | Harga | Subtotal |
|---|---|---|---|---|
| 1 | Ganti Oli Mesin | 1 | Rp 38.000 | Rp 38.000 |
| 2 | Busi NGK | 1 | Rp 22.000 | Rp 22.000 |
| Total | Rp 60.000 | |||
Terima kasih telah melakukan servis di ABM Garage
Artikel oleh ABM — Panduan teknis
