Cara membuat tabel pada posting / halaman blog

Terkadang dalam beberapa posting / halaman blog kita ingin membuat sebuah tabel untuk keperluan tertentu, entah itu gambar atau teks. Namun sayangnya pada menu blogger tidak dilengkapi dengan menu pilihan untuk membuat tabel secara otomatis, jadi penulis / pemilik blog harus membuat secara manual dengan script HTML.

Pada dasarnya perintah kode HTML untuk membuat tabel terdiri dari tiga saja. Yaitu :
* Untuk mengawali perintah membuat sebuah tabel adalah dengan kode HTML <table> 
   dan sebagai penutup perintah membuat tabel tersebut di akhiri dengan kode HTML </table>
* Perintah untuk membuat sebuah kolom tabel adalah dengan menggunakan kode HTML  <td>
   dan untuk menutup perintah membuat kolom tabel tersebut di akhiri dengan kode </td> 
* Sedangkan perintah untuk membuat baris tabel adalah dengan kode HTML <tr> 
   dan untuk menutup perintah membuat baris tabel tersebut diakhiri dengan kode HTML </tr>


Contoh 1 :
Jika ingin membuat sebuah tabel yang terdiri dari 3 kolom dengan 1 baris, maka kode perintah HTML nya adalah seperti berikut :

<table border="1">
<tr>
<td>KOLOM KE-1</td> <td>KOLOM KE-2</td> <td>KOLOM KE-3</td>
</tr>
</table>


Keterangan :
* Perintah Script / kode tersebut hanya dapat dituliskan pada pilihan mode penulisan "HTML", dan perintah Script tersebut tidak akan dapat berjalan jika di tuliskan pada mode penulisan "Text Rich" atau "Compose".

Maka hasil dari perintah kode HTML di atas adalah seperti yang terlihat pada tabel di bawah ini :

KOLOM KE-1 KOLOM KE-2 KOLOM KE-3

Contoh 2 :
Jika ingin membuat sebuah tabel yang terdiri dari 3 kolom dengan 2 baris, maka kode perintah HTML nya adalah seperti berikut :

<table border="1">
<tr>
<td>BARIS KE-1 KOLOM KE-1</td> <td>BARIS KE-1 KOLOM KE-2</td> <td>BARIS KE-1 KOLOM KE-3</td>
</tr>
<tr>
<td>BARIS KE-2 KOLOM KE-1</td> <td>BARIS KE-2 KOLOM KE-2</td> <td>BARIS KE-2 KOLOM KE-3</td>
</tr>
</table>


Keterangan :
* Perintah Script / kode tersebut hanya dapat dituliskan pada pilihan mode penulisan "HTML", dan perintah Script tersebut tidak akan dapat berjalan jika di tuliskan pada mode penulisan "Text Rich" atau "Compose".



Maka hasil dari perintah kode HTML di atas adalah seperti tabel di bawah ini :

BARIS KE-1 KOLOM KE-1 BARIS KE-1 KOLOM KE-2 BARIS KE-1 KOLOM KE-3
BARIS KE-2 KOLOM KE-1 BARIS KE-2 KOLOM KE-2 BARIS KE-2 KOLOM KE-3

Contoh 3 :
Jika ingin membuat sebuah tabel yang terdiri dari 2 kolom dengan 2 baris, kemudian pada baris ke 1 diisi dengan teks atau tulisan sedangkan pada baris kedua diisi dengan gambar , maka perintah kode HTML yang digunakan adalah sebagai berikut :


<table border="1">
<tr>
<td>GAMBAR-1</td> <td>GAMBAR-2</td>
</tr>
<tr>
<td><img src="https://lh6.googleusercontent.com/-U8Je37XzJ3A/UKvI1mPEr-I/AAAAAAAAAMU/c6bKGu6RxXg/s144/t-shirt.jpg" height="96" width="144" /></td> 
<td><img src="https://lh6.googleusercontent.com/-yHjHEGIFOwo/UKvI7vVMbXI/AAAAAAAAAMc/v0TrV044lfE/s144/topi.jpg" height="96" width="144" /></td>
</tr>
</table>

Keterangan :
* Perintah Script / kode tersebut hanya dapat dituliskan pada pilihan mode penulisan "HTML", dan perintah Script tersebut tidak akan dapat berjalan jika di tuliskan pada mode penulisan "Text Rich" atau "Compose".
* Pada text / tulisan yang berwarna merah pada script diatas adalah link URL tempat penyimpanan gambar. Silahkan diganti dengan URL gambar yang akan ditampilkan ke dalam tabel.
height adalah ukuran tinggi gambar, silahkan diatur dan disesuaikan dengan keinginan.
width adalah ukuran lebar gambar, silahkan diatur dan disesuaikan dengan keinginan

Maka hasil tampilan dari perintah kode HTML di atas adalah seperti yang terlihat pada tabel di bawah ini :

GAMBAR-1
GAMBAR-2



Selamat mencoba, semoga dapat bermanfaat




Artikel Terkait:

10 komentar:

Anonim mengatakan...

Makasih kak atas tips nya ^^

Nofri mengatakan...

itu tabelnya sudah menyesuaikan otomatis sama ukuran gambar kan?

meydhiwiratama mengatakan...


kita juga punya nih artikel mengenai 'Tabel HTML', silahkan dikunjungi dan dibaca , berikut linknya
http://repository.gunadarma.ac.id/bitstream/123456789/7036/1/0000010372-_Jurnal_STIK_dty_20120710.pdf
terimakasih
semoga bermanfaat

Yami Khoerul mengatakan...

Thankss Gan.. langsung dicoba

pulsaekstra mengatakan...

ikutan nyimak Gan...

Unknown mengatakan...

Good job kawan Teruslah berkarya dan berbagi cerdaskan generasi penerus anak bangsa negara kita tercinta indonesia

Unknown mengatakan...

Thanks gan infonya... bermanfaat sekali buat pemula kayak saya...

Oia gan kalau mau kasih warna caranya gimana ya?

kaduthokcay mengatakan...

ternyata bisa juga di pasang table ane, makasih tutor nya gan

download silabus kurikulum 2013 sd mengatakan...

terima kasih mas sudah bantu ane, dari kemarin muter2 akhirnya nemu juga...

Christian Tarigan mengatakan...

kerennnn kunbal ya www.christiantarigan.id/

adf.ly - shorten links and earn money!
 
Support : DEJAVANTA | KARYA MANDIRI
Copyright © 2010. D E J A V A N T A - All Rights Reserved
Template by Creating website Modify by DEJAVANTA
Proudly powered by Blogger