Iklan Responsive

Cara Membuat Tabel Responsive Dalam Postingan Blog

Cara Membuat Tabel Responsive Dalam Postingan Blog - Tabel pada postingan kadang diperlukan buat memuat artikel yg mempunyai daftar, misalnya daftar harga, output pertandingan sepak bola, mapun yang lainnya. Pada kesempatan terdahulu aku pernah posting cara membuat tabel pada postingan blog menggunakan memanfaatkan MS Word. Namun dalam cara tadi tabel tidak sanggup responsive saat dibuka menggunakan tampilan perangkat yg lebih mini .

Tabel pada postingan blog yang nir responsive, tentu akan menciptakan tampilan sebagai berantakan serta tidak sedap dicermati. Pada kesempatan ini aku akan mengembangkan cara menciptakan tabel responsive dalam postingan blog dengan menggunakan kode CSS serta HTML. Dengan kode ini kita mampu membuat tampilan tabel jadi responsive.
Adapun penampakan tabel yang responsive sanggup ditinjau dalam model tabel dibawah ini :

Isi Tabel Isi Tabel
Isi Tabel Isi Tabel
Isi Tabel Isi Tabel
Isi Tabel Isi Tabel
Isi Tabel Isi Tabel
Isi Tabel Isi Tabel
Isi Tabel Isi Tabel

Untuk membuat tabel misalnya diatas caranya sebagai berikut :

1. Silahkan masuk ke edit template, kemudian letakkan kode CSS dibawah ini sempurna diatas kode ]]> atau . Untuk memudahkan pencarian silahkan tekan Ctrl+F kemudian tambahkan kode ]]> atau lalu copy kode CSS dibawah ini sempurna diatasnya lalu save template.

/* CSS Post Table */
tableborder-collapse:collapse;border-spacing:0;
.post-body table td border:1px solid #e9e9e9;padding:10px;text-align:justify;vertical-align:top;
.post-body table th border:1px solid #cccccc;padding:10px;text-align:justify;vertical-align:top;background:#339966 !Important;color:#fff
.post-body td, .post-body thvertical-align:top;text-align:justify;font-size:13px;padding:3px 5px;
.post-body thbackground:#fff;font-weight:400;text-transform:uppercase;font-size:14px
table max-width:100%;width:100%;margin:1.5em auto;
table.section-columns td.first.columns-cellborder-left:none
table.section-columnsborder:none;table-layout:fixed;width:100%;position:relative
table.columns-dua td.columns-cellwidth:50%
table.columns-tiga td.columns-cellwidth:50%
table.columns-4 td.columns-cellwidth:30%
table.section-columns td.columns-cellvertical-align:top
table.tr-caption-containerpadding:4px;margin-bottom:.5em
td.tr-captionfont-size:80%
.post-body td img, .post-body th img list-style:none;max-width:100%;height:auto;padding:0 !Important;margin:0 !Important
.post-body table.tr-caption-container img, .post-body table.tr-caption-container img, .post-body img list-style:none;max-width:100%;height:auto;padding:0 !Important;margin:0 !Important
.post-body table.tr-caption-container td border:none;padding:0 !Important;margin:0 !Important
.post-body table captionmax-width:100%;height:auto;border:none !Important;padding:0 !Important
.post-body img.video-thumbnail,.youtube-thumbvisibility:hidden !Mportant;display:none !Important;height:0

2. Copy paste kode dibawah ini kemudian simpan pada notepad. Kode berikut ini merupakan yg nantinya dipakai setiap kali akan menciptakan tabel responsive didalam postingan blog.
Tabel 1 Tabel dua
Isi Tabel Isi Tabel
Isi Tabel Isi Tabel
Isi Tabel Isi Tabel
Isi Tabel Isi Tabel
Isi Tabel Isi Tabel
Isi Tabel Isi Tabel
Isi Tabel Isi Tabel

3. Adapun cara memasang di pada postingan merupakan buat entri baru lalu pilih mode HTML bukan Compose, lalu copy kode diatas yang telah Anda simpan di notepad lalu paste kan pada mode HTML.
4. Cara costumisasi kode tabel responsive.
  • Silahkan ganti kode warna merah, buat mengecilkan tinggi rendahnya kolom, Ganti nomor 10px dengan ukuran yg Anda inginkan.
  • Silahkan ganti kode warna ini dia #339966 menggunakan kode warna background pilihan Anda yang mampu menyesuaikan menggunakan rona template Anda.
  • Kode table diatas hanya buat 2 kolom dan 7 row saja. 
  • Untuk menambahkan kolom silahkan copy kode Tabel 2 serta pastekan sebelum kode epilog
  • Untuk menambahkan row silahkan copy kode Isi Tabel Isi Tabel serta pastekan sebelum kode .
  • Ulangi dua langkah terakhir berdasarkan kebutuhan tabel Anda.
  • Adapun cara mengisi datanya, Anda cukum mengubah tulisan Tabel 1, Tabel dua, dan Isi Tabel.
Demikian cara membuat tabel responsive dalam postingan blog. Tabel ini akan menyesuaikan jika laman dibuka dengan perangkat apapun. Semoga berguna.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel