Cara Membuat Tabel Di Postingan Blogger/Blogspot


Cara Membuat Tabel di Postingan Blogger/Blogspot  - Membuat tabel dalam postingan blog kadangdiperlukan dengan maksud untuk memperjelas materi tulisan/artikel atau untukmempersingkat penjelasan. Pada panel posting blogger tidak tersedia fasilitasuntuk membuat tabel sehingga kita perlu membuat tabel secara manual dengan menggunakantag HTML tertentu. Dasar yang harus kita pahami dulu disini adalah bagaimanacara atau kode penulisan sebuah tabel didalam postingan. Pada tips blogging kali ini saya akan share bagaimana cara membuat tabel serta tag HTML kodepenulisannya.

Perintah dasar tag HTML untuk membuat tabel :
Kode HTMLKeterangan
<table>...</table>Perintah untuk membuat tabel
<tr>...</tr>Perintah untuk membuat baris
<td>...</td>Perintah untuk membuat kolom
border, width, align,bgcolorKode tambahan untukpengaturan tebal garis
border, lebar tabel, perataan teks dan warnabackground

Nah sekarang kita coba membuat tabel 1x3 ( 1 baris 3kolom ), 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 1Konten2Konten 3

Selanjutnya kita coba merubah kode dasar diatas tadiuntuk mempercantik tampilan dengan perataan teks dan ukuran lebar tabel kitatentukan misalnya 450px, maka penulisannya menjadi seperti ini :

<table border="1"width="450">
<tr bgcolor="#F2F2F2">
<tdalign="center"><b>Konten1</b></td><tdalign="center"><i>Konten2</i></td><td align="center">Konten3</td>
</tr>
</table>

Maka hasil tampilannya menjadi seperti ini :

Konten1Konten2Konten 3

Kemudian kita coba lagi membuat tabel yang lebihbanyak misalnya 2x3 (2 baris 3 kolom ) dengan format penulisan seperti ini :

<table border="1"width="450">
<tr bgcolor="#F2F2F2">
<tdalign="center"><b>Konten1</b></td><tdalign="center"><i>Konten2</i></td><td align="center">Konten3</td>
</tr>
<tr>
<td align="left">Tuliskan teksdisini</td>
<td align="left">Masukkan scriptgambar dengan format seperti ini &lt;imgborder=&#039;0&#039; src=&#039;http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif&#039;/&gt;</td>
<td align="center"> Maka hasilnya akanseperti 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 :

Konten1Konten2Konten 3
Tuliskan teks disiniMasukkan script gambar dengan formatseperti ini <img border='0' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif'/>Maka hasilnya akan seperti ini

Nah dari 2 contoh sederhana tadi silahkan sobatterapkan untuk membuat tabel dalam postingan anda dengan menggunakanperintah-perintah dasar pembuatan tabel serta kode tambahan yang diperlukan sehinggahasil akhir tabel yang dibuat jadi lebih bagus dan menarik. Materi posting ini tidakcukup jika dihafalkan saja namun akan lebih baik kalau kita langsung mencobapraktek membuatnya. Tentukan dulu jenis atau bentuk tabel yang ingin sobatbuat, kemudian coba tuliskan scriptnya di notepad, buka panel posting bloggersobat kemudian paste kode script tabel yang dibuat tadi disana serta lihatlahpreviewnya. Saya yakin dengan cara seperti ini akan mempercepat pemahaman kitamengenai cara pembuatan tabel ini. Semoga tips ini bisa bermanfaat, happy niceblogging !

Ditulis Oleh: Bli Wahyu

Tidak ada komentar:

Poskan Komentar