adsense link 728px X 15px

Saturday, June 26, 2010, 

Pembuatan table dalam blog terkadang memang harus digunakan. Misalkan saja kita ingin memposting artikel tentang sebuah data, kode warna, dsb. Bagi anda yang sudah lama berkecimpung di dunia blogger mungkin sudah di luar kepala untuk membuat table, untuk itu pada postingan kali ini saya tujukan kepada blogger pemula yang belum begitu familiar dengan kode untuk pembuatan tabel, pada intinya hanya mengulang saja ^^,. Berikut ini contoh-contoh pembuatan table.


  1. Tabel 1 kolom

    Kodenya:

    <table border="1">
    <tr><td>Kolom 1</td></tr>
    </table>

    Hasilnya:

    Kolom 1
  2. Tabel 2 kolom

    <table border="1">
    <tr><td>Kolom 1</td><td>Kolom 2</td></tr>
    </table>

    Hasilnya:

    Kolom 1Kolom 2

    * Dari kode di atas dapat diambil kesimpulan jika tag td menentukan kolom
  3. Tabel 2 baris

    <table border="1">
    <tr><td>Baris 1</td></tr>
    <tr><td>Baris 2</td></tr>
    </table>

    Hasilnya:

    Baris 1
    Baris 2

    * Dari kode di atas dapat diambil kesimpulan jika tag tr menentukan Baris
  4. Tabel 1 Kolom 2 Baris

    <table border="1">
    <tr><td rowspan="2">Kolom 1</td><td>Baris 1</td></tr>
    <tr><td>Baris 2</td></tr>
    </table>

    Hasilnya:

    Kolom 1Baris 1
    Baris 2

    * Dari kode di atas dapat diambil kesimpulan jika tag rowspan berfungsi untuk penggabungan cell dalam satu kolom dan angka 2 pada rowspan menentukan jumlah cell yang digabung
  5. Tabel 1 Baris 2 Kolom

    <table border="1">
    <tr><td colspan="2">Baris 1</td></tr>
    <tr><td>Kolom 1</td><td>Kolom 2</td></tr>
    </table>

    Hasilnya:

    Baris 1
    Kolom 1Kolom 2

    * Dari kode di atas dapat diambil kesimpulan jika tag colspan berfungsi untuk penggabungan cell dalam satu baris dan angka 2 pada colspan menentukan jumlah cell yang digabung
  6. Penggunaan Tag cellpadding dan bgcolor

    <table border="1" cellpadding="10">
    <tr><td bgcolor="#ff9900">Tabel</tr>
    </table>

    Hasilnya:




    Tabel

    * Dari kode di atas dapat diambil kesimpulan jika tag cellpadding berfungsi untuk memberi jarak text dengan border dan angka 10 pada cellpadding menentukan jarak antara text dengan border(dalam satuan px)
    * tag bgcolor berfungsi untuk memberi background warna pada cell



  7. Penggunaan tag width, cellspacing, dan align

    <table border="1" cellspacing="10">
    <tr><td width="200" align="center">Lebar Kolom ini 200px</td>
    <td width="150" align="center">Lebar Kolom ini 150px</td></tr>
    </table>

    Hasilnya:

    Lebar Kolom ini 200pxLebar Kolom ini 150px

    * Dari kode di atas dapat diambil kesimpulan jika tag cellspacing berfungsi untuk memberi jarak antar cell dan angka 10 pada cellspacing menentukan jaraknya(dalam satuan px)
    * tag align berfungsi untuk mengatur posisi text pada cell pada area horizontal (left,center,right)



  8. Penggunaan tag height dan valign

    <table border="1" valign="middle">
    <tr><td height="100">Tabel</tr>
    </table>

    Hasilnya:




    Tabel

    * Dari kode di atas dapat diambil kesimpulan jika tag valign berfungsi untuk mengatur posisi text pada area vertical (top,middle,bottom)
    * tag height berfungsi untuk menentukan tinggi cell (dalam satuan px)



