belajar membuat tabel di blog dengan css
.webp "Belajar Membuat Tabel di Blog")
Membuat tabel di dalam postingan blog mungkin terlihat sulit bagi pemula, namun sebenarnya sangat sederhana jika kita memahami dasarnya. Tabel berfungsi untuk merapikan data, daftar harga, atau spesifikasi barang agar lebih profesional dan mudah dibaca oleh pengunjung.
Langkah 1: Memasang CSS Tabel
Pertama, kita perlu mengatur tampilan tabel agar terlihat menarik. Silakan buka dashboard Blogger > Tema > Edit HTML. Cari kode ]]></b:skin> dan letakkan kode CSS berikut tepat di atasnya:
/* CSS Tabel Postingan ABM */
.table-container { overflow-x: auto; margin: 20px 0; }
table.abm-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.abm-table th { background: #ff6600; color: #fff; padding: 12px; text-align: center; font-weight: bold; text-transform: uppercase; font-size: 14px; }
.abm-table td { padding: 10px; border-bottom: 1px solid #eee; text-align: center; font-size: 14px; }
.abm-table tr:nth-child(even) { background: #f9f9f9; }
.abm-table tr:hover { background: #f1f1f1; transition: 0.3s; }
Langkah 2: Menaruh Tabel di Postingan
Setelah CSS terpasang, sekarang buat postingan baru. Ubah mode penulisan dari Compose ke HTML View. Gunakan struktur kode berikut:
<div class="table-container">
<table class="abm-table">
<thead>
<tr>
<th>Nama Komponen</th>
<th>Status</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kiprok Tiger</td>
<td>Ready</td>
<td>Original AHM</td>
</tr>
<tr>
<td>Koil Megapro</td>
<td>Ready</td>
<td>Support DC</td>
</tr>
</tbody>
</table>
</div>
Contoh Hasil Tabel
Berikut adalah contoh tampilan tabel yang sudah kita buat tadi:
| ABM 1 | ABM 2 | ABM 3 |
|---|---|---|
| Blogger Otodidak | Cuplisotw | OtoABM |
| Belajar Mesin | Gado-gado | Info Otomotif |
Dengan menggunakan div class="table-container", tabel kamu akan otomatis bisa digeser (scroll) ke samping saat dibuka di smartphone yang layarnya kecil. Jadi tulisanmu tidak akan berantakan.
SITUS SERBA SERBI OTODIDAK