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>
<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 270px, maka penulisannya menjadi seperti ini :
<table border="1" width="270">
<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>
<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="270">
<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>
<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 | Maka hasilnya akan seperti ini |
Nah dari 2 contoh sederhana tadi silahkan sobat terapkan untuk membuat tabel dalam postingan anda dengan menggunakan perintah-perintah dasar pembuatan tabel serta kode tambahan yang diperlukan sehingga hasil akhir tabel yang dibuat jadi lebih bagus dan menarik. Materi posting ini tidak cukup jika dihafalkan saja namun akan lebih baik kalau kita langsung mencoba praktek membuatnya. Tentukan dulu jenis atau bentuk tabel yang ingin sobat buat, kemudian coba tuliskan scriptnya di notepad, buka panel posting blogger sobat kemudian paste kode script tabel yang dibuat tadi disana serta lihatlah previewnya. Saya yakin dengan cara seperti ini akan mempercepat pemahaman kita mengenai cara pembuatan tabel ini. Semoga tips ini bisa bermanfaat, happy nice blogging !
Post by Doel Piero.
wah cukup rumit juga ya, tapi hasil yang maksimal juga didapat dari usaha yang maksimal ya ga..... thanks ilmunya kawan, segera diterapkan di blog saya nih....
ReplyDeleteThanks infonya om...
ReplyDeleteKunjung balik ya...
di www.m4riberbagi.blogspot.com