Catatan:
&187; Memberi angka 0 pada border berfungsi untuk mengilangkan border.

     Saya rasa cukup sekian dulu tutorial kali ini. Selanjutnya anda bisa berkreasi sesuai keinginan anda. Semoga bermanfaat.... ^^,







34 Comments:

ariefborneo said...  on  June 26, 2010 at 10:51 PM

Pertamax...mantap info nya sob..salam kenal n salam persahabatan

Umy Diary said...  on  June 27, 2010 at 12:49 AM

kedua,,,
maksih y saran2 nya,,,

sol tabel,, kebetulan umy jarang pake,,,
namanya juga diary,, paling2,, tulisan aja ;))

Azzmie said...  on  June 27, 2010 at 1:56 AM

maaf yea belum bisa comment, soalnya masih newbie dan belum mudeng.
salam persahabatan, ijin ikutan jadi follower di blog ini

gayuh said...  on  June 27, 2010 at 1:58 AM

keren bro... jadi pengen nyoba nich.. tapi q masih mumet sama kode kode html

encosgoblog said...  on  June 27, 2010 at 2:00 AM

Makasih gan info'y ini yang aku cari dari kemarin tp ntr privat tentang pembuatan tabel ini wkwkwk biar lbh jelas al'y saya lum terlalu paham ?

berita untuk negri said...  on  June 27, 2010 at 3:51 AM

jadi inget waktu posting operator tentang php,,agak rumit juga bikin table sob..

herman said...  on  June 27, 2010 at 5:45 AM

oke mas masda...
thx infonya, saya sudah follow blog mas, siapa tau mas bisa follow balik supaya memudahkan untuk saling memberikan komentar dikemudian hari...

mas, desain themesnya buat sendiri? hebat dunkzz...
tapi kalo bukan buat sendiri hati2 skrg lagi banyak sweeping hak paten pembuatan themes2, jadi kalo bukan buat sendiri, dibagian paling bawah saran saya dikembalikan ke link pembuat...
thx

rawins said...  on  June 27, 2010 at 7:32 AM

dipake di blogspot bisa yah..?

elok langita said...  on  June 27, 2010 at 5:15 PM

:D rada rumit iaah,, tapi waktu itu elok nyoba, kopi paste tabel langsung bisa.. tapi, patut di coba juga tipsnya..

mkashy buat infonyaa,, mkashy juga udah ngasih tau artikel terbaru blog ini.. :D Jadi nambah wawasan..

happy blogging.. :D

saka said...  on  June 28, 2010 at 12:57 AM

Thanks for sharing ya :D
udah pernah nyoba Maz, sukses dan hasilnya TOP

muzzy musthofa said...  on  June 28, 2010 at 3:24 AM

mantab nich infonya....

Hosting Murah Indonesia Indositehost.com said...  on  June 28, 2010 at 4:45 AM

kreatif banget pake kemampuan html... saya dulu pake html belajarnya sebentar... jadi mungkin lupa kalo ga diasah kaya lo.

mansuka life said...  on  June 28, 2010 at 4:58 AM

wah lengkap mas.... bisa jadi bahan reverennsi neh

Cerita aja said...  on  June 28, 2010 at 7:23 AM

ini pelajaran semester lalu hayah kode html emang bikin pusing, tp nice! thx atas postingannya.

om rame said...  on  June 28, 2010 at 8:56 AM

terus terang - terang terus dari duLu saya pingin buat yang sperti ini tapi banyak yang enggak dimengerti mengenai teknisnya, mau banyak tanya pun dikhawatirkan justru merepotkan om_mazda jadi untuk tutor yang ini cukup mengucapin terima kasih aja tanpa mencobanya. mohon dimakLumi aja yah om, namanya juga masih newbie. hehehe...

Masda said...  on  June 28, 2010 at 9:09 AM

@all, makasih kunjungannya, segera segera berkunjung balik
@Herman, makasih mas sarannya dan makasih juga kunjungannya... segera saya follow balik... :)

