Membuat tabel pelengkap dalam postingan
Menjumpai sahabat - sahabit brader dan teman online lainya pasti identik dengan rasa ingin selalu
Berbagi pengetahuan yang sekiranya bisa bermanfaat. hingga pada satu pertemuan kali ini terlintas
Dalam benak saya akan berbagi cara Membuat tabel pelengkap dalam postingan walau cara ini
Bisa di bilang cara kuno dan mungkin diantara sobat sudah banyak yang paham pada artikel yang
Akan saya bagikan ini tetapi. tidak menutup kemungkinan bagi sobat yang belum tau dengan Trik
Ini di persilahkan simak berikut di bawah ini berbagai pilihan tabel untuk kebutuhan postingan blog
Sebelum anda melanjutkan artikel ini jika ingin melihat hasil dari tutorial ini silahkan kunjungi
Halaman berikut ini artikel tersebut yang memakai tabel ini buka halaman : Examples Demo
Cara membuat tabel pelengkap dalam postingan :
Tabel adalah selector untuk menempatkan teks artikel pada yang di anggap pentinga dalamSatu box columns dan untuk di gunakan pada bait postingan blog anda yang berbasic apapun
Di bawah ini Interesting collection tabel dengan berbagai bentuk pilihan Table box and tabs
01. Contoh tabel dengan 1 kolom
<table auto="" border="1"><tbody>
<tr> <td>INI CONTOH TABEL 1 KOLOM</td></tr>
</tbody></table>
Di bawah ini hasilnya :
| INI CONTOH TABEL 1 KOLOM |
02. Contoh tabel dengan 1 kolom 2 baris
<table auto="" border="1"><tbody>
<tr> <td>INI CONTOH TABEL 1 KOLOM</td> </tr>
<tr> <td>INI CONTOH TABEL 1 KOLOM</td> </tr>
</tbody></table>
Di bawah ini hasilnya :
| INI CONTOH TABEL 1 KOLOM |
| INI CONTOH TABEL 1 KOLOM |
03. Contoh tabel dengan 3 kolom
<table border="1" bordercolor="#0008b" cellpadding="2" cellspacing="2" style="background-color: white; width: 400px;"><tbody>
<tr> <th colspan="3">Contoh Tabel 3 kolom untuk halaman postingan</th> </tr>
<tr> <td>Kolom Satu</td> <td>Kolom Dua</td> <td>Kolom Tiga</td> </tr>
<tr> <td>Kolom Empat</td> <td>Kolom Lima</td> <td>Kolom Enam</td> </tr>
<tr> <td>Kolom Tujuh</td> <td>kolom Delapan</td> <td>Kolom Sembilan</td> </tr>
<tr> <td>Kolom Sepuluh</td> <td>Kolom Sebelas</td> <td>Kolom Dua Belas</td> </tr>
<tr> <td>Kolom Tiga Belas</td> <td>Kolom Empat Belas</td> <td>Kolom Lima Belas</td> </tr>
</tbody></table>
Di bawah ini hasilnya :
| Contoh Tabel 3 kolom untuk halaman postingan | ||
|---|---|---|
| Kolom Satu | Kolom Dua | Kolom Tiga |
| Kolom Empat | Kolom Lima | Kolom Enam |
| Kolom Tujuh | kolom Delapan | Kolom Sembilan |
| Kolom Sepuluh | Kolom Sebelas | Kolom Dua Belas |
| Kolom Tiga Belas | Kolom Empat Belas | Kolom Lima Belas |
Sekilas keterangan kode diatas :
Label penutup <th colspan="3"> dan tag penutup </th> yaitu kode untuk
Memenggal atau juga menyatukan 3 (tiga) kolom dari contoh tabel diatas
Label pembuka <td> dan dan tag penutup </td> ini adalah kode untuk membuat
Baris tabel label pembuka <tr> dan tag penutup </tr> dalah pemisah baris tabel
Width - height adalah ukuran kode untuk mengatur lebar - tinggi seluruh tabel
* Cellspasing adalah jarak antara kolom
* Cellpadding adalah jarak didalam kolom
* Colspan adalah menyesuaikan jumlah kolom
4. Contoh tabel untuk 2 kolom 4 baris
<table border="2" bordercolor="#00008b" style="background-color: white; width: 400px;"><tbody>
<tr> <td align="center">
Title 1</td> <td align="center">INI CONTOH TABEL 2 KOLOM 4 BARIS</td> </tr>
<tr> <td align="center">
Tag 2</td> <td align="center">INI CONTOH TABEL 2 KOLOM 4 BARIS</td> </tr>
<tr> <td align="center">
Tag 3</td> <td align="center">INI CONTOH TABEL 2 KOLOM 4 BARIS</td> </tr>
<tr> <td align="center">
Tag 4</td> <td align="center">INI CONTOH TABEL 2 KOLOM 4 BARIS</td> </tr>
</tbody></table>
Di bawah ini hasilnya :
Title 1 | INI CONTOH TABEL 2 KOLOM 4 BARIS |
Tag 2 | INI CONTOH TABEL 2 KOLOM 4 BARIS |
Tag 3 | INI CONTOH TABEL 2 KOLOM 4 BARIS |
Tag 4 | INI CONTOH TABEL 2 KOLOM 4 BARIS |
05. Contoh tabel 2 baris 2 kolom
<table auto="" border="1"><tbody>
<tr> <td>TABEL 2 BARIS 2 KOLOM</td> <td>TABEL 2 BARIS 2 KOLOM</td> </tr>
<tr> <td>TABEL 2 BARIS 2 KOLOM</td> <td>TABEL 2 BARIS 2 KOLOM</td> </tr>
</tbody></table>
Di bawah ini hasilnya :
| TABEL 2 BARIS 2 KOLOM | TABEL 2 BARIS 2 KOLOM |
| TABEL 2 BARIS 2 KOLOM | TABEL 2 BARIS 2 KOLOM |
06. Contoh 1 baris tabel 5 kolom
<table auto="" bgcolor="" border="1" cellpadding="5" cellspacing="5" gt=""><tbody>
<tr> <td align="center" colspan="5">CONTOH JUDUL 1 LABEL 5 KOLOM</td></tr>
<tr> <td align="left" bgcolor="">LABEL 1 </td> <td align="left" bgcolor="">LABEL 2 </td> <td align="left" bgcolor="">LABEL 3 </td> <td align="left" bgcolor="">LABEL 4 </td> <td align="left" bgcolor="">LABEL 5 </td> </tr>
<tr> </tr>
</tbody></table>
Di bawah ini hasilnya :
| CONTOH JUDUL 1 LABEL 5 KOLOM | ||||
| LABEL 1 | LABEL 2 | LABEL 3 | LABEL 4 | LABEL 5 |
07. Contoh 2 baris tabel 10 kolom
<table auto="" bgcolor="" border="1" cellpadding="5" cellspacing="5" gt=""><tbody>
<tr> <td align="center" colspan="5">CONTOH JUDUL 2 BARIS LABEL 10 KOLOM</td></tr>
<tr> <td align="left" bgcolor="">LABEL 1 </td> <td align="left" bgcolor="">LABEL 2 </td> <td align="left" bgcolor="">LABEL 3 </td> <td align="left" bgcolor="">LABEL 4 </td> <td align="left" bgcolor="">LABEL 5 </td> </tr>
<tr> </tr>
<tr> <td align="left" bgcolor="">LABEL 6 </td> <td align="left" bgcolor="">LABEL 7 </td> <td align="left" bgcolor="">LABEL 8 </td> <td align="left" bgcolor="">LABEL 9 </td> <td align="left" bgcolor="">LABEL 10 </td> </tr>
<tr> </tr>
</tbody></table>
Di bawah ini contohnya :
| CONTOH JUDUL 2 BARIS LABEL 10 KOLOM | ||||
| LABEL 1 | LABEL 2 | LABEL 3 | LABEL 4 | LABEL 5 |
| LABEL 6 | LABEL 7 | LABEL 8 | LABEL 9 | LABEL 10 |
08. Di bawah ini contoh tabel untuk galeri photo iklan, toko online atau yang lain
<table bgcolor="#20b2aa" border="1" cellpadding="5" cellspacing="5" style="width: 400;"><tbody>
<tr> <td align="center" bgcolor="#00fa9a" colspan="5"><img alt="Gallery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjabTrp632U-PCPX_5hUi8YJAhc273Q2sJu2AMsLF8jSxv25cQwUqmvKU4PnkgRivhUxjL8UbrEv1-EM7tIiMZIXmUV3FFjz8sr9BrgFrmSj1pLRNI1pAiq0WSlc5yKgkmnsuTWebtubA2w/s1600/Logo+Blog+Karrysta.jpg" height="150" width="200" /></td></tr>
<tr> <td align="left" bgcolor="">Nama Iklan</td> <td align="left" bgcolor="">Google Adsense</td> </tr>
<tr> <td align="left" bgcolor="">Organisasi</td> <td align="left" bgcolor="">Karrysta</td> </tr>
<tr> <td align="left" bgcolor="">Tips Trik SEO</td> <td align="left" bgcolor="ffd500">Accessories Blogger</td> </tr>
<tr> </tr>
</tbody></table>
Di bawah ini hasilnya :
 | ||||
