Membuat Tabel pada Postingan

Membuat tabel pada postingan tidak semudah di Ms. Word atau Exel. Dalam dunia blogging, pembuatan tabel ini membutuhkan kode-kode yng mungkin sangat ribet buat orang pemula seperti saya, heheh. Tapi tenang sobat, pada tips kali ini saya akan memberikan tipsnya kepada sobat dengan semudah mungkin.
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 <tr> 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 mengasilkan 2 kolom dan 2 baris yang belum dipisahkan oleh garis yang menjadi pembatas data yang ada dalam tabel tersebut. Hasilnya tampak seperti di bawah ini:

Baris 1 - Kolom 1	Baris 1 - Kolom 2
Baris 2 - Kolom 1	Baris 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="4"> 
<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>

Hasilnyapun sudah dengan penambahan garis pemisah antar data yang ada dalam tabel. Seperti contoh di bawah ini:

Baris 1 - Kolom 1	Baris 1 - Kolom 2
Baris 2 - Kolom 1	Baris 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 merapikan kita bisa memberi jarak antar sel dengan sel yang lain atau memberi jarak teks dalam 1 sel dengan penambahan perintah cellspacing. Sehingga kodenya seperti ini:

<table border="4" cellspacing="14"> 
<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 14, akan memberi jarak tiap sel sebesar 14px seperti hasil pengaplikasiannya 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="4" cellpadding="14"> 
<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 1	Baris 1 - Kolom 2
Baris 2 - Kolom 1	Baris 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 seperti ini:

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

Demikian tips yang bisa saya berikan sobat blogger, semoga bermanfaat. Mohon maaf jika ada kesalahan. (Jkbt/2012)