Februari 25, 2012

Mengenal Cara Membuat Tabel Pada Post

Situseo Blog : 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 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="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 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 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 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>

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 menjadi seperti ini :

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


Semoga bermanfaat,
referensi : klikbelajar

7 Diskusi untuk Mengenal Cara Membuat Tabel Pada Post

2 April 2012 11.17  

ada cara yg paling gampang om. pertama buka ms.word trs bikin table di situ, trs tinggal di block semua tabelnya terus klik kanan copy. buka dashboard blogger, pilih newpost pada tab edit html dan compose, pilih yg compose, trs di paste di situ. jadi deh :D

3 April 2012 00.22  

@mobile phone movies masukan yang bagus dan lebih mudah, perbedaanya dengan memahami penggunaan kode table akan beguna untuk memodifikasi bagian - bagian pada template lainnya, seperti yang saya pergunakan untuk ruang di sebelah kotak komentar.

5 April 2012 16.07  

terimakasih infonya bermanfaat sekali, langsung ke tkp

12 April 2012 23.17  

wah makasih tipsnya. keren gan tabelnya

20 April 2012 21.38  

sip ini yg sya cri thanks ea..

28 April 2012 09.53  

makasi atas infonya gan.....

25 Juni 2012 12.15  

om,,, kalau cara masukin linknya gimana ni om,,,

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top