Cara Membuat Tabel Responsive di Blog

Tutorial Go Blog

Cara Buat Tabel Responsive - Bagaimana cara membuat tabel responsive di blog..?? Umumnya, trik seperti ini digunakan oleh para blogger yang suka atau gemar membagikan informasi Tutorial yang masih berkaitan dengan menu daftar, dokumen dan juga jenis-jenis tabel lainnya. Untuk membuat sebuah tabel di blog sangat mudah, anda cuma diharuskan memainkan kode HTML tag </table> dan <tr><td>. Kode-kode tersebut bisa dirangkai menjadi sebuah tabel.

Banyak sekali para blogger yang membagikan informasi tutorial cara pembuatan tabel di blog, namun tak ada penambahan kode CSS-nya. Sehingga seringkali tabel tersebut tak mempunyai kemampuan Responsive apabila blog/website di akses via smartphone, jadinya ya berantakan. Tapi, jika ditambahkan dengan kode CSS tabel akan menyesuaikan diri dengan ukuran layar. Baca juga : Cara Gampil Membuat Widget Popular Post Warna-Warni di Blogspot

Cara membuat tabel responsive itu sanga mudah dan bisa dilakukan dengan singkat. Dan bahkan kode-kode tersebut bisa seenaknya anda melakukan eksperimen tabel yang bagus dan terbaik buatan anda sendiri (Hand made).

Baiklah, sebelum menuju praktek pembuatan tabel responsive, anda copy paste dahulu kode CSS dibawah ini dan simpan sebentar di word atau notepad.

/* CSS Post Table by trikpos.com */ 
.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;}

Jika sudah copy kode tersebut, sekarang langsung kita sama-sama praktekan cara pembuatan tabel responsive di blog bareng Tutorial Go Blog.

Keterangan :
- Buka browser, masuk ke alamat blogger.com
- Masukkan email (username) dan kata sandi (password).

Tahap pertama

- Kode yang di atas tersebut atau kode yang sudah anda copy, anda letakkan di element Edit HTML, dan biasanya diletakkan di atas kode ]]></b:skin> ini.

1. Buka dashboard dan masuk ke element menu "Template".

Gambar 1

2. Kemudian anda tekan atau klik element "Edit HTML" tersebut. Contoh ada digambar bawah ini.

Gambar 2

3. Tekan sembarang, lalu anda cari kode ]]></b:skin> tersebut, jika merasa kesulitan anda bisa menggunakan cara tekan CTRL+F. Contoh seperti gambar dibawah ini. Jika sudah ketemu kode tersebut, baru anda letakkan kode yang sebelumnya anda copy.

Gambar 3

Nah, sekarang anda tinggal ke tahap yang selanjutnya dengan cara memasang kode tabel seperti dibawah ini. Copy kode dibawah ini.

<table width="400" border="1">
<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>

Seperti biasa keterangan masih sama seperti yang diatas tersebut.

Tahap Kedua

- Untuk kode yang kedua anda copy tersebut adalah kode pembuatan atau pemasangan tabel didalam postingan maupun artikel. Caranya sebagai berikut:

1. Anda langsung tekan menu "Entri Baru" dan gunakan metode HTML, jangan gunakan metode Compose untuk meletakkan kode tabel, nanti tidak akan muncul.

Gambar 1

2. Jika sudah meletakkan kode, anda tekan menu "Compose" dan setelah itu anda tekan menu "Simpan". Kemudian, anda review dengan cara tekan tombol "Pratinjau".

Gambar 2

3. Lihat hasil pembuatan tabel responsive yang sudah anda lakukan sejak tadi.

Hasil Gambar

Sangat bagus bukan..!! Tentunya anda bangga bisa membuat tabel sendiri di blog, apalagi tabel yang anda buat juga responsive. Semakin percaya diri saja untuk mengembangkan blog sendiri. Dan jika ingin membuat unik tabel buatan sendiri, anda bisa baca artikel Cara Membuat Tabel di Blog tersebut.

Terima kasih, telah sudi membaca pelajaran Cara Buat Tabel Responsive tersebut. Semoga anda senang, semoga anda betah dan semoga anda membagikan terus informasi-informasi dari situs ini kepada teman-teman seprofesi anda. Sekali lagi, terima kasih banyak...