[ojegjogja] Cara mudah membuat dan memasang tabel di blog

Fungsi tabel pada sebuah blog tidak bisa kita anggap remeh. Dengan tabel kita bisa membagi suatu halaman menjadi beberapa bagian. Dengan tabel kita juga bisa menyajikan sebuah laporan, meletakkan sebuah gambar atau foto, dan lain sebagainya.Adapaun cara membuat dan memasang  tabel di blog adalah sebagai berikut : .

Kode HTML  untuk membuat tabel :

Untuk membuat sebuah tabel harus diawali dengan kode <table> dan diakhiri dengan kode </table>

<tr></tr>	merupakan tag yang berfungsi untuk membuat baris tabel.
<td></td>	merupakan tag yang berguna untuk membuat kolom tabel.

<th></th> merupakan tag yang berguna untuk membuat header.

Tag- tag di atas mempunyai  atribut seperti di bawah ini:

bgcolor	- untuk mewarnai tabel (backgoround).
background	- apabila ingin membuat background tabel di ambil dari suatu gambar
width	- untuk menentukan lebar tabel
height	- untuk menentukan tinggi tabel
align	- untuk mengatur perataan horizontal
valign	- untuk mengatur perataan vertikal
border	- untuk menentukan tebal bingkai bingkai tabel
cellspacing	- untuk menentukan jarak antar kolom
cellpadding	- untuk menentukan jarak antara isi dengan tepi kolom (margin)
colspan	- untuk menentukan berapa kolom tabel yang akan digabung
cowspan	- untuk menentukan berapa baris yang akan digabung

Berikut beberapa contoh tabel :

Tabel: 1 kolom
Kodenya :
<table border="1">
<tr> <td>kolom 1, baris 1</td> </tr>
<tr> <td>kolom 1, baris 2</td> </tr>
<tr> <td>kolom 1, baris 3</td> </tr>
</table>
Hasilnya :

kolom 1, baris 1

kolom 1, baris 2

kolom 1, baris 3

Table: 3 kolm, 2 baris
Kodenya :
<table width="100%" border="1">
<tr> <td bgcolor="yellow">kolom 1, baris 1</td><td>kolom 2, baris 1</td><td bgcolor="yellow">kolom 3, baris 1</td></tr>
<tr> <td>kolom 1, baris 2</td> <td bgcolor="yellow">kolom 2 ,baris 2</td><td>kolom 3, baris 2</td></tr>
</table>
Hasilnya : 

kolom 1, baris 1	kolom 2, baris 1	kolom 3, baris 1
kolom 1, baris 2	kolom 2 ,baris 2	kolom 3, baris 2

Tabel: 2 kolom, 2 baris
Kodenya :
<table width="100%" border="1">
<tr> <td bgcolor="yellow">kolom 1, baris 1</td> <td>kolom 2, baris 1</td> </tr>
<tr> <td>kolom 1, baris 2</td> <td bgcolor="yellow">kolom 2 ,baris 2</td> </tr>
</table>
Hasilnya : 

kolom 1, baris 1	kolom 2, baris 1
kolom 1, baris 2	kolom 2 ,baris 2

Tabel: 2 kolom, 2 baris
Kodenya :
<table width="80%" border="1">
<tr> <td bgcolor="yellow" width="70%">kolom 1, baris 1</td><td width="30%">kolom 2, baris 1</td> </tr>
<tr height="50"> <td valign="top">kolom 1, baris 2</td><td bgcolor="yellow" align="right">kolom 2, baris 2</td> </tr>
</table>
 Hasilnya :

kolom 1, baris 1	kolom 2, baris 1
kolom 1, baris 2	kolom 2, baris 2

Tabel: 2 kolom, 2 baris
Kodenya :
<table border="1" cellpadding="10"><tbody>
<tr> <td bgcolor="yellow" width="70%">kolom 1, baris 1</td> <td width="30%">kolom 2, baris 1</td> </tr>
<tr height="50"> <td valign="top">kolom 1, baris 2</td> <td bgcolor="yellow" align="right">kolom 2, baris 2</td> </tr>
</tbody></table>
 Hasilnya :

kolom 1, baris 1	kolom 2, baris 1
kolom 1, baris 2	kolom 2, baris 2

Tabel: 2 kolom, 2 baris
Kodenya :
<table border="1" cellspacing="10"><tbody>
<tr> <td bgcolor="yellow" width="70%">kolom 1, baris 1</td> <td width="30%">kolom 2, baris 1</td> </tr>
<tr height="50"> <td valign="top">kolom 1, baris 2</td> <td bgcolor="yellow" align="right">kolom 2, baris 2</td> </tr>
</tbody></table>
 Hasilnya :

