Cara Membuat Tabel Super Responsive di Blog

Cara Membuat Tabel Super Responsive di Blog - Bagaimanakah cara membuat tabel responsive?, tabel ini biasa di gunakan bagi mereka yang suka membagikan Tutorial yang berhubungan dengan dokumen, menu daftar, dan jenis tabel yang lainya, untuk membuat tabel di blog kita cuma bermain dengan kode HTML tag </table>, <tr><td>.




Ketiga kode itu dirangkai sehingga menjadi sebuah tabel. Banyak para blogger membagikan tutorial pembuatan tabel tetapi tidak ada penambahan kode CSS nya sehingga tabel tersebut tidak memiliki kemampuan Responsive jika blog di akses via seluler.

Agar tabel responsive bisa menyesuaikan dengan resolusi layar berbagai ukuran ketika blog di akses via seluler anda perlu menambahkan kode CSS dan tempatkan di atas kode biskin, jika di template anda sudah ada kode CSS silahkan hapus dan ganti dengan kode tabel dibawah.!

Silahkan buka edit template anda, copy dan letakkan kode berikut di atas kode
]]></b:skin>

/* CSS Post Table by trikpos*/
.post-body table td, .post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #c82d2d;padding:10px;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #eee;}
.post-body th{font-weight:700;}
.post-body table caption{border:none;font-style:italic;}
.post-body table{}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #eee;}
.post-body td:hover{background:#fafafa;}
.post-body th{background:#f53b3b;color:#fff;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
img {max-width:100%;height:auto;border:none;}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.widget ul {padding:0;}

cara membuat tabel
contoh Tabel via seluler posisi miring

cara membuat tabel
Contoh Tabel via seluler posisi berdiri

Baca juga : Cara Membuat Tabel di Postingan Blog Lengkap

Tabel 1:
<table>
<tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr>
<tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr>
<tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr>
</table>

maka akan menjadi tebel seperti ini
Calon DonaturNamaNominal
Calon DonaturNamaNominal
Calon DonaturNamaNominal


Tabel 2:
<table>
<tr><td colspan="2">Daftar Donatur</td> </tr>
<tr><td>1</td><td>Nama</td></tr>
<tr><td>2</td><td>Nama</td></tr>
<tr><td>3</td><td>Nama</td></tr>
</table>

maka akan menjadi tebel seperti ini
Daftar Donatur
1Nama
2Nama
3Nama


Tabel 3:
</table>
<tr><td rowspan="4">Daftar Donatur</td></tr>
<tr><td>1</td><td>Nama</td></tr>
<tr><td>2</td><td>Nama</td></tr>
<tr><td>3</td><td>Nama</td></tr>
</table>

maka akan menjadi tebel seperti ini
Daftar Donatur
1Nama
2Nama
3Nama


Mudah bukan...? Demikian penjelasan kami mengenai "Cara Membuat Tabel Super Responsive di Blog" Semoga bisa menjadi referensi serta bermanfaat bagi anda.

33 komentar

wah mantaf ini mas, saya mau coba buat daftar tabelnya, tapi besok mas, uah malam ini mas :)

saya kira dulu cara buat tabel nya sama seperti di word mas, di entri blog, karena ga begitu memerhatikan, tewrnyata mesti edit html juga ya mas trik ?

Penambahan CSS fungsinya agar tabel reponsive di segala perangakat baik ponsel berresolusi rendah maunpun resoluai tinggi , tabel bisa menyusut dan melebar secara otomatis.....

tolong d jelaskan lbih lanjt mas mengenai tabel ini dan kegunaannya...saya kok masih gagal paham ya ...maklum, amatir :D

Tabel ini berguna, biasanya blogger yang membagikan tutorial tentang spesifik suatu produk, seperti spesifik sepeda motor, atau pembuatan daftar documen dan arsip perkantoran...

wah bisa di save nih penting dan sangat manfaat mengngita postingan saya yang awut2an tabelnya. heheheh.makasih mas trikpost

mantap nih, terim kasih mas, saya juga bingung kemaren ketika membuat tabel di posting blog

terimakasih mas, blog saya ada tabelnya terus :)

mantap memang mas...bookmarg aja mas untuk sewaktu - waktu jika di gunakan...

silhkan save semuanya...mas...mumpung g mbayar...

tipsnya bagus mas, saya copy dulu kapan2 praktekan,,,

lebih mudah dan bisa dimodifikasi ya gan...akan lebih menarik kalau di kasih warna tertentu biar ramai, tinggal edit gan gan siap tampil menarik. ok saya pelajari dulu ya gan triknya.

yups lebih menarik dan maksimal untuk penerapan table dalam posting

mumpung masih hangat juga kan gan? hahahaaa...bisa aja lo gan.

dicoba aja gan...untung kok, masalahnya gak bayar. heheeee

Mantap....... selama ini yang saya pake ternyata tabelnya g responsive mas... (k) (k)

Berhasil mas ruar biasa...tankyu mas...

lihat kodenya pusing. biasanya saya pakai tabel online yang mudah, tapi ga pernah ngcek responsive atau ngganya..

Wah aku tergoda
Langsung mencoba
Tapi belum bisa
Apa karena templatenya tak mau ya...

Ya memang teh yg mudah2 bisa pake yg online...tapi responsive gak ...ingat teh blogger yg memperhatikan resposive adalah blogger yg memperhatikan pengunjung blognya melalui perangkat seluler....oky...

Sekyu pesek tapi ayu.....bikin tabel itu mudah kok...g ribet...tinggal ngopy aja kode di atas....

Selamat malam mas trik, nyuwun ngapunten kunbale telat sam karna kesibukan di dunia nyata..

Saya baru tahu lho ternyata membuat tabel dalam postingan itu harus menggunakan kode css juga, lebih tepatnya agar tabel lebih responsive ya mas??
saya pikir tabel dengan postingan sama saja dan ga harus menambahkan kode css.
Makasih mas ilmu nya, suatu saat pasti berguna nih..

tabel memang penting gan dan itu untuk membuat posting lebih menarik gan

Fuuhhh segala tutorial udah ane coba tapi ga ada yang work, pas pake teknik ente gan, semua jadi bisa dan lancar, hampir aja ane ganti template haha.... thanks gan ente sangat membantu :) Ijin Bookmark

mau tanya kode css mana yg harus saya hapus
agar kode ini bisa jalan

terima kasih

ini saya lagi mau nyoba sekarang kebetulan ada perlu nih

This comment has been removed by a blog administrator.

wah makasih nie tutorialnya bermanfaat


EmoticonEmoticon