Choose Your Language
English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified
Language

Perlu Disini

Untuk mempercepat download software silahkan klik DISINI.
Agar dapat meng-extract kompressan software klik DISINI.

Loading

Trick Membuat Table Pada Blog | Lengkap

Minggu yang cerah; Kalo sobat blogger cari di google mungkin sudah banyak trick seperti ini. Tetapi saya akan share dan menjawab pertanyaan diary lusi tentang membuat tabel pada blog. Semua pasti sudah tahu apa itu tabel. Jadi tidak usah panjang lebar langsung ke pembuatannya saja ya, hehe,,

BAG I . Tabel Dasar

Kode html “sederhana” untuk pembuatan table adalah seperti dibawah ini, (menggunakan table 2 column dan 1 row)

    <table border="1">

    <tr>

    <td></td> <td></td>

    </tr>

    </table>

Kita buat contoh seperti langkah diatas dengan kode seperti ini;

<table border="1">
<tr>

<td>Kolom 1</td> <td>Kolom 2</td>

</tr>
</table>

Hasilnya akan menjadi seperti ini;

Kolom 1 Kolom 2

Jika sobat ingin mengatur sendiri lebar kolom maka tambahkan width="200" seperti contoh berikut;

<table width="200" border="1">
<tr>
<td>

Contoh kolom 1

</td>
</tr>
<table>

Hasilnya seperti ini;

Contoh kolom 1
 
Jika sobat blogger menginginkan tulisan tepat ditengah-tengah kolom tingaal tambahkan align="center" pada kolomnya. lihat contoh berikut
<table width="200" border="1"> 
<tr> 
<td align="center"

Contoh kolom 1

</td> 
</tr> 
</table> 

Hasilnya seperti ini;
 
Contoh kolom 1
 

Jika sobat blogger menginginkan garis blogger yang lebih tebal, tinggal ubah saja angka border menjadi lebih besar. Lihat contoh berikut;

<table width="200" border="8">
<tr
> <td align="center">

Contoh Kolom 1 

</td
> </tr
> </table>

Hasilnya seperti ini;
 
Contoh Kolom 1

Jika sobat menginginkan gambar dengan kata-kata ditabel sampingnya

<table border="1">
<tr>
<td><img src="http://www.smileycodes.info/emo/id/57.gif" width="54" height="48" border="0" alt="http://www.smileycodes.info" /></a></td> <td><b>BISAHKAH...?</b><br/>Kalo kita sekarang bilang kita pasti bisa terus semangat dan bekarya dalam dunia blogger. Saling kunjung-mengunjungi dan memberikan masukkan. Pasti Bisa???...</td></tr> </table>

Hasilnya seperti ini;

           
http://www.smileycodes.info BISAHKAH KITA ???
Kalo kita sekarang berkata kita pasti bisa, terus semangat dan bekarya dalam dunia blogger. Saling kunjung-mengunjungi dan memberikan masukkan. Pasti Bisa???...


Kode html “sederhana” untuk pembuatan table adalah seperti dibawah ini, (menggunakan table 2 column dan 2 row)

<table width="300" border="1">
<tr>
<td align="center">

Contoh


</td>
<td align="center">

Contoh juga

</td>
</tr>
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga

</td>
</tr>
</table>

Hasilnya seperti ini;

Contoh Contoh juga
Contoh Contoh juga

Jika tabelnya ingin diberikan warna tinggal tambahakan kode bgcolor="kode warna" seperti contoh;

<table width="300" border="1" bgcolor="black">
<tr bgcolor="brown">
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga

</td>
<tr bgcolor="yellow">
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga

</td>
</tr>
</table>

Hasilnya seperti ini;

Contoh Contoh juga
Contoh Contoh juga

Sekarang saya beri contoh terakhir dengan mengunakan fungsi caption serta TH (table header). Misalkan saya ingin membuat sebuah tabel data dari nama-nama teknisi. Data-data yang ingin di buatkan tabel, misalkan seperti ini, sumber dari sini :

Tabel 31
Data Blog
No       Nama
1          Dempo
2          Awang
3          Putra    

<table align="left" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 31</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Data Blog</th>
</tr>
<tr bgcolor="brown">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Dempo</td>
</tr>
<tr bgcolor="orange">
<td>2.</td>
<td>Awang</td>
</tr>
<tr bgcolor="pink">
<td>3.<
;/td>
<td>Putra</td>
</tr>
</table>

Hasilnya seperti ini;

Tabel 31
Data Blog
No. Nama
1. Dempo
2. Awang
3. Putra











Untuk selanjutnya sobat blogger bisa memvariasi tabel sesuai keinginan sobat blogger. Gimana? gampang-gampang lumayan kan ? hehe,, di coba saja pasti bisa.

Nb;Jika menganggap garis border mengganggu pemandangan, sobat bisa menghilangkan garisnya dengan mengubah garis pada border="0"

-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------


Artikel Terkait:

40 komentar:

oempak mengatakan...

kereenn.. thanks kawan, saya blm pernah bs bkin table nih wakwakwak

anggasona mengatakan...

mantab nih sob, spertinya perlu dicoba, makasie infonya.. ;) keep share n happy blogging ....

grecek mengatakan...

mantap nih sob....
selalu ada yg baru setiap berkunjung kesini...
lanjutkan dan sukses sllu...

DEMPO AWANG PUTRA ELANG ANTARNUSA mengatakan...

@oempak; semoga dengan melihat cara d atas jd bisa sobat. hehe,
@anggasonal; sm2 sobat. sukses!
@grecek; sukses juga buat sobat, dan jngan lupa selalu berkunjung

