Trick Membuat Table Pada Blog | Lengkap

Minggu yang cerah; Kalo sobat blogger cari di google mungkin sudah banyak trick seperti ini. Tetapi saya akan share dan menjawab pertanyaan diary lusi tentang membuat tabel pada blog. Semua pasti sudah tahu apa itu tabel. Jadi tidak usah panjang lebar langsung ke pembuatannya saja ya, hehe,,

BAG I . Tabel Dasar

Kode html “sederhana” untuk pembuatan table adalah seperti dibawah ini, (menggunakan table 2 column dan 1 row)

    <table border="1">

    <tr>

    <td></td> <td></td>

    </tr>

    </table>

Kita buat contoh seperti langkah diatas dengan kode seperti ini;

<table border="1">

<tr>

<td>Kolom 1</td> <td>Kolom 2</td>

</tr>

</table>

Hasilnya akan menjadi seperti ini;

Kolom 1

Kolom 2

Jika sobat ingin mengatur sendiri lebar kolom maka tambahkan width="200" seperti contoh berikut;

<table width="200" border="1">

<tr>

<td>

Contoh kolom 1

</td>

</tr>

<table>

Hasilnya seperti ini;

Contoh kolom 1

 Jika sobat blogger menginginkan tulisan tepat ditengah-tengah kolom tingaal tambahkan align="center" pada kolomnya. lihat contoh berikut

<table width="200" border="1"> 

<tr> 

<td align="center"> 

Contoh kolom 1

</td> 

</tr> 

</table> 

Hasilnya seperti ini;  

Contoh kolom 1

 
Jika sobat blogger menginginkan garis blogger yang lebih tebal, tinggal ubah saja angka border menjadi lebih besar. Lihat contoh berikut;

<table width="200" border="8">
<tr
> <td align="center">

Contoh Kolom 1 

</td
> </tr
> </table>

Hasilnya seperti ini; 

Contoh Kolom 1

Jika sobat menginginkan gambar dengan kata-kata ditabel sampingnya

<table border="1">

<tr>

<td><img src="http://www.smileycodes.info/emo/id/57.gif" width="54" height="48" border="0" alt="http://www.smileycodes.info" /></a></td> <td><b>BISAHKAH...?</b><br/>Kalo kita sekarang bilang kita pasti bisa terus semangat dan bekarya dalam dunia blogger. Saling kunjung-mengunjungi dan memberikan masukkan. Pasti Bisa???...</td></tr> </table>

Hasilnya seperti ini;

           

BISAHKAH KITA ??? Kalo kita sekarang berkata kita pasti bisa, terus semangat dan bekarya dalam dunia blogger. Saling kunjung-mengunjungi dan memberikan masukkan. Pasti Bisa???...

Kode html “sederhana” untuk pembuatan table adalah seperti dibawah ini, (menggunakan table 2 column dan 2 row)

<table width="300" border="1">
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga

</td>
</tr>
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga

</td>
</tr>
</table>

Hasilnya seperti ini;

Contoh	Contoh juga
Contoh	Contoh juga

Jika tabelnya ingin diberikan warna tinggal tambahakan kode bgcolor="kode warna" seperti contoh;

<table width="300" border="1" bgcolor="black">
<tr bgcolor="brown">
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga

</td>
<tr bgcolor="yellow">
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga

</td>
</tr>
</table>

Hasilnya seperti ini;

Contoh	Contoh juga
Contoh	Contoh juga

Sekarang saya beri contoh terakhir dengan mengunakan fungsi caption serta TH (table header). Misalkan saya ingin membuat sebuah tabel data dari nama-nama teknisi. Data-data yang ingin di buatkan tabel, misalkan seperti ini, sumber dari sini :

Tabel 31

Data Blog

No       Nama

1          Dempo

2          Awang

3          Putra    

<table align="left" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 31</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Data Blog</th>
</tr>
<tr bgcolor="brown">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Dempo</td>
</tr>
<tr bgcolor="orange">
<td>2.</td>
<td>Awang</td>
</tr>
<tr bgcolor="pink">
<td>3.<
;/td>
<td>Putra</td>
</tr>
</table>

Hasilnya seperti ini;

Tabel 31

Data Blog
No.	Nama
1.	Dempo
2.	Awang
3.	Putra

Untuk selanjutnya sobat blogger bisa memvariasi tabel sesuai keinginan sobat blogger. Gimana? gampang-gampang lumayan kan ? hehe,, di coba saja pasti bisa.

Nb;Jika menganggap garis border mengganggu pemandangan, sobat bisa menghilangkan garisnya dengan mengubah garis pada border="0"

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

Artikel Terkait:

trick blog

• Iframe HTML
• Membuat Postingan Terbaru Per-Label / Kategori
• Trick Menghilangkan Garis Dotted Pada Link
• Trick Menulis Variasi Pada CBox
• Cara Membuat Teks Dalam Kotak / Teks Area
• Cara Cepat Cek Back Link
• Jutaan BackLink Gratis Datang ke Blog/ Website Anda
• Daftar Blog Ke Lebih 100 Search Engine Otomatis