ariefborneo said...  on  June 28, 2010 at 12:28 PM

Datang lg Sob sambil baca-baca info menarik...thnxs n slamt beristirahat

Anonymous said...  on  June 28, 2010 at 8:28 PM

assalmkm
ok infoy.. ikutan comment aj tp lum nymbung g7..
maf jg xlo byk tnya/ mhon d maklumi al'y msih newbie
maen k blog sya sbntar... itung2 comment bijaky..kritik..saran
di tunggu silaturhmiy// syukur2 xlo d follow balik
http://ukhtinana.blogspot.com
matur nuhun ud smpet bc pesn kcil ini
salam pershabtan ///

Unknown said...  on  June 29, 2010 at 7:59 AM

seperti tutorial html dasar ya?

om rame said...  on  June 29, 2010 at 8:51 AM

nanti kaLo waktunya agak panjang mau nyoba ach.
seLamat istirahat aja yah om, semoga seLaLu daLam keadaan sehat dan afiat.

hendro-prayitno said...  on  June 29, 2010 at 4:22 PM

mampir lagi..aku sudah up date sob,,

Hosting Murah Indonesia Indositehost.com said...  on  June 29, 2010 at 9:35 PM

apakah tabler mengganggu seo?

aLamathuR d'hileudjapanist II said...  on  June 30, 2010 at 7:55 PM

referensi yang bagus, disampaikan dengan bahasa yang sederhana... saya dah coba aplikasikan tabel ini dalam sidebar di blog saya... thx

Gate Remote Control said...  on  March 1, 2011 at 3:43 AM

That was a really good article, thanks for taking the time to put it together! You have managed to point out some very good points. I can't say that I completely agree about some points, but you certainly have a unique perspective. Anyway, I like your post

GSM Remote Control said...  on  March 1, 2011 at 3:43 AM

Excellent blog and great posts.I really liked the way you present your ideas to the readers.

Universal Garage Remote said...  on  March 1, 2011 at 3:44 AM

Nice detailed articles but if I may suggest, you need to bring some imagery to draw attention better, too much literature makes it hard to focus and grab interest. Just my 2 cents.

Cell Phone Remote Control said...  on  March 1, 2011 at 3:45 AM

Really nice site with clean layout and interesting articles.

Gate Safety Edge said...  on  March 1, 2011 at 3:46 AM

It's an excellent post. Very interesting and informative.

Devon Caravan Parks said...  on  March 1, 2011 at 3:46 AM

I’m glad that I came across your site. I have read a number of your articles and they were all an excellent read and very informative. Thanks :)

Gate Remote Control said...  on  March 26, 2011 at 2:35 PM

That was a really good article, thanks for taking the time to put it together! You have managed to point out some very good points. I can't say that I completely agree about some points, but you certainly have a unique perspective. Anyway, I like your post

Devon Caravan Parks said...  on  March 26, 2011 at 2:36 PM

I’m glad that I came across your site. I have read a number of your articles and they were all an excellent read and very informative. Thanks :)

furniture removals said...  on  August 4, 2011 at 11:12 AM

You write about many interesting things and the themes you chose are fascinating. Can we expect any new feeds to your blog ?

Universal Garage Remote said...  on  August 14, 2011 at 2:23 PM

Very interesting. I will try this out now and get back to you for feedback. :) Thanks for sharing this. :)

gifts to pakistan said...  on  April 24, 2012 at 1:34 AM

I really liked your article. Keep up the good work.

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

It's Me

My Photo
Masda
Seorang blogger "KOTA GADIS" yang selalu penasaran dengan sesuatu hal yang baru. Belajar, belajar, dan terus belajar serta berusaha untuk menerapkannya. Karena menurut saya "Ilmu itu untuk diterapkan bukan untuk dipelajari".

Facebook Twitter
View my complete profile

Exchange Link

MasdaZine

Followers