Tutorial | Games | News | Download

Masih table menable..

Untuk membuat tabel di blog, bisa kita lakukan dengan kode HTML yang khusus untuk membuat tabel tentunya. Perintah yang di pakai adalah <table> ….. </table>. Di dalam tabel, kita bisa bisa beberapa atribut di dalamnya, antara lain yaitu:

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor=”kode warna”.

align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align=”left”|”center”|”right” .

cellpadding : untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Penempatan kodenya : cellpadding=”pixel” .

border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya : boeder=”pixel” .

cellspacin: untuk mengatur jarak antara sel. Penempatan kodenya : cellspacing=”pixel” .

height : untuk mengatur tinggi tabel. penempatan kodenya : height=”pixel”|”%” .

colspan : untuk mengatur kolom. Penempatan kodenya : colspan=”nomor” .

rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan=”nomor”

valign : untuk mengatur posisi vertikal. penempatan kodenya : valign=”top”|”middle”|”bottom”

Langsung aja praktek:

Cara Membuat Table Di Blog Standar

 

Contoh

 

<table width=”200″ border=”1″>
<tr>
<td>

Contoh

</td>
</tr>
<table>

Cara Membuat Table Di Blog dengan align=”center”

 

Contoh

 

 

<table width=”200″ border=”1″>
<tr>
<td align=”center”>

Contoh

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

Terlihat bahwa tulisan yang ada, tampak mepet ke dinding tabel, apabila kita ingin agar tulisan berada persis di tengah tabel, maka cukup tambahkan saja kode align=”center” pada kolomnya.

Cara Membuat Table Di Blog menggunakan perintah border

 

Contoh

 

 

<table width=”200″ border=”9″>
<tr>
<td align=”center”>

Contoh

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

Contoh-contoh di atas menggunakan nilai border 1, coba bandingkan apabila saya menggunakan nilai border yang lebih besar, misalkan 9.

Cara Membuat Table Di Blog menambah jumlah table

 

Contoh Contoh juga bro

 

 

<table width=”300″ border=”9″>
<tr>
<td align=”center”>

Contoh

</td>
<td align=”center”>

Contoh juga bro

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

Jika ingin kolomnya bertambah, tinggal tambahkan kode kolomnya

Cara Membuat Table Di Blog Menambah jumlah baris

 

Contoh Contoh juga bro
Contoh Contoh juga Bro

 

 

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

Contoh

</td>
<td align=”center”>

Contoh juga bro

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

Contoh

</td>
<td align=”center”>

Contoh juga bro

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

Cara Membuat Table Di Blog dengan beckgraund warna

 

Contoh Contoh juga bro
Contoh Contoh juga bro

 

 

<table width=”300″ border=”1″ bgcolor=”black”>
<tr bgcolor=”green”>
<td align=”center”>

Contoh

</td>
<td align=”center”>

Contoh juga bro

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

Contoh

</td>
<td align=”center”>

Contoh juga bro

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

Jika tabelnya ingin di beri warna, tinggal tambahkan kode bgcolor=”kode
warna”.

Cara Membuat Table Di Blog mengunakan fungsi caption serta TH

 

Tabel 1.1
Data Teknisi
No. Nama
1. bagus
2. ganteng
3. sekali

 

 

<table align=”left” border=”2″ bgcolor=”cyan” cellpadding=”5″ cellspacing=”0″ >
<caption align=”top”><b>Tabel 1.1</b></caption>
<tr bgcolor=”fuchsia”>
<th colspan=”2″>Data Teknisi</th>
</tr>
<tr bgcolor=”green”>
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor=”yellow”>
<td>1.</td>
<td>bagus</td>
</tr>
<tr bgcolor=”red”>
<td>2.</td>
<td>ganteng</td>
</tr>
<tr bgcolor=”blue”>
<td>3.</td>
<td>sekali</td>
</tr>
</table>

ganti tulisan warna tersebut dengan kode warna HTML juga bisa, kalau pingin tau kodewarna komplit klik disini

Cara Membuat Table Di Blog dengan beckgraund gambar dan link

 

contoh Asli Radio ONLINE

 

 

<table width=”300″ border=”1″ cellpadding=”20″>
<tr>
<td align=”center”>

<a href=”http://www.bagusriyanto.com” target=”new”><img height=”58″ width=”150″ src=”http://bagusriyanto.com/wp-content/uploads/2010/10/RadioonlineBB.png” alt=”contoh“/></a>

</td>
<td align=”center”>

<a href=”http://www.forum-indonesia.com/?id=rohman”><img height=”58″ width=”150″ src=”http://bagusriyanto.com/wp-content/uploads/2010/10/Radio-Online-Forum-Indonesia.png” alt=”Asli Radio ONLINE“/></a>

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

Ganti alamat linknya (cetak tebal) dan alamat Url gambarnya (cetak tebal miring) serta nama gambarnya (cetak miring)

Nah selamat mencoba ya..tunggu artikel berikutnya ok

 

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Awan Tag

%d blogger menyukai ini: