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
| 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
 |
 |
<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