Membuat Tabel pada Blog

Anonymous       10/26/2010 03:37:00 PM

>
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. Bagaimana? Lumayan mudah bukan ?

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