ClickMore

Pada Tutorial kali ini penulis akan mengulas "Tip: Membuat Kotak/Tabel di Postingan Blogspot". Hal ini dirasa perlu diulas oleh penulis mengingat masih banyak blogger yang masih kesulitan dalam menyisipkan kotak atau tabel dalam postingan blog, apalagi bagi blogger pemula.

Agar pesan yang disampaikan dalam sebuah artikel bisa dengan mudah dipahami oleh pengunjung suatu blog, apalagi tema yang dibahas berkaitan dengan data, penggunaan tabel atau kotak tidak bisa diabaikan. Fungsi kotak atau tabel itu sendiri adalah untuk mempertegas dari data yang akan disampaikan sekaligus agar data tersebut terlihat rapi. Selain itu, bisa juga penggunaan tabel atau kotak dalam postingan menambah format artikel terkesan profesional.

Dewasa ini memang banyak situs-situs penyedia aplikasi yang membantu kita untuk membuat kotak atau tabel secara instan. Dan kita tinggal mengkonversinya ke dalam postingan blog. Tetapi jika kita mau memperdalam dunia blogging, pembuatan kotak secara manual dapat memperdalam pengetahuan kita mengenai kode-kode html. Karena sejatinya untuk menampilkan data atau tabel sekalipun agar bisa ditampilkan oleh browser sesuai dengan harapan kita, bentuk perintahnya dengan menyisipkan tag dari kode-kode html.

Meskipun dari segi prosesnya kita membutuhkan banyak waktu dan tenaga, bahkan mungkin biaya-bagi blogger yang menggunakan warnet-tetapi langkah seperti itu justru mengasah kita mengenai kode-kode html. Karena pada dasarnya semakin banyak kita mempraktekan suatu ilmu atau pengetahuan, kecendrungan untuk cepat mahir lebih besar dibandingkan hanya membacanya.

Oke deh untuk menghemat waktu langsung saja kita bahas mengenai cara-caranya. Sebelumnya, seperti yang penulis singgung diatas tadi bahwa untuk membuat kotak atau tabel dipostingan, maka kita harus menyisipkan kode-kode html. Untuk mengetahui dasar-dasar kode html anda bisa klik disini Nah berikut ini adalah kode-kode htmlnya.

Perlu anda ketahui bahwa tag dasar html untuk membuat kotak adalah <table> dan di akhiri dengan tag </table>. Tetapi jika anda hanya membuat tag <table> saja seperti di atas, browser tidak akan menampakan bentuk kotak/tabel seperti yang anda inginkan. Penggunaan tag <table> harus digabungkan dengan tag <tr> dan tag <td>.

Tag <tr></tr> fungsinya untuk menampilkan baris pada tabel atau kotak. Sedangkan tag <td> berfungsi untuk menampilkan jumlah kolom  yang dibuat dalam sebuah kotak/tabel. Jadi apabila anda ingin membuat tabel/kotak yang berisi 3 kolom dan 3 baris dengan baris pertama dengan huruf bercetak tebal, maka anda harus menuliskan tag seperti dibawah ini:

<center>
<table border="1" style="width: 150px;"><tbody>
<tr>
<td align="center"><b>No</b>
<td align="center"><b>Nama</b></td>
<td align="center"><b>Alamat</b>
</td> </tr>
<tr>
<td align="center">01</td>
<td align="center">Victor</td>
<td align="center">Tegal</td> </tr>
<tr>
<td align="center">02</td>
<td align="center">Samuel</td>
<td align="center">Slawi</td> </tr>
</tbody> </table>
</center>

Dan hasilnya seperti dibawah ini

No	Nama	Alamat
01	Victor	Tegal
02	Samuel	Slawi

Keterangan :
Tag <center> pada awal enulisan adalah tag perintah untuk menampilkan kotak/tabel posisi ditengah dan diakhiri dengan tag penutup </center>
tag <table> adalah tag perintah untuk menampilkan tabel dan diakhiri dengan tag penutup </table>
Tag <tr>adalah tag perintah untuk menampilkan baris pada tabel dan ditutup dengan tag </tr>. Tag <td> adalah tag perintah untuk menampilkan kolom dalam tabel tersebut. Sedangkan tiap-tiap tag tersebut harus berpasangan dengan tag serupa tetapi harus menambahkan "/" diawalnya.

Nah sekarang bagaimana kalau mau menambahkan kotak atau tabel berbackground warna? caranya adalah dengan menambahkan saja atribut color pada tag <tr>nya. Berikut ini contohnya:

<center>
<table border="1" style="width: 150px;">
<tbody>
<tr bgcolor="#66ccff">
<td align="center"><b>No</b></td>
<td align="center"><b>Nama</b></td>
<td align="center"><b>Alamat</b></td>
</tr>
<tr>
<td align="center">01</td>
<td align="center">Victor</td>
<td align="center">Tegal</td>
</tr>
<tr>
<td align="center">02</td>
<td align="center">Samuel</td>
<td align="center">Slawi</td>
</tr>
</tbody>
</table>
</center>

Maka hasilnya seperti dibawah ini

No	Nama	Alamat
01	Victor	Tegal
02	Samuel	Slawi

Sedangkan untuk membuat tabel/kotak dengan seluruhnya berlatar warna, caranya dengan menambahkan atribut color pada setiap tag <tr> nya. nah untuk penulisan tagnya seperti ini :

<center>
<table border="1" style="width: 150px;"><tbody>
<tr bgcolor="#66ccff"><td align="center"><b>No</b></td>
<td align="center"><b>Nama</b></td>
<td align="center"><b>Alamat</b></td>
</tr>
<tr bgcolor="#66ccff"> <td align="center">01</td>
<td align="center">Victor</td>
<td align="center">Tegal</td>
</tr>
<tr bgcolor="#66ccff"> <td align="center">02</td>
<td align="center">Samuel</td>
<td align="center">Slawi</td>
</tr>
</tbody>
</table>
</center>

Maka hasilnya seperti kotak/tabel dibawah ini :

No	Nama	Alamat
01	Victor	Tegal
02	Samuel	Slawi

Selain anda bisa membuat tabel/kotak yang berisi data berupa teks atau angka, anda juga bisa mengisi tabel dengan gambar atau gambar berlink. Namun insya Allah pada kesempatan lain akan penulis ulas. Kiranya hanya cukup sampai disini dulu penulis ulas mengenai cara membuat kotak/tabel di postingan blogspot.  Semoga bermanfaat....!