×

search by faronesia.com

FARONESIA
Profesional and Specialist WebDesign by Faronesia

Selain tutorial, kami juga menyediakan layanan penambah follower untuk akun Instagram dan Tiktok anda dengan harga terjangkau. Ayo buruan order sekarang juga!!!

Layanan Media

Cara membuat tabel responsive pada blog

Halo blogger, tabel biasanya digunakan sebagai media penjelasan agar pembahasan terhadap sesuatu permasalahan lebih terperinci. Nah, begitu pula pada blog tabel juga diperlukan untuk kebutuhan penjelasan agar terperinci secara jelas. Selain itu, dengan menggunakan tabel yang responsive pada blog menambah nilai kerapian dan terkesan sangat profesional.

Dari penjelasan singkat diatas sebelumnya admin telah membuat artikel serupa yaitu Cara gampang membuat tabel responsive pada postingan blog dari kedua metode ini silahkan kalian pilih mana yang paling cocok untuk diterapkan.

Cara membuat tabel responsive pada blog
  • Masuk ke dashboard blog milik anda
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML
  • Cari kode ]]</b:skin> lalu tambahkan kode dibawah ini tepat diatas kode ]]</b:skin>
table​{​background-color​:transparent;​width​:​100%​;​max-width​:​100%​;​margin-bottom​:​20px​} table img​{​width​:​100%​;​height​:auto} table​.tr-caption-container​{​padding​:​0​;​border​:none} table td​.tr-caption​{​font-size​:​12px​;​font-style​:italic} table​{​border-spacing​:​0​;​border-collapse​:collapse} td,th{padding:0} th{text-align:left} .table​{​width​:​100%​;​max-width​:​100%​;​margin-bottom​:​20px​} .table a​{​text-decoration​:none​!important​} .table > thead > tr > th,.table > tbody > tr > th,.table > tfoot > tr > th,.table > thead > tr > td,.table > tbody > tr > td,.table > tfoot > tr > td​{​padding​:​8px​;​line-height​:​1.42857143​;​vertical-align​:top} .table > thead > tr > th​{​background-color​:​#3498DB​;​color​:​#fff​;​vertical-align​:bottom} .table > thead > tr > th a{color:#fff!important} .table > caption + thead > tr:first-child > th,.table > colgroup + thead > tr:first-child > th,.table > thead:first-child > tr:first-child > th,.table > caption + thead > tr:first-child > td,.table > colgroup + thead > tr:first-child > td,.table > thead:first-child > tr:first-child > td{border-top:0} .table > tbody > tr​:nth-of-type(odd)​{​background-color​:​#f9f9f9​} table col​[class*="col-"]​{​position​:static;​display​:table-column;​float​:none} table td[class*="col-"],table th​[class*="col-"]​{​position​:static;​display​:table-cell;​float​:none} .table-responsive​{​min-height​:.​01%​;​overflow-x​:auto} @media screen and (max-width:​767px​){​.table-responsive​{​width​:​100%​;​margin-bottom​:​15px​;​overflow-y​:hidden;​-ms-overflow-style​:-ms-autohiding-scrollbar}​.table-responsive > .table​{​margin-bottom​:​0​}​.table-responsive > .table > thead > tr > th,.table-responsive > .table > tbody > tr > th,.table-responsive > .table > tfoot > tr > th,.table-responsive > .table > thead > tr > td,.table-responsive > .table > tbody > tr > td,.table-responsive > .table > tfoot > tr > td​{​white-space​:nowrap}​.table-responsive > .table-bordered​{​border​:​0​}}
  • Setelah itu simpan tema
  • Selanjutnya, berikut penulisan tabel dalam postingan blog (pada menu HTML bukan di COMPOSE)
<div class​=​"table-responsive"​>
<table class="table">
<thead>
  <tr>
    <th>Nama</th>
    <th>Keterangan</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Faronesia</td>
    <td>Faronesia</td>
  </tr>
  <tr>
    <td>Faronesia</td>
    <td>Faronesia</td>
  </tr>
  <tr>
    <td>Faronesia</td>
    <td>Faronesia</td>
  </tr>
</tbody>
</table>
</div>
Catatan:
Ubah dan tambah tabel sesuai keinginan anda.

Semoga tutorial singkat Cara membuat tabel responsive pada blog ini bermanfaat, jangan lupa share dan komentar dibawah.
Buka komentar
Tutup komentar
  1. thanks gan artikelnya, sangat membantu. jika anda ingin info seputar hidup sehat yuk kunjungi www,dinisehat,id

    -salam sehat

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Modifikasi Tampilan Website Anda

Gunakan jasa kami, berikan kesan bahwa website anda professional.

Pesan Sekarang
Notifikasi pengguna

Aktifkan javascript dibrowser anda agar mendapatkan fitur jelajah yang lebih baik di situs kami.

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesia, caranya cukup dengan menekan tombol dibawah ini.

Tutup