Home / WordPress / Begini Cara Membuat Tabel Di WordPress Tanpa Plugin

Begini Cara Membuat Tabel Di WordPress Tanpa Plugin

Begini Cara Membuat Tabel Di WordPress Tanpa Plugin – Sahabat Info Menarik kesempatan ini saya akan berbagi cara membuat tabel di WordPress. Cara yang akan saya share dengan cara manual atau menggunakan kode HTML. Artinya tabel yang akan dibuat hanya menggunakan kode HTML tanpa Plugin.

Kode HTML untuk membuat tabel di WordPress ini bisa diterapkan di WordPress.org dan juga WordPress.com. Walaupun untuk WordPress Self Hosting jika tidak mau repot dengan edit kode HTML bisa menggunakan berbagai macam pilihan Plugin, diantarannya Plugin Table Press.

Baca Juga : Cara Cepat Mengganti Font Blog WordPress

Membuat tabel di WordPress bisa juga dengan melakukan copy paste dari program Microsoft Word. Namun disini saya tidak akan menerangkan cara tersebut. Disini saya akan menerangkan cara membuat tabel di WordPress dengan menggunakan kode HTML saja.

Saya sarankan bagi pengguna WordPress domain TLD, sebaiknya menggunakan trik ini juga tanpa plugin. Karena akan mengurangi beban loading bandwith hosting.

Cara Membuat Tabel Di WordPress Tanpa Plugin

Pada dasarnya membuat tabel Di WordPress menggunakan kode HTML seperti ini :

<table width="100%" border="1" bgcolor="#000000">
<tbody>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
</tr>
</tbody>
</table>

Untuk catatan dan perlu diperhatikan kode HTML diatas warna merah, Anda sesuaikan sendiri. Kode HTML tersebut meski ditempatkan pada mode Text bukan Visual.

Dari kode HTML diatas, tabel yang dihasilkan seperti ini :

Tulisan Anda

Untuk satu kolom tabel, memiliki kode HTML seperti ini :

<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>

Jadi jika Anda ingin menambah jumlah kolom tabel, maka yang diperbanyak adalah kode HTML tersebut diatas. Contoh :

Tulisan Anda Tulisan Anda Tulisan Anda Tulisan Anda

Maka kode HTML-nya adalah kira-kira seperti ini :

<table width="100%" border="1" bgcolor="#000000">
<tbody>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
</tr>
</tbody>
</table>

Selanjutnya, jika Anda ingin menambahkan baris tabel, tempatkan kode HTML diatas dengan diapit kode HTML seperti ini :

<tr>Kode HTML Table</tr>

Contoh :

Tulisan Anda
Tulisan Anda
Tulisan Anda
Tulisan Anda

Maka kode HTML-nya adalah kira-kira seperti ini :

<table width="100%" border="1" bgcolor="#000000">
<tbody>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
</tr>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
</tr>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
</tr>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
</tr>
</tbody>
</table>

Agar terlihat lebih menarik dan unik, Anda bisa memodifikasi tabel dengan diberi warna background. Cara memberi background pada tabel kode HTML-nya seperti di bawah ini :

<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>

bgcolor="#ffffff" = Untuk warna Background
style="color: #000000;" = Untuk warna Huruf

Sedangkan untuk kode masing-masing warna, bisa Anda lihat pada halaman Kode Warna blog ini. Berikut contoh tabel yang sudah dimodifikasi dengan diberi warna background.

No Nama Tempat & Tanggal Lahir Alamat
1 Muhamad Rusdi Bandung, 23 Januari 2002 Cianjur Selatan
2 Agung Gumelar Cianjur, 12 Desember 2003 Bandung Barat
3 Nanda Dewi Saputra Jakarta, 10 Juli 2000 Jakarta Utara
4 Muhammad Kurniawan Bogor, 11 Nopember 2001 Bogor
5 Prabowo Yudhoyono Sukabumi, 08 Oktober 2004 Sukabumi

Tabel diatas kode HTML-nya seperti ini :