| Nama Iklan | Google Adsense | |||
| Organisasi | Karrysta | |||
| Tips Trik SEO | Accessories Blogger | |||
Keterangan :
Yang berwarna Merah itu URL gambar ganti menurut gambar yang anda kehendaki
Silahkan anda pilih tabel - tabel diatas dengan cara copy kode Html tabel dan pastekan
Pada halaman posting atau pada sidebar juga bisa pada bagian foter ata bagian mana
Pada blog anda dengan satu catatan memasukan kode ini tepat pada posisi kolom Html
Word utterance :
Demikianlah sobat beberapa pilihan tabel untuk melengkapi keperluan pada halaman
Postingan anda semoga yang saya hadirkan ini bisa di gunakan sebagaimana mestinya
Semoga bermanfaat ...
66 komentar
Rumit yoo mas.....
Gitu toh caranya.. Lumayan ribet ya mas, hehe
Copy-paste tabel dari word bahkan excel ke blog, hasilnya malah hancur :D
Lumayan nih buat referensi di blog saya :), dengan memakai tabel agar tampak indah banget hhehe :) terima kasih master :)
Engga ribet sih mbak :)
Cuma copy paste aja dan teks nya di ganti, tapi sebelum memposting di preview dulu rapih atau engga :)
Selamat mas Karryst, baru lagi ada kesempatan berkunjung, ternyata ada yang baru lagi...
Izin nyimak dulu mas, soalnya agak ribet menurut saya....
Terima kasih telah membagikan lagi ilmunya....
Perlu dicontoh nih mas tapi kalau udah menyentuh kode2 kepala pusing
saya dulu ada belajar itu di sekolh, pas gurunya nerangin pelajaran sayanya malah subik main geme di belakng.
gak da yang nyerep deh, hahaaha
Kalau bikin table manual pusing juga mas...heheehe :D apalagi kalau banyak hadeueeuuhhh @@,
susyaaahhhh...rumit banget sih Mas?
ini yang saya car-cari dari dulu pak, akhirnya nemu disini,,,
makasih banget pak
lebih mantap lagi kalo style nya pake css dan dipanggil dengan table class='..' td class='..' makin mantep kang, selain simpel, juga balid HTML5 hehe
sedia obat sakit kepala dong mbak :)
kalau saya sebagai pengguna ya tinggal copas saja kodenya, nggak usah dibaca dulu biar nggak bikin puyeng. yang paling bawah bagus lo mas :)
Keren Kang kreatif...
Haturnuhun infona. saya coba pelajari dulu Kang :)
mesti dibaca berulang mas
lengkap dan detil, sy kurang memperhatikan hal ini dalam susunan blog
matur suwun
Selamat pagi dan selamat beraktifitas sobatku...
Ijin menyimak artikel yang cukup bermanfaat buat saya nie, saya suka liat diblognya temen-temen suka ada tabel saya penasaran gimana cara membuatnya? Dan kebetulan disini lagi membahasnya nie, jadi sewaktu-waktu membutuhka saya ga bingung lagi tinggal ubek-ubek aja dibognya mas karrys...
kalau table borderless alias bordernya tidak kelihatan atau transparan gimana mas ?
wah seumur umur sepertinya saya belum pernah deh mas posting menggunakan tabel.. ternyata begitu to caranyà ..
hmmm semakin jelas nih kalau mas karryst adalah master yang tidak mau ngaku nih.. hayo hayo.. ngaku aja deh mas.. ntr saya mau belajar banyak sama mas karryst... hehehe
Jujur saja ini buat saya adalah pengetahun baru,dimana sebelumnya belum pernah tahu caranya unutk membuat table seperti ini pada postingan,,,ok sob terimakasih untuk tutornya,,,salam succes selalu,,,,,,,,,,,,,
Iya yah, setuju... RIBET :)
Saya nyimak dulu, kalau harus mengedit" HTML lumayan buat pusing juga hihihi
Mudah koq Mbak Cii tinggal copy dan paste kode tabel
Yang diinginkan pada artikel baru atau pada sidebar atau foter
Betul kata Mas Luthfi ngedit teks di dalam tabel sama kaya
Buat postingan, nulis di kolom Composed kalau masukin kode
Tabelnya di dalam Kolom Html. jangan kebalik
Enggak ribet malah mudah koq Mbak Maria jika tabel ini
Di butuhkan. jika tidak yah jangan di Pakai makasih kunjnganya
Oo jd gitu toh cara bikin table d postingan.script nya saya simpan dulu mas.ntar klo d perlukan bisa langsung pasang.trims!
selamat sore mas karysta senang sekali rasanya saya dikasii Ilmu baru ama mas karrysta hehe makasii yah atas ilmunya dan saya izin bookmark nih buat kapan kapan dipraktekan :D
oooh begitu ya kang... pantesan saya copy paste dari word atau excel malah amburadul gak ketulungan, ternyata pakai gituan ya....terimakasih kang... langsung comot
saya biasanya untuk membuat tabel itu copas dari microsoft word mas wkwkwkwk hasil nya jelek banget ^^
jadi perlu pakai script ya untuk buat tabel, supaya bisa terlihat rapi dan menarik
terimakasih mas karis atas share nya ya. salam hormat buat semuanya :)
Kepingin siihh sebenarnyaa.. Tapi kalau sudah lihat edit mengedit ini kepalaku jadi nyuut nyuutan eee
Wah bisa di variasi sesekali hati ya mas tabelnya
makasih kang, ijin bookmark :)
Yang terakhir kayaknya keren tuh, saya save kodenya ya mas, makasih :)
Mudah koq Mbak Khusna. baca dengan seksama dan jika
Mau memakai script Tabel ini tinggal copy dan paste di artikel
Baru Mbak Khusna pada kolom HTML jangan di Composed
jika mau memakai Tabel ini Makasih
Harus ada penambahan style css hover nya Mas Agus kebetulan
Table borderless, gak di sertakan dalam kolection tabel ini
Atau Mas Agus tambah aja style hover nya sebelum border
Iya juga Kang Adhy tapi itung-itung ngasah ketrampilan hh :-)
Silahkan Mbak Titis gak ngedit HTML koq Mbak instant
Tinggal copas jadi deh dengan meletakan kode tabel
Pada artikel baru. pada kolom Html jangan di compose
Akh Percaya deh Mas Nady orang Merendah terus bilangnya
Seumur-umur belum pakai tabel padahal mah master nya hhh
Bukan gak ngaku Mas Nady..? lha wong saya juga masih belajar
Dan semua isi content blog saya adalh bahan prakteknya hehhe
Makasih Mas sudah berapresiasi bareng saya salam blogging :))
Silahkan Mbak Dwi semoga bermanfaat
Silahkan Mas A.Wahyu semoga bermanfaat yah Mas. sukses deh
Wahh Pak Uda bisa aja deh. biasa aja Pak hal yang seadanya
Dalam format word memang ada. namun ini lebih praktis dan
Bisa edite sesuka hati saat buat artikel baru. silahkan Pak Uda
Semoga bermanfaat buat Blog Pendidikan Bapak Uda Awak
Silahkan Mbak Indah gak bikin kepala pusing deh Mbak
Betul Kang Ucup kalau kepala pusing minum Entrostop hhh
Betul sekaliMas Rahmat. edit saja sesuka hati dan pilih manasuka
Silahkan Mbak Ririn semoga bisa bermanfaat yah Mbak
Makasih atas kunjunganya salam hormat kembali mbak Rin.
banyak juga scriptnya ya mas, tapi hasilnya keren tentunya :)
makasih infonya ntar dipraktekkan biar ngerti tabel pelengkap di postingan :D
salam hormat :)
Kalo nyut-nyutan segera minum obat sakit kepala mbak :D
wah keren juga yah kalau pake tabel jadi terlihat rapi, makasih buat tutorialnya mas Karysta kapan-kapa saya coba praktekkan :)
oh ya mbak Indri yang di artikelnya mbak Indri itu pake tabel apa bukan yah keren juga :)
Tabelnya yg simpel" aja udah bgus kok
Silajkan Mang namun jika lebih bagus dan baiknya
Di poles dan di hias agar lebih + semua nya makasih Mang
Silahkan Mas Anthonie jika bermanfaat Mas sambil di otak-atik
Agar lebih keren dan baik di segal sudut nya yah Mas Makasih
tapi cuma hancur saja kan mbak Khaira,tidak pai Luluh dan berantakan haha
waa saya belum pernah bikin tabel di postingan..
makasih infonya :)
jangan sampai pingsan lho, mbak
diasah terus hingga setajam silet
klo saya di bookmark dulu. siapa tau besok bikin artikel yg perlu tabel hahaha
Kreatif postingannya Sob, perlu dipelajari nih buat tabelnya. Makasih
caranya gimana mas ?
Nggak biasa minum obat kok marnes...
Minum teh.. Ok
kalo menurut saya pribadi ribet kang kalo CSSnya dicampur ama HTML table, setiap ingin membuat table harus mengatur tampilan table terlebih dahulu
Bisa dicoba nih tapi kalo butuh saja :D
Terimakasih..
Silahkan Mas Firman semoga bermanfaat Sobat :)
tapi saya nggak ngerti otak-atiknya mas hehe...
Sip mas Karysta sekarang saya jadi tahu cara bikin tabel di artikel, keren mas :)
kalo ditambah dengan css3 mungkin akan lebih keren :) Nice Tutor
Weh Kren Sob, Follow sukses untuk blog ini
ternyata tidak begitu sulit ya mas untuk membuat tabel di postingan blog. jadi dengan kode css bisa untuk membuatnya. harus dicoba nich tutorialnya. terimakasih mas karis atas share nya ya :)
Tolongin Dong Pak Budy heheh :D
selamat pagi kang,, saya kembali hadir niii.. :D menikmati ilmu dari akng karris yg bermanfaat ini :)
Jangan Komentar Promosi, Link Hidup, Spam Karena akan terhapus
Silahkan untuk "Follower blog, atau Berlangganan Lainya" di blog ini
Untuk Mengkonversi kode dan icon Smiley silahkan Klik dibawah ini
Show Konversi KodeHide Konversi Kode Show SmileyHide Smiley Follower