22.22
Untuk membuat tabel tunggal seperti di atas maka yang harus dilakukan adalah :
1. Masuk ke akun blog anda ( bukan akun blog tetangga, hehe )
2. Klik atau buat entri baru
3. Klik HTML pada kiri posting
4. Kemudian masukan kode yang ada di bawah ini sesuai jenis kolom yang anda inginkan. Setelah selesai klik compose dan lihat hasilnya.
Contoh 1 :
| Contoh kolom Satu baris pinggir |
Kode HTML untuk tabel di atas :
| <table border="1" style="width: 200px;"> <tbody> <tr> <td>Contoh kolom Satu baris</td></tr> </tbody></table> <br /> |
Contoh 2 :
| contoh tulisan di tengah |
Kode HTML untuk tabel di atas :
| <table border="1" style="width: 200px;"> <tbody> <tr> <td align="center">contoh tulisan di tengah</td> </tr> </tbody></table> <br /> |
Contoh 3 :
| Contoh | Satu Baris Dua Kolom |
Kode HTML untuk tabel di atas :
| <br /> <table border="1" style="width: 300px;"> <tbody> <tr> <td align="center">Contoh</td> <td align="center">Satu Baris Dua Kolom </td> </tr> </tbody></table> <br /> |
Contoh 4 :
| Contoh untuk kolom menggelembung |
Kode HTML untuk tabel di atas :
| <table border="9" style="width: 300px;"> <tbody> <tr> <td align="center">Contoh untuk kolom menggelembung</td></tr> </tbody></table> <br /> |
Contoh 5 :
| Contoh | Dua Kolom |
Kode HTML untuk tabel di atas :
| <table border="9" style="width: 300px;"> <tbody> <tr> <td align="center">Contoh</td> <td align="center">Dua Kolom </td> </tr> </tbody></table> <br /> |
Contoh 6 :
| baris 1 | baris 1 |
| baris 2 | baris 2 |
Kode HTML untuk tabel di atas :
| <table border="1" style="width: 300px;"> <tbody> <tr> <td align="center">baris 1 </td> <td align="center">baris 1 </td> </tr> <tr> <td align="center">baris 2 </td> <td align="center">baris 2</td> </tr> </tbody></table> <br /> |
Contoh 7 :
| baris 1 | baris 1 |
| baris 2 | baris 2 |
Kode HTML untuk tabel di atas :
| <table bgcolor="blue" border="1" style="width: 300px;"> <tbody> <tr bgcolor="green"> <td align="center">baris 1 </td> <td align="center">baris 1</td> </tr> <tr bgcolor="yellow"> </tr> <tr> <td align="center">baris 2</td> <td align="center">baris 2 </td> </tr> </tbody></table> <br /> Kode HTML untuk tabel di atas :<br /> <br /> <br /> <table border="1" style="width: 200px;"> <tbody> <tr> <td style="text-align: left;"><br /></td> </tr> </tbody></table> |
Contoh 8 :
| Data Barang | |
|---|---|
| No. | Produk |
| 1. | air mineral |
| 2. | buku |
| 3. | baju |
Kode HTML untuk tabel di atas :
| <table align="left" bgcolor="cyan" border="2" cellpadding="5" cellspacing="0"> <caption align="top"><b>Tabel 1.1</b></caption> <tbody> <tr bgcolor="fuchsia"> <th colspan="2">Data Barang</th> </tr> <tr bgcolor="silver"> <th>No.</th> <th>Produk</th> </tr> <tr bgcolor="yellow"> <td><b>1.</b></td> <td><b>air mineral</b></td> </tr> <tr bgcolor="red"> <td><b>2.</b></td> <td><b>buku</b></td> </tr> <tr bgcolor="blue"> <td><b>3.</b></td> <td><b>baju</b></td> </tr> </tbody></table> <br /> |
TAMBAHAN :
1. Untuk merubah lebar lebar kolom :
anda tinggal mengganti style="width: 500px;"> untuk 500px anda bisa merubah ukuran dengan 200 atau 100 atau berapa yang anda inginkan.
2. Untuk merubah warna kolom :
Ganti warna dalam html misalnyadari white menjadi blue atau pink atau sesuka anda pada HTML kolom yang anda maksud.
| Sekian dan terima kasih atas kunjungannya di http://tutorialney.blogspot.com jangan lupa memberi komentar, join this site dan rekomendasikan ini di google+. Thanks. Jangan lupa mampir lagi. Salam blogger. |
Posted in: Penulisan Blogger