beb mengatakan...

wah bener2 keren nih ...... siap mencoba coy ...

weding mengatakan...

makasih infonya. mantep

DEMPO AWANG PUTRA ELANG ANTARNUSA mengatakan...

@beb; silahkan mencoba
@weding; sm2 sobat. sering2 datang k mari y

Ka Damar mengatakan...

wah, emang lengkap tuh....keren lah

salam kenal nih sebelumnya, kunjungan perdana nih, biar bisa update postingan terus, blognya saya follow yah.

Jika berkenan silahkan mampir dan follow juga, sekalian tukeran link ju^

Thx

DEMPO AWANG PUTRA ELANG ANTARNUSA mengatakan...

@ ka damar; thanks sobat atas follownya.
tukar link, setuju sj sy :)

Kang Martho mengatakan...

trims sebelumnya... materi ini yang ku cari2 . langsung praktek

DEMPO AWANG PUTRA ELANG ANTARNUSA mengatakan...

@ mam iin; termia kasih juga,sering2 berkunjung kemari y

ami jr mengatakan...

Sob, ku pengen buat sebuah tabel yang berisi widget exchange link ama kode link banner untuk di tempatkan di footer blog ku. caranya gimana yah ?

DEMPO AWANG PUTRA ELANG ANTARNUSA mengatakan...

@ ami jr; hmm,,, sy masih kurang mengerti maksud sobat. coba d pahami dulu kode dasar pembuatan tabelnya itu. gampang kog, seperti tabel2 di http://elang-antarnusa.blogspot.com/2010/07/pemenang-piala-dunia-tahun-1930-2010.html

coba aj lihat. cara pembuatannya gampang aj kog

mixedfresh mengatakan...

Dicoba dulu dah sob....n

Pendi AW mengatakan...

wah kya belajar pemrogaman web nih...

makasih tutornya mas...

DEMPO AWANG PUTRA ELANG ANTARNUSA mengatakan...

@ mixed; d coba mlah lebih bagus sobat.
@ pendi; hmmm mungkin bisad bilang mirip sih. ini kode2 HTML saja kog

PIK Remaja Al-Hikmah mengatakan...

wah ini dia, dari kemarin Q ingin membuat tabel di postingan, akhirnya ketemu triknya disini

DEMPO AWANG PUTRA ELANG ANTARNUSA mengatakan...

@ PIK; klo begitu silahkand coba sob, sukses

asmanu mengatakan...

tutorialnya sangat membantu..terimakasih atas sharenya...

cara mengatasi ejakulasi dini mengatakan...

langsung di coba

pasang iklan gratis mengatakan...

Tingkatkan tutorial mengenai pembelajaran blogger

DEMPO AWANG PUTRA ELANG ANTARNUSA mengatakan...

@asmanu; sm sobat. thanks y udah berkunjung,
@cara mengatasi; okelah klo begitu sob.
@pasang iklan; ok sob, sy usahakan

etam grecek mengatakan...

sllu ada untukmu sob...

detective-buzz mengatakan...

mantavvbbbb,,

DEMPO AWANG PUTRA ELANG ANTARNUSA mengatakan...

@etam; thanks sobat :)
@detective buzz; sm2 sobat. silahkan d coba :)

wiz mengatakan...

sip, lengkap..dibahas tuntas mengenai table

dan biasanya dulu..table ini dijadikan layout sebuah website...sekarang udah pada pake css meskipun menurut isu penggunaan table akan lebih menghemat bandwith daripada penggunaan css

salam kenal bro..

Ferdinand mengatakan...

Wah aku udah tau dari Kang Rohman nie dulu.....

tapi berhubung BLogku ga pernah pake2 tabel jadi ampe sekarang aku belum pernah pake Sob hhe....

thnx 4 share... met akhir pekan...

Diary Lusi mengatakan...

MkCh kaaq ya cara bwtx

mp3 gratis mengatakan...

trik bagus sobat, dari dulu aq gak tau caranya buat tabel di blog, sekarang dah bisa!!!

Unknown mengatakan...

keren, trik buat tabelnya. sekarang gak kesulitan lagi untuk buat tabel, thanks infonya

Kian Coi mengatakan...

good post sob...!!!

7 Rahasia Website Pemula = DUIT mengatakan...

nice content...
:-D

IF info mengatakan...

bagus gan boleh dicoba

soccer mengatakan...

sambil cari artikel rupanya ada disini, tks gan artikelnya

lowongan kerja terbaru mengatakan...

sebuah posting yang bagus, tks

sarang semut mengatakan...

wah mangstab bro... kunjungan balik ke http://sarangsemut-bogor.blogspot.com

tai mengatakan...

bagaimana caranya supaya masukin gambar di dalam table, sharing ya dan kunjungi blog baruku :)

obat penambah nafsu makan anak mengatakan...

daftar backlinknya bagus sekali, makasih infonya sangat bermanfaat
semoga sukses saja...

obat alami abses vagina mengatakan...

bagus artikelnya sangat bermanfaat, makasih..
semoga sukses aja

obat alami abses payudara mengatakan...

makasih informasinya sangat bermanfaat

Posting Komentar

 
KLIK DI SINI UNTUK MEMBUATTEXT ON YOUR DEKSTOP| BARU. . . MOZILLA FIREFOX 4.0 ALPHA 1 PORTABLE FULL. KLIK DISINI| KUNJUNGI BERBAGAI SOFTWARE GRATISAN FULL ALIAS NO TRIAL | TERIMA KASIH TELAH BERKUNJUNG