Belajar membuat tabel pada postingan WordPress dengan HTML salah satu hal penting untuk diketahui para pengguna WordPress yang ingin meningkatkan tampilan dan fungsionalitas konten website. Dalam dunia digital yang penuh dengan informasi, tabel adalah alat yang kuat untuk menyajikan data dengan rapi dan mudah dimengerti.
Dengan memahami cara membuat tabel menggunakan bahasa markup HTML di dalam postingan WordPress, Anda dapat mengorganisir informasi dengan lebih baik, mempercantik tampilan konten Anda, dan membuatnya lebih informatif. Artikel ini akan membantu Anda memahami dasar-dasar pembuatan tabel dengan HTML dan bagaimana mengintegrasikannya dengan WordPress untuk membuat postingan yang lebih menarik dan informatif.
Daftar Isi
1. Contoh Tabel Sederhana dengan HTML
Pada saat anda hendak membuat postingan pada wordpress, silahkan rubah kemode text/html, setelah kode html dimasukkan rubah lagi ke mode visual biar enak mengetik.
<table border="1">
<tr>
<th>Baris 1, Kolom 1</th>
<th>Baris 1, Kolom 2</th>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>BACA JUGA: 5 Langkah Install WordPress di PC&Laptop, Belajar WordPress Dari NOL!
Hasil tabel dari syntax tabel HTML diatas akan terlihat seperti dibawah ini
| Baris 1, Kolom 1 | Baris 1, Kolom 2 |
|---|---|
| Baris 2, Kolom 1 | Baris 2, Kolom 2 |
Bentuk tabel yang masih standar terdiri dari 2 baris dan 2 kolom. Berikut contoh kedua dengan spesifikasi
- Terdiri dari 2 baris
- Dan terdiri dari 3 kolom
Maka untuk membuat tabel dengan spek ini berikut syntax html nya:
<table border="1" cellpadding="10">
<tbody>
<tr>
<th>ini TR 1</th>
<th>Nama Website</th>
<th>Topik</th>
</tr>
<tr>
<td>ini TR 2</td>
<td>www.ppgim.com</td>
<td>Edutech</td>
</tr>
</tbody>
</table>Maka hasilnya akan seperti dibawah ini
| ini TR 1 | Nama Website | Topik |
|---|---|---|
| ini TR 2 | www.ppgim.com | Edutech |
Penjelasan dari syntax html tabel diatas sebagaimana tag <tr> merupakan perintah dalam program HTML untuk membentuk jumlah baris dari atas kebawah.
Sedangkan perintah tag <th> adalah perintah program dalam html membentuk jumlah kolom dari kiri ke kanan atau kesamping untuk judul atau heading pada tabel.
Berikutnya tag<td> untuk perintah membentuk jumlah kolom dari kiri kekanan untuk penyajian data tabel.
<td> sama dengan <th> cuma kalau <th> biasanya dipake untuk judul tabel baris pertama aja selebih nya pake <td>.
Silahkan anda sesuaikan jumlah baris dan jumlah kolom sesuai data yang akan disajikan berapa baris dan berapa kolom, ingat nambah kolom berarti tag <td> yang ditambah, kemudian nambah baris berarti tag <tr> yang ditambah.
BACA JUGA: 15 Plugin SEO WordPress Terbaik di tahun 2023
2. Customize tabel pada postingan wordpress agar tampak dinamis
Beberapa perintah yang perlu ditambahkan untuk menghias tabel seperti:
- width=”100%” – lebar tabel dari kiri kekanan 100% ukuran yang disarankan agar menyesuaikan theme dan device dimana data kita diakses pokok nya auto fix aja 100%.
- border=”1″ ketebalan border tabel 1 pixel
- cellpadding=”10″ – Jarak kata dalam cell 10 pixel, jadi tidak mepet garis kolom cell agak ditengah dia.
- bgcolor=”#06b2b2″ – memberikan warna pada kolom dan baris <th> dan <td>
- Berikut pengaturan rata kiri dan kanan atau tengah hampir sama seperti ngetik di microsoft word.
align=”center” mengatur menjadi rata tengah
align=”left” mengatur menjadi rata kiri
align=”right” mengatur menjadi rata kanan
align=”justify” mengatur rata kiri-kanan
Berikut contoh HTML tabel yang sudah di customize
<table style="width:100%;">
<tbody>
<tr>
<th bgcolor="#06b2b2">Baris 1 (Kolom 1)</th>
<th bgcolor="#06b2b2">Baris 1 (Kolom 2)</th>
<th bgcolor="#06b2b2">Baris 1 (Kolom 3)</th>
</tr>
<tr>
<td bgcolor="#E8E8E8">Baris 2</td>
<td bgcolor="#E8E8E8">www.ppgim.com</td>
<td bgcolor="#E8E8E8">Edutech</td>
</tr>
<tr>
<td bgcolor="#c1dfc4">Baris 3</td>
<td bgcolor="#c1dfc4">www.ppgim.com</td>
<td bgcolor="#c1dfc4">Edutech</td>
</tr>
<tr>
<td bgcolor="#E8E8E8">Baris 4</td>
<td bgcolor="#E8E8E8">www.ppgim.com</td>
<td bgcolor="#E8E8E8">Edutech</td>
</tr>
<tr>
<td bgcolor="#c1dfc4">Baris 5</td>
<td bgcolor="#c1dfc4">www.ppgim.com</td>
<td bgcolor="#c1dfc4">Edutech</td>
</tr>
</tbody>
</table>| Baris 1 (Kolom 1) | Baris 1 (Kolom 2) | Baris 1 (Kolom 3) |
|---|---|---|
| Baris 2 | www.ppgim.com | Edutech |
| Baris 3 | www.ppgim.com | Edutech |
| Baris 4 | www.ppgim.com | Edutech |
| Baris 5 | www.ppgim.com | Edutech |
3. Menggabungkan Sel Kolom dalam Tabel
Untuk menggabungkan cell dua kolom menjadi satu, atau 3 kolom menjadi 1 tambahkan perintah colspan=”2″ (gabungkan cell 2 kolom). Silahkan lihat kode details perintah HTML dibawah ini.
<table border="1" width="100%" cellpadding="10">
<tbody>
<tr>
<th bgcolor="#06b2b2">Baris 1 (Kolom 1)</th>
<th bgcolor="#06b2b2">Baris 1 (Kolom 2)</th>
<th bgcolor="#06b2b2">Baris 1 (Kolom 3)</th>
</tr>
<tr>
<td bgcolor="#E8E8E8">Baris 2</td>
<td bgcolor="#E8E8E8">www.ppgim.com</td>
<td bgcolor="#E8E8E8">Edutech</td>
</tr>
<tr>
<td bgcolor="#c1dfc4">Baris 3</td>
<td bgcolor="#c1dfc4">www.ppgim.com</td>
<td bgcolor="#c1dfc4">Edutech</td>
</tr>
<tr>
<td bgcolor="#E8E8E8">Baris 4</td>
<td bgcolor="#E8E8E8">www.ppgim.com</td>
<td bgcolor="#E8E8E8">www.ppgim.com</td>
</tr>
<tr>
<td bgcolor="#c1dfc4">Baris 5</td>
<td colspan="2" align="center" bgcolor="#c1dfc4">Baris 5, pada kolom 2 dan Kolom 3 gabung</td>
</tr>
</tbody>
</table>BACA JUGA: 5 Cara Cepat Agar Yoast SEO Berwarna Hijau, Simple Banget!
Hasil dari syntax html tabel diatas ini adalah seperti tabel dibawah ini tampak jelas penggabungan kolom nya iyakan
| Baris 1 (Kolom 1) | Baris 1 (Kolom 2) | Baris 1 (Kolom 3) |
|---|---|---|
| Baris 2 | www.ppgim.com | Edutech |
| Baris 3 | www.ppgim.com | Edutech |
| Baris 4 | www.ppgim.com | www.ppgim.com |
| Baris 5 | Baris 5, pada kolom 2 dan kolom 3 gabung, colsspan=”2″ | |
4. Menggabungkan Sel Baris dalam Tabel
Tips pro yang terakhir menggabungkan 2 baris dari atas ke bawah, perbedaan nya kali ini kita menggunakan perintah rowspan=”2″ (gabungkan cell 2 baris) Silahkan kopi kode berikut ke postingan anda untuk melihat hasil nya seperti dibawah ini
<table style="width: 100%;">
<tbody>
<tr>
<th bgcolor="#06b2b2">Baris 1 (Kolom 1)</th>
<th bgcolor="#06b2b2">Baris 1 (Kolom 2)</th>
<th bgcolor="#06b2b2">Baris 1 (Kolom 3)</th>
</tr>
<tr>
<td bgcolor="#E8E8E8">Baris 2</td>
<td bgcolor="#E8E8E8">www.ppgim.com</td>
<td bgcolor="#E8E8E8">Edutech</td>
</tr>
<tr>
<td bgcolor="#c1dfc4">Baris 3</td>
<td bgcolor="#c1dfc4">www.ppgim.com</td>
<td bgcolor="#c1dfc4">Edutech</td>
</tr>
<tr>
<td bgcolor="#E8E8E8">Baris 4</td>
<td bgcolor="#E8E8E8">www.ppgim.com</td>
<td rowspan="2" align="right" bgcolor="#E8E8E8">Ini pake rowspan="2"</td>
</tr>
<tr>
<td bgcolor="#c1dfc4">Baris 5</td>
<td bgcolor="#c1dfc4">www.ppgim.com</td>
</tr>
</tbody>
</table>Menggabungkan cell baris 4 dan baris 5 pada kolom 3, hasil dari kode diatas, dan disini saya pake rata kanan, yakni peritah align=”right”. Semoga bisa di pahami perbedaan antara rowspan dan colspan.
| Baris 1 (Kolom 1) | Baris 1 (Kolom 2) | Baris 1 (Kolom 3) |
|---|---|---|
| Baris 2 | www.ppgim.com | Edutech |
| Baris 3 | www.ppgim.com | Edutech |
| Baris 4 | www.ppgim.com | Ini pake rowspan=”2″ |
| Baris 5 | www.ppgim.com |
5. Akhir kata terkait Membuat Tabel yang Dinamis pada WordPress
Semoga contoh diatas bisa dipraktekan pada saat sobat wordpress hendak membuat tabel dalam postingan, jadi penyusunan data nya rapi dengan kolom dan baris sehingga mudah dibaca pengunjung.
Membuat tabel dengan manual kode HTML ini sifatnya hanya opsional, jika anda tidak mau ribet silahkan menggunakan plugin membuat tabel otomatis tanpa koding, karena mimin sendiri tidak suka kebanyakan plugin kahwatir tambah berat website nantik, maka kami memilih tabel manual aja toh tidak semua artikel menggunakan tabel.
Sekiranya ada masukan kritik dan saran jangan sungkan memberikan komentar agar kami bisa tambahkan dan perbaiki demi kelancaran bersama terimakasih 🙂
