You are here → Home √ Pengenalan dan Cara Membuat Tabel di Post

Pengenalan dan Cara Membuat Tabel di Post

Dipublikasikan oleh Ilham Bachtiar pada Thursday, October 10, 2013

Tabel pada postingan blog sama halnya dengan tabel pada umumnya yang terdiri dari kolom dan baris. Selain untuk memasukan data dengan rapih, tabel juga berfungsi untuk mengurutkan data sesuai susunan kategori. Menggunakan tabel bisa jadi sangat penting untuk menyampaikan suatu fakta informasi atau ikhtisar, karena tabel lebih menarik untuk dilihat dan dibaca.

Untuk membuat tabel pada postingan hanya dibutuhkan tiga kode perintah utama, yaitu : <table>, <tr> dan <td>. Penjelasan : <table> perintah untuk membuat tabel <tr> perintah untuk membuat baris dan <td> perintah untuk membuat kolom. Sebagai ilustrasi penerapan kodenya seperti ini :
<table>  
<tr>  
<td>Baris 1 - Kolom 1</td>  
<td>Baris 1 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
</table>
Kode diatas akan menghasilkan table dengan fungsi 2 kolom dan 2 baris yang belum di pisahkan oleh garis pembatas tiap data. seperti berikut:

Baris 1 - Kolom 1 Baris 1 - Kolom 2
Baris 2 - Kolom 1 Baris 2 - Kolom 2

Untuk memberi garis pemisah antar data, kalian dapat menggunakan perintah border.

<table border="2">  
<tr>  
<td>Baris 1 - Kolom 1</td>  
<td>Baris 1 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
</table>

Hasilnya akan tergambar seperti berikut:

Baris 1 - Kolom 1 Baris 1 - Kolom 2
Baris 2 - Kolom 1 Baris 2 - Kolom 2


Selain perintah border masih banyak sekali kode perintah untuk mempercantik tampilan table. beberapa diantaranya seperti width (ukuran lebar table), bgcolor (warna background) dan align (perataan). Pengaplikasian kodenya saya gabungkan menjadi seperti ini :
<table border="5" width="500">  
<tr bgcolor="#3496E1">  
<td align="center">Baris 1 - Kolom 1</td>  
<td align="center">Baris 1 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
</table>
Hasilnya :

Baris 1 - Kolom 1 Baris 1 - Kolom 2
Baris 2 - Kolom 1 Baris 2 - Kolom 2

Sedangkan untuk menambah dan menggabungkan baris dan kolom akan kita pelajari dipost selanjutnya.

10 Komentar:

  1. cukup mudah ternyata ya sob, saya simpen scriptnya deh...trims

    ReplyDelete
  2. ternyata tuk bikin tabel rumit juga ya ? harus dengan kode-kode.

    ReplyDelete
  3. dulu aku sempat membuat tabel manual yang begininian pusing juga, jika banyak kolom yang harus dibuatnya. tapi sekarang enak ada generator tabel online.

    ReplyDelete
  4. keren..! makasih sob., mgk suatu saat nti aq pake.. *smile

    ReplyDelete
  5. Makasih Sob, saya pelajari dulu mudah-mudahan bisa

    ReplyDelete
  6. thanks a lot for the info,, permit try yaa ....

    ReplyDelete

 
Copyright © 2013 Obachti 95 . Powered by Blogger . All Rights Reserved