Bagaimana Cara Membuat Tabel di Blog Dengan Mudah
Wednesday, October 12, 2016
Edit
Pada artikel kali ini saya akan memberikan sedikit cara untuk memasang tabel yang dapat anda pasang di blog atau di wodpres pribadi anda.
Banyak orang saat ingin membuat tabel harus menggunakan microsoft word dahulu, memang menggunakan microsoft word juga bisa di gunakan untuk membuat tabel di blog namun jika melihat hasilnya akan mengecewakan dan sulit untuk di katakan.
Banyak orang saat ingin membuat tabel harus menggunakan microsoft word dahulu, memang menggunakan microsoft word juga bisa di gunakan untuk membuat tabel di blog namun jika melihat hasilnya akan mengecewakan dan sulit untuk di katakan.
Sebelum membuat artikel ini saya juga belum tahu cara membuat tabel di blog namun setelah saya searching di blog orang barat dan sayapun mendapatkan cara yang paling gampang dan mudah untuk di terapkan bagi anda pemula di blog.
Tanpa banyak basa-basi mari simak tutorialnya saja agar anda dapat memahaminya.
Cara Membuat Tabel di Blog
Yang perlu anda perhatikan sebelum membuat tabel adalah Code dan letak code yang akan anda masukkan nantinya.
Untuk codenya anda cukup membutuhkan code berikut:
<table> dan </table>
<tr> dan </tr>
<td> dan </td>
Nah codenya adalah yang di atas itu, untuk memasukkannya anda bisa tekan HTML di bagian atas postingan yang nantinya ada dua pilihan yaitu compose dan HTML, nah di bagian HTML itu masukkan code yang tadi namun sebelumnya anda bisa menekan enter di bagian awal dalam menulis artikel kira-kira 5x tekan enter agar anda bisa mengetahui mana code penyambungan awal dan mana code akhir dari sebuah postingan.
Mau Tema Line Gratis: Download 300 Tema Line Gratis
Jika sudah menekan enter 5x maka akan muncul di bagian html </br> nah </br> ini adalah hasil enter anda masukkan code berikut ini, karena code yang di atas tadi hanya contoh code satu kolom dengan satu tabel.
Ada tambahan untuk anda yang ingin membuat beberapa kolom.
Untuk membuat 2kolom 1 tabel anda bisa masukkan code berikut ini.
Untuk codenya anda cukup membutuhkan code berikut:
<table> dan </table>
<tr> dan </tr>
<td> dan </td>
Nah codenya adalah yang di atas itu, untuk memasukkannya anda bisa tekan HTML di bagian atas postingan yang nantinya ada dua pilihan yaitu compose dan HTML, nah di bagian HTML itu masukkan code yang tadi namun sebelumnya anda bisa menekan enter di bagian awal dalam menulis artikel kira-kira 5x tekan enter agar anda bisa mengetahui mana code penyambungan awal dan mana code akhir dari sebuah postingan.
Mau Tema Line Gratis: Download 300 Tema Line Gratis
Jika sudah menekan enter 5x maka akan muncul di bagian html </br> nah </br> ini adalah hasil enter anda masukkan code berikut ini, karena code yang di atas tadi hanya contoh code satu kolom dengan satu tabel.
Ada tambahan untuk anda yang ingin membuat beberapa kolom.
Untuk membuat 2kolom 1 tabel anda bisa masukkan code berikut ini.
<table width="500" border="1">
<tr>
<td>Kolom 1 </td>
<td>Kolom 2 </td>
</tr>
</table>
<tr>
<td>Kolom 1 </td>
<td>Kolom 2 </td>
</tr>
</table>
Maka hasilnya akan seperti ini.
|
Nah itu adalah cara untuk memasukkan 1 tabel dengan dua kolom, jika anda ingin memasukan satu kolom lagi anda cukup menambahkan <td>Kolom3</td> tepat di atas </tr> maka jika sudah anda tambahkan beginilah hasilnya:
|
Ya,tentu saja bisa namun anda cukup menambahkan sedikit code lagi di dalamnya, begini contoh codenya:
<table width="500" border="1">
<tr>
<td>Kolom 1 A </td>
<td>Kolom 1 B </td>
</tr>
<tr>
<td>Kolom 2 A </td>
<td>Kolom 2 B </td>
</tr>
</table>
<tr>
<td>Kolom 1 A </td>
<td>Kolom 1 B </td>
</tr>
<tr>
<td>Kolom 2 A </td>
<td>Kolom 2 B </td>
</tr>
</table>
Jika pembuatan code sudah benar maka hasilnya akan menjadi seperti ini:
|
Kolom akan muncul menjadi dua kesamping dan dua ke bawah, lihat yang di tambahkan hanyalah yang saya beri stabilo berwarna, memasukkannya tidak perlu takut salah ya, jika anda salah memasukkan code dan hasilnya tidak jadi kolom maka anda bisa tekan ctrl + z untuk kembali.
Untuk cara membuat tiga kolom ke samping dan 2 kolom ke bawah anda bisa lihat cara berikut ini.
<table width="500" border="1">
<tr>
<td>Kolom 1 A</td>
<td>Kolom 2 A</td>
<td>Kolom Tambahan 1</td>
</tr>
<tr>
<td>Kolom 1 B</td>
<td>Kolom 2 B</td>
<td>Kolom Tambahan 2 </td>
</tr>
</table>
<tr>
<td>Kolom 1 A</td>
<td>Kolom 2 A</td>
<td>Kolom Tambahan 1</td>
</tr>
<tr>
<td>Kolom 1 B</td>
<td>Kolom 2 B</td>
<td>Kolom Tambahan 2 </td>
</tr>
</table>
Yang perlu anda tambahkan hanyalah code yang saya berikan stabilo berwarna.
Jika anda memasukkannya dengan benar maka hasilnya akan menjadi seperti ini:
|
Untuk membuat 3 kolom ke bawah dan ke samping anda bisa ikuti cara berikut ini.
<table width="500" border="1">
<tr>
<td>Kolom 1 A </td>
<td>Kolom 1 B </td>
<td>Kolom 1 C </td>
</tr>
<tr>
<td>Kolom 2 A </td>
<td>Kolom 2 B </td>
<td>Kolom 2 C </td>
</tr>
<tr>
<td>Kolom 3 A </td>
<td>Kolom 3 B </td>
<td>Kolom 3 C </td>
</tr>
</table>
Yang perlu anda ketahui sebelum membuatnya adalah urutkan Kolom1 buat sampai C, Kolom 2 buat sampai C, Kolom 3 buat sampai C juga.
Maka hasilnya akan menjadi seperti ini:
|
NB: Jika anda ingin mengatur lebar dari kolom yang anda inginkan maka anda bisa edit yang tertera seperti berikut
<table width="500" border="1">
Lihat Buktinya: Klik Disini
Anda bisa mengatur lebar kolom yang anda inginkan.
Anda bisa mengatur lebar kolom yang anda inginkan.
Jika anda ingin memasukkan gambar atau isi di dalam kolom tersebut maka anda bisa mengganti kata-kata Kolom 1 A menjadi sesuai yang anda mau.
Jika anda gagal dalam membuat tabel itu berarti css template anda belum ada atau template anda tidak mendukung tabel, untuk itu pelajari dahulu bagaimana cara menambah css di template.