kolom 1, baris 1	kolom 2, baris 1
kolom 1, baris 2	kolom 2, baris 2

Table: gabungan
Kodenya :
<table border="1" cellspacing="5"><tbody>
<tr> <td bgcolor="yellow" colspan="2">kolom gabungan</td> </tr>
<tr height="50"> <td valign="top">kolom 1, baris 2</td> <td align="right">kolom 2, baris 2</td> </tr>
</tbody></table>
Hasilnya : 

kolom gabungan
kolom 1, baris 2	kolom 2, baris 2

Tabel: gabungan
Kodenya :
<table border="1" cellspacing="5"><tbody>
<tr> <td bgcolor="yellow" rowspan="2" width="70%">kolom 1 gabungan</td> <td width="30%">kolom 2</td> </tr>
<tr height="50"> <td align="right">kolom 2, baris 2</td> </tr>
</tbody></table>
 Hasilnya :

kolom 1 gabungan	kolom 2
	kolom 2, baris 2

Tabel : Background dan teks berwarna
Kodenya :
<table border="1">
<tbody>
<tr bgcolor="blue" style="color: yellow;"> <td>background biru, teks kuning </td> <td>background biru, teks kuning </td> </tr>
<tr> <td bgcolor="blue" style="color: yellow;">background biru, teks kuning </td> <td bgcolor="yellow" style="color: blue;" td="">background kuning, teks biru</td> </tr>
<tr bgcolor="yellow" style="color: blue;"> <td>background kuning, teks biru</td> <td>background kuning, teks biru</td> </tr>
</tbody></table>
Hasilnya : 

background biru, teks kuning	background biru, teks kuning
background biru, teks kuning	background kuning, teks biru
background kuning, teks biru	background kuning, teks biru

Tabel difungsikan untuk meletakan banner
Kodenya :
<table border="1" >
<tr> <td><a href="http://buburayamketawajago.co.cc"><img src="http://i1143.photobucket.com/albums/n628/panda_281/sldbuburayam.jpg" height="125" width="200" /></a> </td><td><a href="http://buburayamketawajago.co.cc"><img src="http://i1143.photobucket.com/albums/n628/panda_281/sldayamgorneg.jpg" height="125" width="200" /></a> </td> </tr>
<tr> <td><a href="http://buburayamketawajago.co.cc"><img src="http://s1143.photobucket.com/albums/n628/panda_281/slddadarpenyet.jpg" height="125" width="200" /></a> </td><td><a href="http://buburayamketawajago.co.cc"><img src="http://s1143.photobucket.com/albums/n628/panda_281/sldtempepenyet.jpg" height="125" width="200" /></a> </td> </tr>
</table>
 Hasilnya :

[ojegjogja] Membuat dan memasang Teks berjalan lebih dari 2 (dua) warna

Menanggapi permintaan salah satu teman yang menanyakan tentang cara membuat Teks berjalan dengan menggunakan lebih dari 2 (dua) warna, maka pada kesempatan kali ini saya sempatkan untuk memenuhi permintaan tersebut.  Karena keterbatasan waktu, maka saya hanya memberikan 1 (satu) contoh saja, untuk selanjutnya saya harap anda bisa mengembangkan sendiri.  Untuk mengetahui  kode warna anda bisa klik di sini. 

Adapun cara memasangnya adalah sebagai berikut :

1.    Login ke blog anda

2.    Klik Rancangan

3.    Dalam menu Elemen Laman klik Tambah Gadget / Add Widget

4.    Pilih HTML

5.    Copy Paste kode di bawah ke dalam Gadget tersebut

Kedenya adalah sebagai berikut :

<div style="text-align: center; margin:0 0 5px 0; font-weight:bold; font-size:40px"><marquee behavior="alternate" scrollamount="3" height="45px" width="1000px"><span style="color: yellow;">www.</span><span style="color: #66ff33;">ojeg</span><span style="color: #66ffcc;">jogja.</span><span style="color: yellow;">blogspot.</span><span style="color: #66ff33;">com</span></marquee></div>

Keterangan :
Untuk teks yang berwarna merah anda bisa mengganti macam warnanya sesuai keinginan dengan cara mengubah kode warnanya.

Hasilnya seperti di bawah :

www.ojegjogja.blogspot.com