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/AVvXsEgDDV4dE1r0GRJZjeputmHta7MYP2cOBTDclSdtpoOTzbbeffSXIjsp25NzDSGILLGIzVNSG9GF1-pnVNqXYatZZYZSrRluvCWI24bzCzWBD_HELdlwpffWCe8Tbatx5Knv7KUbNoQG4k90/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 Response to "Membuat tabel pelengkap dalam postingan"
Rumit yoo mas.....
BalasGitu toh caranya.. Lumayan ribet ya mas, hehe
BalasCopy-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 :)
BalasEngga ribet sih mbak :)
BalasCuma 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...
BalasIzin 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
Balassaya dulu ada belajar itu di sekolh, pas gurunya nerangin pelajaran sayanya malah subik main geme di belakng.
Balasgak da yang nyerep deh, hahaaha
Kalau bikin table manual pusing juga mas...heheehe :D apalagi kalau banyak hadeueeuuhhh @@,
BalasMas Saud ini memang sahabat kreatif. Yang sederhana bisa jadi luar biasa. Ini contohnya, cara membuat tabel dalam postingan. Dalam postingan saya memang ada satu tabel tapi diambil dari format word. Besok-besoknya izinkan saya mengkopi script di atas untuk membuat tabel, mas Saud.
BalasTerima kasih atas share bermanfaat ini.
susyaaahhhh...rumit banget sih Mas?
Balasini yang saya car-cari dari dulu pak, akhirnya nemu disini,,,
Balasmakasih 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
Balaskalau saya sebagai pengguna ya tinggal copas saja kodenya, nggak usah dibaca dulu biar nggak bikin puyeng. yang paling bawah bagus lo mas :)
BalasKeren Kang kreatif...
BalasHaturnuhun infona. saya coba pelajari dulu Kang :)
mesti dibaca berulang mas
Balaslengkap dan detil, sy kurang memperhatikan hal ini dalam susunan blog
matur suwun
Selamat pagi dan selamat beraktifitas sobatku...
BalasIjin 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 ?
Balaswah seumur umur sepertinya saya belum pernah deh mas posting menggunakan tabel.. ternyata begitu to caranyà ..
Balashmmm 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,,,,,,,,,,,,,
BalasIya yah, setuju... RIBET :)
BalasSaya nyimak dulu, kalau harus mengedit" HTML lumayan buat pusing juga hihihi
BalasMudah koq Mbak Cii tinggal copy dan paste kode tabel
BalasYang 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!
Balasselamat 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
Balasoooh begitu ya kang... pantesan saya copy paste dari word atau excel malah amburadul gak ketulungan, ternyata pakai gituan ya....terimakasih kang... langsung comot
Balassaya biasanya untuk membuat tabel itu copas dari microsoft word mas wkwkwkwk hasil nya jelek banget ^^
Balasjadi 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
BalasWah bisa di variasi sesekali hati ya mas tabelnya
Balasmakasih kang, ijin bookmark :)
BalasYang terakhir kayaknya keren tuh, saya save kodenya ya mas, makasih :)
BalasMudah koq Mbak Khusna. baca dengan seksama dan jika
BalasMau 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
BalasTable 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 :-)
BalasSilahkan Mbak Titis gak ngedit HTML koq Mbak instant
BalasTinggal 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
BalasSeumur-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
BalasSilahkan Mas A.Wahyu semoga bermanfaat yah Mas. sukses deh
BalasWahh Pak Uda bisa aja deh. biasa aja Pak hal yang seadanya
BalasDalam 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
BalasBetul Kang Ucup kalau kepala pusing minum Entrostop hhh
Betul sekaliMas Rahmat. edit saja sesuka hati dan pilih manasuka
BalasSilahkan Mbak Ririn semoga bisa bermanfaat yah Mbak
BalasMakasih atas kunjunganya salam hormat kembali mbak Rin.
banyak juga scriptnya ya mas, tapi hasilnya keren tentunya :)
Balasmakasih infonya ntar dipraktekkan biar ngerti tabel pelengkap di postingan :D
salam hormat :)
Kalo nyut-nyutan segera minum obat sakit kepala mbak :D
Balaswah keren juga yah kalau pake tabel jadi terlihat rapi, makasih buat tutorialnya mas Karysta kapan-kapa saya coba praktekkan :)
Balasoh ya mbak Indri yang di artikelnya mbak Indri itu pake tabel apa bukan yah keren juga :)
BalasTabelnya yg simpel" aja udah bgus kok
BalasSilajkan Mang namun jika lebih bagus dan baiknya
BalasDi poles dan di hias agar lebih + semua nya makasih Mang
Silahkan Mas Anthonie jika bermanfaat Mas sambil di otak-atik
BalasAgar lebih keren dan baik di segal sudut nya yah Mas Makasih
tapi cuma hancur saja kan mbak Khaira,tidak pai Luluh dan berantakan haha
Balaswaa saya belum pernah bikin tabel di postingan..
Balasmakasih infonya :)
jangan sampai pingsan lho, mbak
Balasdiasah terus hingga setajam silet
Balasklo saya di bookmark dulu. siapa tau besok bikin artikel yg perlu tabel hahaha
BalasKreatif postingannya Sob, perlu dipelajari nih buat tabelnya. Makasih
Balascaranya gimana mas ?
BalasNggak biasa minum obat kok marnes...
BalasMinum teh.. Ok
kalo menurut saya pribadi ribet kang kalo CSSnya dicampur ama HTML table, setiap ingin membuat table harus mengatur tampilan table terlebih dahulu
BalasBisa dicoba nih tapi kalo butuh saja :D
BalasTerimakasih..
Silahkan Mas Firman semoga bermanfaat Sobat :)
Balastapi saya nggak ngerti otak-atiknya mas hehe...
BalasSip mas Karysta sekarang saya jadi tahu cara bikin tabel di artikel, keren mas :)
Balaskalo ditambah dengan css3 mungkin akan lebih keren :) Nice Tutor
BalasWeh Kren Sob, Follow sukses untuk blog ini
Balasternyata 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 :)
BalasTolongin Dong Pak Budy heheh :D
Balasselamat pagi kang,, saya kembali hadir niii.. :D menikmati ilmu dari akng karris yg bermanfaat ini :)
Balas- Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
- Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
- Apabila artikel yang berjudul "Membuat tabel pelengkap dalam postingan" ini bermanfaat, share ke jejaring sosial.
Konversi Kode