Trik Membuat Tabel di Postingan
Nah ikutilah cara berikut ini semoga berhasil sedikit mengerti dan Pahami Dasar html ini akan memudahkan kita untuk mendalami dan mempelajari template Blog
Perintah dasar tag HTML untuk membuat tabel :
| Kode HTML | Keterangan |
| <table>...</table> | Perintah untuk membuat tabel |
| <tr>...</tr> | Perintah untuk membuat baris |
| <td>...</td> | Perintah untuk membuat kolom |
| border, width, align, bgcolor | Kode tambahan untuk pengaturan tebal garis
border, lebar tabel, perataan teks dan warna background
|
Nah sekarang kita coba membuat tabel 1x3 ( 1 baris 3 kolom ), maka penulisannya seperti ini :
<table border="1"><tr><td>Konten 1</td><td>Konten 2</td><td>Konten 3</td></tr></table>
Maka hasil tampilannya menjadi seperti ini :
| Konten 1 | Konten 2 | Konten 3 |
Selanjutnya kita coba merubah kode dasar diatas tadi untuk mempercantik tampilan dengan perataan teks dan ukuran lebar tabel kita tentukan misalnya 450px, maka penulisannya menjadi seperti ini :
<table border="1" width="450"><tr bgcolor="#F2F2F2"><td align="center"><b>Konten 1</b></td><td align="center"><i>Konten 2</i></td><td align="center">Konten 3</td></tr></table>
Maka hasil tampilannya menjadi seperti ini :
| Konten 1 | Konten 2 | Konten 3 |
Kemudian kita coba lagi membuat tabel yang lebih banyak misalnya 2x3 (2 baris 3 kolom ) dengan format penulisan seperti ini :
<table border="1" width="450"><tr bgcolor="#F2F2F2"><td align="center"><b>Konten 1</b></td><td align="center"><i>Konten 2</i></td><td align="center">Konten 3</td></tr><tr><td align="left">Tuliskan teks disini</td><td align="left">Masukkan script gambar dengan format seperti ini <img border='0' src=' http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif'/></td><td align="center"> Maka hasilnya akan seperti ini<img border='0' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif'/></td></tr></table>
Maka hasil tampilannya menjadi seperti ini :
| Konten 1 | Konten 2 | Konten 3 |
| Tuliskan teks disini | Masukkan script gambar dengan format seperti ini <img border='0' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif'/> | Maka hasilnya akan seperti ini  |
0 komentar: