Cara Membuat Tabel Pada Posting Blog

2 komentar Senin, 08 Oktober 2012
Membuat tabel pada posting blog, seperti halnya tabel pada ms Office yang terdiri dari kolom dan baris, yang berfungsi untuk memasukan data dan mengurutkanya sesuai dengan kategori atau kebutuhan sehingga menjadi susunan data yang rapih.

Untuk membuat tabel pada postingan hanya dibutuhkan tiga kode perintah utama seperti <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 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 1Baris 2 - Kolom 2


------------------------------------


Untuk menambahkan garis sebagai pemisah antar data yang dimasukan, kalian bisa menambahkan perintah border yang diatur ketebalannya sesuai dengan keinginan, sehingga kodenya menjadi seperti ini :

<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>

dan hasilnya pun sudah dengan penambahan garis pemisah antar tiap data, seperti ini :

Baris 1 - Kolom 1Baris 1 - Kolom 2
Baris 2 - Kolom 1Baris 2 - Kolom 2
Jika kalian akan melakukan pengisian data pada tabel, sebagai ilustrasi kalian akan memasukan suatu data pada baris pertama kolom pertama, hal pertama yang harus dibuat adalah membuat baris lalu dikuti dengan membuat kolom dan selanjutnya memasukan data, jika akan dilanjutkan mengisi kolom kedua pada baris pertama, yang perlu dilakukan adalah membuat baris dulu kemudian membuat kolom pertama dan selanjutnya membuat kolom kedua lalu mengisi data, inti dari pengisian data pada tabel adalah pertama membuat baris lalu diikuti membuat kolom.

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 memeberi jarak antar sel kita bisa menambahkan kode perintah cellspacing dalam table, sehingga kode pengaplikasiannya seperti ini :

<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>

dengan penambahan cellspacing 15, akan memberi jarak tiap sel sebesar 15px seperti hasil pengaplikasiannya dibawah ini :
Baris 1 - Kolom 1Baris 1 - Kolom 2
Baris 2 - Kolom 1Baris 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>

dan hasilnya seperti ini :
Baris 1 - Kolom 1Baris 1 - Kolom 2
Baris 2 - Kolom 1Baris 2 - Kolom 2



------------------------------------

selain keteranga perintah border, cellspacing dan cellpadding masih ada kode perintah untuk mempercantik tampilan table seperti width (ukuran table), bgcolor (warna background) dan align (perataan) pengaplikasian kodenya saya gabungkan menjadi seperti 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>

dan hasilnya menjadi seperti ini :
Baris 1 - Kolom 1Baris 1 - Kolom 2
Baris 2 - Kolom 1Baris 2 - Kolom 2

sumber : situseo
Read On
Langganan: Postingan (Atom)