Sebuah tabel adalah susunan baris
dan kolom yang digunakan untuk mengatur dan menempatkan data. Tabel merupakan
susunan data dalam baris dan kolom, atau mungkin dalam struktur yang lebih
kompleks. Tabel banyak digunakan dalam komunikasi, penelitian, dan analisis
data. Tabel sering muncul muncul di media cetak, tulisan, perangkat lunak
komputer, arsitektur hiasan, rambu lalu lintas, dan lain-lain. Isi dan
terminologi untuk menggambarkan sebuah tabel bergantung pada konteks dari data
yang akan disajikan. Lebih lanjut, tabel secara signifikan dapat memuat
informasi yang berbeda dalam jenis, struktur, fleksibilitas, notasi,
representasi dan penggunaan. Dalam buku-buku dan artikel teknis, tabel biasanya
disajikan terpisah dari teks utama dengan penulisan judul dan legenda yang
terpisah.
Di dalam penulisan blog kadang
kita membutuhkan sebuah tabel untuk menampilkan informasi tentang artikel yang
kita tulis di blog. Untuk membuat tabel di blog blogspot sebenarnya sangat
mudah kita tinggal buat tabel beserta daftar isinya di word kemudian tinggal
kita copy paste tebel tersebut ke halaman post blog. Kita juga bisa menggunakan
kode html dalam mebuat tabel di blog, banyak situs web yang menyediakan rumus
kode dalam pembuatan tabel di blog. Tetapi yang jadi permasalahan adalah
sekarang ini sudah jamannya android, banyak yang membuka alamat web/ blog kita
lewat android. Ketika tabel blog yang kita buat bisa sempurna di buka lewat
windows atau komputer, belum tentu tampilan akan terlihat sama di android. Kadang
malah akan merusak tampilan web/ blog kita di android.
Di sini saya akan mebantu anda
bagaimana cara membuat tabel di blog bisa responsive dan bisa digeser ke kanan
dan ke kiri. Caranya adalah sebagai berikut:
1. Buat table postingan anda di
microsoft word, terus isi data isi tabel.
2. Setelah itu copy paste tabel
yang anda buat ke halaman entri post blog anda.
3. Untuk meresponsive kan semua tabel
anda yang mungkin terlalu besar atau terlalu lebar, dan agar tabel yang lebar
tersebut bisa digeser ke kanan dan ke kiri di tampilan android, gunakan cara di
bawah ini;
Anda harus masuk pada template
blog, pilih edit html. Cari kode </body>, silahkan tambahkan kode jquery di bawah ini di atas kode </body>
|
<b:if cond='data:blog.pageType == "item"'>
<script>
//<![CDATA[
$(document).ready(function() {
$("table").wrap("<div
class='table-responsive'></div>");
$("table").addClass("table");
});
//]]>
</script>
</b:if>
|
Setelah itu, cari kode </head>, silahkan tambahkan
kode CSS tabel responsive Bootstrap di bawah ini di atas kode </head>
|
<b:if cond='data:blog.pageType ==
"item"'>
<style type='text/css'>
.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;
border:
1px solid #ddd
}
.table-responsive>.table {
margin-bottom: 0
}
.table-responsive>.table>tbody>tr>td,
.table-responsive>.table>tbody>tr>th,
.table-responsive>.table>tfoot>tr>td,
.table-responsive>.table>tfoot>tr>th,
.table-responsive>.table>thead>tr>td,
.table-responsive>.table>thead>tr>th {
white-space: nowrap
}
.table-responsive>.table-bordered {
border:
0
}
.table-responsive>.table-bordered>tbody>tr>td:first-child,
.table-responsive>.table-bordered>tbody>tr>th:first-child,
.table-responsive>.table-bordered>tfoot>tr>td:first-child,
.table-responsive>.table-bordered>tfoot>tr>th:first-child,
.table-responsive>.table-bordered>thead>tr>td:first-child,
.table-responsive>.table-bordered>thead>tr>th:first-child
{
border-left: 0
}
.table-responsive>.table-bordered>tbody>tr>td:last-child,
.table-responsive>.table-bordered>tbody>tr>th:last-child,
.table-responsive>.table-bordered>tfoot>tr>td:last-child,
.table-responsive>.table-bordered>tfoot>tr>th:last-child,
.table-responsive>.table-bordered>thead>tr>td:last-child,
.table-responsive>.table-bordered>thead>tr>th:last-child {
border-right: 0
}
.table-responsive>.table-bordered>tbody>tr:last-child>td,
.table-responsive>.table-bordered>tbody>tr:last-child>th,
.table-responsive>.table-bordered>tfoot>tr:last-child>td,
.table-responsive>.table-bordered>tfoot>tr:last-child>th
{
border-bottom: 0
}
}
</style>
</b:if>
|
Selesai, sekarang anda tinggal cek buka
postingan blog anda melalui android. Selamat mencoba.
0 komentar:
Posting Komentar