Halo pembaca! terutama pada rekan blogger atau siapapun Anda yang sekarang sedang membangun Blog atau website, baik web pendidikan atau web kesehatan atau tentang topik apapun, yang adakalanya, dalam postingan tersebut diperlukan mencantumkan tabel sebagai bagian dari konten yang akan dipublikasikan. Karena tool atau tombol untuk membuat tabel secara langsung tidak tersedia di editor postingan Blogger, cara terbaik untuk membuatnya adalah dengan menggunakan kode HTML. Ini mungkin terkesan sedikit teknis, tetapi prosesnya cukup mudah dengan kode dasar.
Selamat datang di panduan lengkap tentang topik ini. Artikel kali ini akan membahas secara mendalam tentang cara pembuatan tabel dan variasinya, terutama untuk postingan di blogger. Berikut adalah langkah-langkah dan kode yang bisa Anda gunakan:
🛠️ Langkah-Langkah Membuat Tabel di Postingan Blogger
Supaya tidak salah langkah dalam membuat tabel simak penjelasan langkah demi langkah di bawah ini dengan teliti
1. Buka Mode HTML Editor
Saat Anda membuat atau mengedit postingan di Blogger:
- Pilih opsi HTML view (Tampilan HTML) atau Compose view (Tampilan Tulis) lalu klik tombol < > atau pensil (tergantung versi editor Anda) untuk beralih ke mode pengeditan kode sumber.
2. Tempelkan Kode Dasar Tabel
Salin dan tempelkan kode HTML dasar di bawah ini ke tempat Anda ingin tabel itu muncul di dalam postingan Anda.
HTML
<table style="width: 100%;
border-collapse: collapse; border: 1px solid #ccc;">
<thead>
<tr>
<th style="border: 1px solid #ccc; padding:
8px; background-color: #f2f2f2;">Header Kolom 1</th>
<th style="border: 1px solid #ccc; padding:
8px; background-color: #f2f2f2;">Header Kolom 2</th>
<th style="border: 1px solid #ccc; padding:
8px; background-color: #f2f2f2;">Header Kolom 3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid #ccc; padding:
8px;">Baris
1, Data 1</td>
<td style="border: 1px solid #ccc; padding:
8px;">Baris
1, Data 2</td>
<td style="border: 1px solid #ccc; padding:
8px;">Baris
1, Data 3</td>
</tr>
<tr>
<td style="border: 1px solid #ccc; padding:
8px;">Baris
2, Data 1</td>
<td style="border: 1px solid #ccc; padding:
8px;">Baris
2, Data 2</td>
<td style="border: 1px solid #ccc; padding:
8px;">Baris
2, Data 3</td>
</tr>
</tbody>
</table>
3. Modifikasi Isi Tabel
Untuk membuat atau mendifikasinya Anda perlu mengenali kode tabel, berikut di bawah ini:
| Tag HTML | Deskripsi |
|---|---|
| <table> | Membuka dan menutup tabel secara keseluruhan |
| <thead> | Bagian opsional untuk header tabel (di mana Anda meletakkan judul kolom). |
| <tbody> | Bagian utama untuk konten/data tabel. |
| <tr> | Mendefinisikan satu baris (row) dalam tabel. |
| <th> | Mendefinisikan header kolom (column header). |
| <td> | Mendefinisikan data sel (cell data) normal. |
Penjelasan singkat dan Krusial
- Mengganti Header: Ubah teks di antara tag
<th>...</th> - Mengganti Data: Ubah teks di antara tag
<td>...</td> - Menambah Baris: Salin seluruh baris kode
<tr>...</tr>dan tempelkan di dalam<tbody>...</tbody>. - Menambah Kolom: Tambahkan pasangan tag
<th>...<th>(untuk header) atau<td>...<td>(untuk data) di setiap baris yang ada.
4. Periksa Hasilnya
Setelah memodifikasi, beralihlah kembali ke Compose view (Tampilan Tulis) untuk melihat pratinjau tabel Anda.
🎨 Tips Penyesuaian (Gaya CSS Inline)
Kode yang di atas sudah termasuk gaya CSS dasar (inline style) untuk membuatnya terlihat rapi:
style="width: 100%;" pada tag<table>membuat tabel menyesuaikan lebar penuh postingan. Anda bisa mengubah 100% menjadi lebar spesifik, misalnya500px.border: 1px solid #ccc;pada<table>,<th>, dan<td>memberikan garis batas tipis. Anda bisa menghapusnya jika Anda tidak ingin ada garis tepi.padding: 8px;memberikan ruang di dalam sel agar teks tidak terlalu menempel pada garis batas.background-color: #f2f2f2;pada<th>memberikan warna abu-abu muda untuk header agar lebih menonjol.
Anda bisa menyesuaikan nilai-nilai CSS tersebut sesuai dengan selera desain blog Anda!
Sebagai pilihan dan sesuai dengan gaya yang paling cocok dengan blog anda, berikut ini contoh kode tabel dengan banyak kolom atau baris serta garis tabel doble
Membuat tabel dengan garis ganda (double border) memerlukan sedikit penyesuaian pada kode HTML/CSS yang saya berikan sebelumnya.
Untuk menghasilkan efek garis ganda, kita akan memanfaatkan dua properti CSS utama:
border-collapse: separate;(menggunakan garis terpisah, bukan digabungkan).border-spacing: Xpx;(memberikan ruang di antara garis, inilah yang menciptakan tampilan "ganda").
Berikut adalah kode HTML/CSS lengkap untuk tabel 3 kolom dan 4 baris dengan garis ganda yang bisa Anda tempelkan di mode HTML view di Blogger:
HTML
<table style="width: 100%;
border-collapse: separate; border-spacing: 5px;">
<thead>
<tr>
<th style="border: 2px solid #333; padding:
10px; background-color: #e0e0e0;">Kolom Keterangan</th>
<th style="border: 2px solid #333; padding:
10px; background-color: #e0e0e0;">Kolom Data 1</th>
<th style="border: 2px solid #333; padding:
10px; background-color: #e0e0e0;">Kolom Data 2</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 2px solid #333; padding:
10px;">Baris
1</td>
<td style="border: 2px solid #333; padding:
10px;">Isi
B1, D1</td>
<td style="border: 2px solid #333; padding:
10px;">Isi
B1, D2</td>
</tr>
<tr>
<td style="border: 2px solid #333; padding:
10px;">Baris
2</td>
<td style="border: 2px solid #333; padding:
10px;">Isi
B2, D1</td>
<td style="border: 2px solid #333; padding:
10px;">Isi
B2, D2</td>
</tr>
<tr>
<td style="border: 2px solid #333; padding:
10px;">Baris
3</td>
<td style="border: 2px solid #333; padding:
10px;">Isi
B3, D1</td>
<td style="border: 2px solid #333; padding:
10px;">Isi
B3, D2</td>
</tr>
</tbody>
</table>
🔎 Penjelasan Perubahan Kunci
Perubahan penting yang menghasilkan garis ganda ada pada tag <table> di baris pertama:
| Properti CSS | Nilai | Fungsi |
|---|---|---|
| border-collapse | separate | Memastikan garis batas setiap sel tidak digabungkan, yang merupakan syarat untuk garis ganda. |
| border-spacing | 5px | Ini adalah jarak antara garis batas setiap sel. Nilai 5px inilah yang menciptakan jarak visual sehingga terlihat seperti dua garis yang terpisah. |
| border | 2px solid #333 | Garis yang lebih tebal (2px) dan warna lebih gelap (#333) saya tambahkan pada semua sel (<th> dan <td>) agar efek garis ganda lebih menonjol. |
Struktur:
- Kolom (3): Ada tiga pasangan
<th>di bagian<thead>dan tiga pasangan<td>di setiap<tr>. - Baris (4): Terdiri dari satu baris header (
<thead>) dan tiga baris data (<tbody>), sehingga totalnya menjadi 4 baris.
Anda tinggal mengganti teks "Kolom Keterangan," "Isi B1, D1," dan seterusnya dengan data yang Anda butuhkan.
✅ Alternatif: Tabel Garis Tunggal Tebal (Single Thick Border)
Model ini terlihat lebih bersih dan profesional. Untuk membuatnya, kita menggunakan properti border-collapse: collapse; yang akan menggabungkan semua garis batas sel menjadi satu garis tebal yang rapi.
📝 Kode HTML untuk Garis Tunggal Tebal
HTML
<table style="width: 100%;
border-collapse: collapse;">
<thead>
<tr>
<th style="border: 3px solid #000; padding:
12px; background-color: #f2f2f2;">HEADER 1</th>
<th style="border: 3px solid #000; padding:
12px; background-color: #f2f2f2;">HEADER 2</th>
<th style="border: 3px solid #000; padding:
12px; background-color: #f2f2f2;">HEADER 3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid #000; padding:
12px;">Data
Baris 1-1</td>
<td style="border: 1px solid #000; padding:
12px;">Data
Baris 1-2</td>
<td style="border: 1px solid #000; padding:
12px;">Data
Baris 1-3</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding:
12px;">Data
Baris 2-1</td>
<td style="border: 1px solid #000; padding:
12px;">Data
Baris 2-2</td>
<td style="border: 1px solid #000; padding:
12px;">Data
Baris 2-3</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding:
12px;">Data
Baris 3-1</td>
<td style="border: 1px solid #000; padding:
12px;">Data
Baris 3-2</td>
<td style="border: 1px solid #000; padding:
12px;">Data
Baris 3-3</td>
</tr>
</tbody>
</table>
💡 Penjelasan Gaya (Styling):
border-collapse: collapse;: Ini adalah kunci untuk memastikan hanya ada satu garis antara sel.border: 3px solid #000;: Saya menggunakan garis yang lebih tebal (3px) dan warna hitam pekat(#000)padaheader (<th>)agar bagian atas tabel terlihat kokoh.border: 1px solid #000;: Untuk sel data normal (<td>), saya menggunakan garis yang lebih tipis (1px) agar data di dalamnya lebih mudah dibaca, tetapi tetap menggunakan warna hitam(#000)agar senada.
Memiliki dua alternatif model tabel (garis ganda dan garis tunggal tebal) akan memberi Anda fleksibilitas yang lebih besar dalam mendesain postingan Anda.
"Bagikan artikel ini jika bermanfaat!" atau "Tinggalkan komentar sebagai bentuk dukungan Anda"
Jangan lupa cek artikel kami yang lain: Ukuran Image Ideal untuk Artikel Blog.
.webp)
No comments:
Post a Comment