MENGENAI CARA MEMBUAT TABLE DI POSTINGAN

ufro

27 Sep, 2012

usersymbians60v :

cara membuat tabel pada postinga blog seperti halnya tabel pada office yang terdiri kolom dan baris,yang berfungsi memasukan data dan mengurutkan sesuai dengan kategory atau kebutuhan sehingga menjadi susunan yang rapih.

untuk membuat table postingan hanya dibutuhkan tiga kode perintah utama seperti :

<table> <tr> dan <td>

Penjelasan :

<table> : perintah untuk membuat table

<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 tersebut akan menghasilkan 2 kolom dan 2 baris data yang belum dipisahkan oleh garis yang membatasi tiap data, seperti tergambar hasilnya seperti ini :

|Baris 1 kolom 1| Baris 1 kolom 2 |

|Baris 2 kolom 1 | Baris 2 kolom 2|

Untuk menambahkan garis sebagai pemisah antara data yang dimasukan,kalian bisa menambahkan perintah border yang diatur tebalnya sesuai keinginan,sehingga kodenya menjadi seperti

<table border="5"> <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>

jika kamu ingin melakukan pengisian data dalam tabel sebagai ilustrasi kamu akan masukan pada baris pertama kolom pertama,hal yang paling utama adalah membuat garis lalu diikuti membuat kolom,selanjutnya membuat data.

Baris 1 kolom 1 Baris 1 kolom 2

Baris 2 kolom 1 Baris 2 kolom 2

Dari contoh diatas sudah membentuk tabel dengan 2 kolom dan 2 baris dan sudah dipisahkan dengan garis, untuk merapihkan kita bisa memberi jarak antar sel dengan sel yang lain atau memberi jarak teks dalam 1 sel.

Untuk menambahkan jarak antara Sel,kita bisa menambahkan code

<table border="5" cellspacing="15"> <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> <br>

dengan penambahan cellspacing 15,akan memberi jarak sel table sebesar 15px seperti hasil dari pengaplikasian dibawah ini :

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

Sedangkan untuk memberi jarak teks dalam 1 sel menggunakan kode cellpadding, kode pengaplikasinnya seperti ini:

<table border="5" cellpadding="15"> <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>

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

selain keterangan border,callspacing,callpadding masih ada code yang mempercantik table seperti widht ( utntuk ukuran table) bgcolor ( untuk memberi warna pada background ) pengaplikasian yang digabungkan menjadi code seperti dibawah ini

<table border="5" width="400"> <tr bgcolor="#f0f0f0"> <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>:

maka hasil yang didapat seperti ini.: