Membuat tabel di blog perlu sekali dilakukan misalny tabel untuk tukar link atau blog yang menyajikan tentang daftar harga (blog toko online). Cara membuat tabel dan gambar (thumbnail) di blog ini mudah dilakukan, namun kalau tidak kode pembuatan tabel yang jelas akan kesulitan juga. Untuk menyisipkan gambar didalam tabel pada postingan blog harus dalam mode HTML (bukan compose) agar dapat terbaca dan kalau sudah kembalikan pada mode compose. Nah sekarang simak bagaimana cara membuat tabel dan gambar didalam postingan blog dibawah ini.
Cara Menyisipkan Gambar Didalam Tabel
Kode dasar membuat tabel dan gambar didalam postingan blog seperti dibawah ini :
<table border="1">
<tr>
<td>Judul Gambar 1</td>
<td>Judul Gambar 2</td>
</tr>
<tr>
<td>URL Gambar 1</td>
<td>URL Gambar 2</td>
</tr>
</table>
Keterangan :
1. Judul Gambar diisi dengan judul menurut selera anda
2. URL Gambar diisi dengan gambar anda
Cara Menerapkan Tabel dengan Thumbnail didalam Postingan yaitu buat dulu postingan seperti biasa anda akan menulis artikel di postingan blog dan pasang kode dibawah ini dalam mode HTML (bukan Compose)
Contoh Kode Membuat Tabel dan Gambar yang pertama :
<center>
<table border="1" style="width: 500px;"><caption align="top"><b>Tabel 1 Daftar Blogger</b></caption>
<tbody>
<tr align="center"><th>No.</th> <th>Nama Blog</th> <th>URL Blog </th> <th>Logo Blog</th></tr>
<tr align="center"><td>1.</td> <td>Terlintas</td> <td>http://lintas-tutor.blogspot.com</td><td><a href="http://1.bp.blogspot.com/-hiB1U7U5X14/UvrsKDh-n3I/AAAAAAAACoA/z61YB-eSCVE/s1600/logo.jpg" title="Cara Membuat Tabel dan Thumbnail"><img alt="Cara Membuat Tabel dan Thumbnail" src="http://1.bp.blogspot.com/-hiB1U7U5X14/UvrsKDh-n3I/AAAAAAAACoA/z61YB-eSCVE/s1600/logo.jpg" height="50" width="50" /></a></td></tr>
<tr align="center"><td>2.</td> <td>Terlintas</td> <td>http://lintas-tutor.blogspot.com</td><td><a href="http://1.bp.blogspot.com/-hiB1U7U5X14/UvrsKDh-n3I/AAAAAAAACoA/z61YB-eSCVE/s1600/logo.jpg" title="Cara Membuat Tabel dan Thumbnail"><img alt="Cara Membuat Tabel dan Thumbnail" src="http://1.bp.blogspot.com/-hiB1U7U5X14/UvrsKDh-n3I/AAAAAAAACoA/z61YB-eSCVE/s1600/logo.jpg" height="50" width="50" /></a></td></tr>
<tr align="center"><td>3.</td> <td>Terlintas</td> <td>http://lintas-tutor.blogspot.com</td><td><a href="http://1.bp.blogspot.com/-hiB1U7U5X14/UvrsKDh-n3I/AAAAAAAACoA/z61YB-eSCVE/s1600/logo.jpg" title="Cara Membuat Tabel dan Thumbnail"><img alt="Cara Membuat Tabel dan Thumbnail" src="http://1.bp.blogspot.com/-hiB1U7U5X14/UvrsKDh-n3I/AAAAAAAACoA/z61YB-eSCVE/s1600/logo.jpg" height="50" width="50" /></a></td></tr>
</tbody></table>
</center>
Hasilnya seperti gambar dibawah ini :
| No. | Nama Blog | URL Blog | Logo Blog |
|---|---|---|---|
| 1. | Terlintas | http://lintas-tutor.blogspot.com |  |
| 2. | Terlintas | http://lintas-tutor.blogspot.com | |
| 3. | Terlintas | http://lintas-tutor.blogspot.com | |
Contoh Kode Membuat Tabel dan Gambar yang kedua (bisa untuk Toko Online) :
<center>
<table border="1" style="width: 500px;">
<caption align="top"><b>Tabel 2. Daftar Harga BlackBerry Septermber 2013</b></caption>
<tbody>
<tr>
<td style="background: #d6d6d6; text-align: center;"><span style="color: red;">Harga BlackBerry Q5u</span></td>
<td style="background: #d6d6d6; text-align: center;"><span style="color: red;">Harga BlackBerry Q10</span></td>
<td style="background: #d6d6d6; text-align: center;"><span style="color: red;">Harga BlackBerry Z10</span></td>
</tr>
<tr>
<td style="text-align: center;"><span style="color: lime;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Tcp62b_3CNU47GRKMsSnZtAQm_b7lywNh5jr1aOF5CXhLZLYamxirCC_945Nm31mC4GA8UrrhnmSE98oBxzrjUme3GzMW1sC5Q2irhyphenhyphenMKcRsqnyXMZy0dUA3-QG_yEpSn4QLkyjBhZg/s1600/Harga+BlackBerry+Q5.jpg" title="BlackBerry Q5u"><img alt="Cara Membuat Tabel dan Thumbnail di Postingan Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Tcp62b_3CNU47GRKMsSnZtAQm_b7lywNh5jr1aOF5CXhLZLYamxirCC_945Nm31mC4GA8UrrhnmSE98oBxzrjUme3GzMW1sC5Q2irhyphenhyphenMKcRsqnyXMZy0dUA3-QG_yEpSn4QLkyjBhZg/s1600/Harga+BlackBerry+Q5.jpg" /></a></span><br />
Baru : Rp. 3.950.000,-<br />
Bekas : Rp.<span style="color: lime;"> - </span></td>
<td style="text-align: center;"><span style="color: lime;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDHPc9eqPrXRLFcPCLRzzl7vrbhGLvoSFcjz9fQOIUmnhPnA5RBA81y8Kev-EluOoTzsBmSby74oNDMthjJDjzxvuvnAp4pAce6YkEQnXSExwVeehlQovGQ9Cxr3cv3XiKldgJ3QJtryo/s1600/Harga+BlackBerry+Q10.jpg" title="BlackBerry Q10"><img alt="Cara Membuat Tabel dan Thumbnail di Postingan Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDHPc9eqPrXRLFcPCLRzzl7vrbhGLvoSFcjz9fQOIUmnhPnA5RBA81y8Kev-EluOoTzsBmSby74oNDMthjJDjzxvuvnAp4pAce6YkEQnXSExwVeehlQovGQ9Cxr3cv3XiKldgJ3QJtryo/s1600/Harga+BlackBerry+Q10.jpg" /></a></span><br />
Baru : Rp. 6.950.000,-<br />
Bekas : Rp. -</td>
<td style="text-align: center;"><span style="color: lime;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEFWLiimMLI_c7GBRVX5wB3SXirws0S0ZHtU7hgbaWyosV5u3ytyW3W5M_7He5SdDrT7BMOC8pjDlNSu4yhnUhXXUfL58ZidKElPqoJ4QDD_b8-qUbt_qyxhMcS-Gp0vZETRUd9sIwM8A/s1600/Harga+BlackBerry+Z10.jpg" title="BlackBerry Z10"><img alt="Cara Membuat Tabel dan Thumbnail di Postingan Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEFWLiimMLI_c7GBRVX5wB3SXirws0S0ZHtU7hgbaWyosV5u3ytyW3W5M_7He5SdDrT7BMOC8pjDlNSu4yhnUhXXUfL58ZidKElPqoJ4QDD_b8-qUbt_qyxhMcS-Gp0vZETRUd9sIwM8A/s1600/Harga+BlackBerry+Z10.jpg" /></a></span><br />
Baru : Rp. 6.250.000,-<br />
Bekas : Rp. -</td>
</tr>
<tr>
<td style="background: #d6d6d6; text-align: center;"><span style="color: red;">Harga Blackberry Curve 9320 Armstrong</span></td>
<td style="background: #d6d6d6; text-align: center;"><span style="color: red;">Harga BlackBerry Curve 9220 Davis</span></td>
<td style="background: #d6d6d6; text-align: center;"><span style="color: red;">Harga BlackBerry Curve 9380 Orlando</span></td>
</tr>
<tr>
<td style="text-align: center;"><span style="color: lime;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw6UO98aQjB3tC_av68dUltf_06uE5hoDAufuMV8HCq_FK8JHUyLKIZXGKwRSelrObxbsoKtAzrK9CTeZ36YGkqZ-DCdPhqYjOwjza-bUaMka3CXynbQ7eURRrDnHZlv2l-HnwZYVk0U4/s1600/Harga+Blackberry+Curve+9320.jpg" title="Blackberry Curve 9320 Armstrong"><img alt="Cara Membuat Tabel dan Thumbnail di Postingan Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw6UO98aQjB3tC_av68dUltf_06uE5hoDAufuMV8HCq_FK8JHUyLKIZXGKwRSelrObxbsoKtAzrK9CTeZ36YGkqZ-DCdPhqYjOwjza-bUaMka3CXynbQ7eURRrDnHZlv2l-HnwZYVk0U4/s1600/Harga+Blackberry+Curve+9320.jpg" /></a></span><br />
Baru : Rp. 2.250.000,-<br />
Bekas : Rp. 1.850.000,-</td>
<td style="text-align: center;"><span style="color: lime;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfjqJmMQoCogyvC-zPhvt_30RLw0am9lzqtk-6VAt1lIvYZcQBAvgFSCWYv0zweFZuc8wPXWKBMmnag9r6niVpz7lJG2TRl33Eg9qSlsTwn8yZRvokOzlKUKZDPA247WP7eRQhh54PNeY/s1600/BlackBerry+Curve+9220.jpg" title="BlackBerry Curve 9220 Davis"><img alt="Cara Membuat Tabel dan Thumbnail di Postingan Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfjqJmMQoCogyvC-zPhvt_30RLw0am9lzqtk-6VAt1lIvYZcQBAvgFSCWYv0zweFZuc8wPXWKBMmnag9r6niVpz7lJG2TRl33Eg9qSlsTwn8yZRvokOzlKUKZDPA247WP7eRQhh54PNeY/s1600/BlackBerry+Curve+9220.jpg" /></a></span><br />
Baru : Rp. 1.700.000,-<br />
Bekas : Rp. 1.250.000,-</td>
<td style="text-align: center;"><span style="color: lime;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpcIFfv5Ldi8k5F5fgsdhDNhGa_plzU9y4nqB-aALfTucGwXwUVpvYfZTNAXMV-MirxA6iB8ihNOcOWv6aUrmwXEgKWvd4Z5dNy-GdbpE24QpekUNXjAPRfYhGu-xmwBJ9ZCDkj7U0uns/s1600/BlackBerry+Curve+9380+Orlando.jpg" title="BlackBerry Curve 9380 Orlando"><img alt="Cara Membuat Tabel dan Thumbnail di Postingan Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpcIFfv5Ldi8k5F5fgsdhDNhGa_plzU9y4nqB-aALfTucGwXwUVpvYfZTNAXMV-MirxA6iB8ihNOcOWv6aUrmwXEgKWvd4Z5dNy-GdbpE24QpekUNXjAPRfYhGu-xmwBJ9ZCDkj7U0uns/s1600/BlackBerry+Curve+9380+Orlando.jpg" /></a></span><br />
Baru : Rp. 2.850.000,-<br />
Bekas : Rp. 2.350.000,-</td>
</tr>
</tbody></table>
</center>
Hasil gambarnya seperti dibawah ini :
| Harga BlackBerry Q5u | Harga BlackBerry Q10 | Harga BlackBerry Z10 |
 Baru : Rp. 3.950.000,- Bekas : Rp. - |
 Baru : Rp. 6.950.000,- Bekas : Rp. - |
 Baru : Rp. 6.250.000,- Bekas : Rp. - |
| Harga Blackberry Curve 9320 Armstrong | Harga BlackBerry Curve 9220 Davis | Harga BlackBerry Curve 9380 Orlando |
 Baru : Rp. 2.250.000,- Bekas : Rp. 1.850.000,- |
 Baru : Rp. 1.700.000,- Bekas : Rp. 1.250.000,- |
 Baru : Rp. 2.850.000,- Bekas : Rp. 2.350.000,- |
Keterangan :
Teks width: 500px bisa anda ubah dengan lebar kolom tabel (disesuaikan saja dengan blog anda)
Demikianlah tutorial mengenai cara membuat tabel dan menyisipkan gambar di postingan blog, semoga bermanfaat.
