Tips Pro: Membuat Tabel yang Dinamis pada WordPress dengan Kode HTML

Tips Pro Membuat Tabel yang Dinamis pada WordPress dengan Kode HTML
Cover img oleh Lukas dari Pixabay

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.

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.

Masukkan kode html tabel dibawah ini didalam postingan wordpress Anda
<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 🙂

Exit mobile version