Cara Membuat Tabel Sederhana di Wordpress Tanpa Plugin

Membuat tabel akan terasa mudah ketika menggunakan Perangkat Lunak atau Software untuk aplikasi Office seperti Word, Powerpoint atau Excel karena ada menu yang dibuat khusus untuk membuat tabel. Akan berbeda cerita ketika membut tabel untuk ditampilkan pada sebuah halaman website, perlu keahlian tambahan untuk mengerjakannya bagi seorang programmer itu akan terasa mudah namun bagi orang awam akan bingung dengan barisan kode yang harus diketik dan dipahami.

Ada banyak cara untuk membuat tabel tentunya yang paling mudah jika membuat website dan berbasis Wordpress bisa menggunakan plugin gratis dan akan lebih cepat, namun dengan penggunaaan plugin yang banyak akan membebani server hosting dan kecepatan website akan sedikit berkurang. Untuk pekerjaan yang sederhana sebaiknya tanpa plugin, cukup dengan memodifikasi kode HTML sederhana tabel sudah bisa ditampilkan.

Membuat tabel di Website Wordpress

Sebelum membuat tabel sebaiknya dipahami kode-kode HTML yang akan digunakan agar ketika memodifikasi tidak bingung, untuk mengetik kode HTML silakan ubah dari mode visual ke mode text pada pengaturan wordpress  dan tentunya berhasil berikut ini keterangannya:

1. <td> untuk menampilkan data tabel dan diketik diawal.
2. <table> untuk membuat tabel (diketik diawal)
3. <tr> difungsikan untuk membuat baris dalam tabel.
4. </td>, </table>, </tr> untuk menutup kode awal diketik diakhir.
5. Contoh kode warna hex

untuk kode warna lainnya silakan cari di mesin pencari google dengan kata kunci “daftar kode warna html“.

Lanjut pada contoh tabel sederhana:

Contoh tabel 1

dan berikut ini kodenya:

<table>
<tbody>
<tr>
<td>No</td>
<td>Provinsi</td>
<td>Gubernur</td>
</tr>
<tr>
<td>1</td>
<td>Jawa Barat</td>
<td>Ridwan Kamil</td>
</tr>
<tr>
<td>2</td>
<td>Jawa Tengah</td>
<td>Ganjar Pranowo</td>
</tr>
</tbody>
</table>
<table border=”1″ width=”100%” bgcolor=”#7FFFD4″>
<tbody>
<tr>

Contoh tabel 2

Berikut ini kodenya:

<table border=”1″ width=”100%” bgcolor=”#7FFFD4″>
<tbody>
<tr>
<td style=”text-align: center;” align=”center” valign=”top” bgcolor=”#F5F5DC” width=”auto”><strong><span style=”color: #000000;”>No</span></strong></td>
<td style=”text-align: center;” align=”center” valign=”top” bgcolor=”#F5F5DC” width=”auto”><strong><span style=”color: #000000;”>Nama</span></strong></td>
<td style=”text-align: center;” align=”center” valign=”top” bgcolor=”#F5F5DC” width=”auto”><strong><span style=”color: #000000;”>Kelas</span></strong></td>
<td style=”text-align: center;” align=”center” valign=”top” bgcolor=”#F5F5DC” width=”auto”><strong><span style=”color: #000000;”>Jurusan</span></strong></td>
</tr>
<tr>
<td style=”text-align: center;” align=”center” valign=”top” bgcolor=”#FFE4C4″ width=”auto”>1</td>
<td style=”text-align: left;” align=”center” valign=”top” bgcolor=”#FFE4C4″ width=”auto”>Nana</td>
<td style=”text-align: center;” align=”center” valign=”top” bgcolor=”#FFE4C4″ width=”auto”>XI</td>
<td style=”text-align: center;” align=”center” valign=”top” bgcolor=”#FFE4C4″ width=”auto”>IPA</td>
</tr>
<tr>
<td style=”text-align: center;” align=”center” valign=”top” bgcolor=”#DEB887″ width=”auto”>2</td>
<td style=”text-align: left;” align=”center” valign=”top” bgcolor=”#DEB887″ width=”auto”>Mumu</td>
<td style=”text-align: center;” align=”center” valign=”top” bgcolor=”#DEB887″ width=”auto”>XII</td>
<td style=”text-align: center;” align=”center” valign=”top” bgcolor=”#DEB887″ width=”auto”>IPS</td>
</tr>
<tr>
<td style=”text-align: center;” align=”center” valign=”top” bgcolor=”#D2691E” width=”auto”>3</td>
<td style=”text-align: left;” align=”center” valign=”top” bgcolor=”#D2691E” width=”auto”>Yana</td>
<td style=”text-align: center;” align=”center” valign=”top” bgcolor=”#D2691E” width=”auto”>XI</td>
<td style=”text-align: center;” align=”center” valign=”top” bgcolor=”#D2691E” width=”auto”>IPA</td>
</tr>
</tbody>
</table>

sedikit tambahan:

1. “table border” untuk ketebalan garis tabel
2. “text-align” untuk mengatur posisi tulisan
3. “center” untuk posisi tulisan berada di tengah
4. “left” untuk posisi tulisan rata kiri
5. “right” untuk posisi tulisan kanan
6. “width” mengatur lebar kolom

Untuk kode HTML kedua ada tambahan warna dalam tabel sehingga tampilan lebih bagus, jika sudah selesai silakan publish. Silakan teman-teman praktikan, semoga artikel Membuat Tabel di Wordpress ini bermanfaat.

Terima kasih sudah mampir di Website kami.