<table border="1" width="100%" bgcolor="#000000">
 <tbody>
 <tr>
 <td style="text-align: center;" align="center" valign="top" bgcolor="#A5FF8A" width="auto"><strong><span style="color: #000000;">No</span></strong></td>
 <td style="text-align: center;" align="center" valign="top" bgcolor="#A5FF8A" width="auto"><strong><span style="color: #000000;">Nama</span></strong></td>
 <td style="text-align: center;" align="center" valign="top" bgcolor="#A5FF8A" width="auto"><strong><span style="color: #000000;">Tempat &amp; Tanggal Lahir</span></strong></td>
 <td style="text-align: center;" align="center" valign="top" bgcolor="#A5FF8A" width="auto"><strong><span style="color: #000000;">Alamat</span></strong></td>
 </tr>
 <tr>
 <td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto">1</td>
 <td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Muhamad Rusdi</td>
 <td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Bandung, 23 Januari 2002</td>
 <td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Cianjur Selatan</td>
 </tr>
 <tr>
 <td style="text-align: center;" align="center" valign="top" bgcolor="EFD7FF" width="auto">2</td>
 <td style="text-align: left;" align="center" valign="top" bgcolor="EFD7FF" width="auto">Agung Gumelar</td>
 <td style="text-align: left;" align="center" valign="top" bgcolor="EFD7FF" width="auto">Cianjur, 12 Desember 2003</td>
 <td style="text-align: left;" align="center" valign="top" bgcolor="EFD7FF" width="auto">Bandung Barat</td>
 </tr>
 <tr>
 <td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto">3</td>
 <td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Nanda Dewi Saputra</td>
 <td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Jakarta, 10 Juli 2000</td>
 <td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Jakarta Utara</td>
 </tr>
 <tr>
 <td style="text-align: center;" align="center" valign="top" bgcolor="66CCFF" width="auto">4</td>
 <td style="text-align: left;" align="center" valign="top" bgcolor="66CCFF" width="auto">Muhammad Kurniawan</td>
 <td style="text-align: left;" align="center" valign="top" bgcolor="66CCFF" width="auto">Bogor, 11 Nopember 2001</td>
 <td style="text-align: left;" align="center" valign="top" bgcolor="66CCFF" width="auto">Bogor</td>
 </tr>
 <tr>
 <td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto">5</td>
 <td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Prabowo Yudhoyono</td>
 <td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Sukabumi, 08 Oktober 2004</td>
 <td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Sukabumi</td>
 </tr>
 </tbody>
 </table>

Bagaimana mudah bukan Cara Membuat Tabel Di WordPress Tanpa Plugin ? Silahkan modifikasi lebih menarik lagi tabelnya.

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

11 comments

  1. silahkan disimak saja mba tulisannya dan semoga bermanfa’at …

  2. Pak. Klo seandainya model tabel untuk tampak kolom atas adalah judulnya. Dan selanjutnya mengikuti data

  3. cara cari code warnanya dimana atau bagaimana mas ?

  4. wah sangat bermanfaat artikelnya, langsung praktek, tks infonya mas :)

  5. pak ..saya mau bertanya ..saya membuat shop online..nah syaa membutuhkan widget updet pengirimannya ..apakah bisa data dari tbel di jadikan isi yg di tampilka widget contohnya seperti ini pak
    sambalmertua.com yg widget update pengiriman
    tolong di balas ke email saya pak
    [email protected]

    • Itu juga Update Pengirimannya sudah bagus mas, yang ditampilkan di sidebar. Lalu maksud yang mas inginkan bagaimana ya? Apakah semua list pengirimannya ingin ditampilkan menggunakan tabel atau bagaimana?

  6. Salam Mas Bro

    Hahaha, akhirnya ketemu juga.
    Kalau mau dikasih link trus kalau kursor geser ke arah link dan berubah warna.
    Itu gimana kodenya Mas Bro?

    Mauliate
    Terimakasih

    • Membuat link di tabel sama saja gan kayak membuat link di postingan. Blok huruf dan klik pilih insert link yang di Editor Post. Membuat link berubah warna saat kursor diarahkan itu mainnya dengan CSS gan, tepatnya lagi agan harus mengubah struktur kode hover yg di style.css.

  7. makasih gan keren, tapi gan itu klo tampil di hape mobile frienly gak ya? saya gunain cara gitu di buka di hape ada yg kegedean tabelnya ,, ada cara lain gak ya

Leave a Reply

Your email address will not be published. Required fields are marked *