FfbrH7Hd32dBIzJfRUFjQOMyo355V6UzX2vYTtb5
Cara Membuat Tabel Yang Responsif Di Blog

Cara Membuat Tabel Yang Responsif Di Blog

Jika anda sedang mencari informasi tentang Cara Membuat Table yang responsif di blog, maka sekarang anda sudah menemukannya, teruslah membaca..!

Di artikel kali ini saya akan membahas tentang cara membuat table dengan tampilan yang sederhana namun tetap bagus, nyaman dilihat, dan tentunya renponsif, jadi tidak perlu khawatir saat di buka di desktop dan seluler tampilan table tepat oke.

Baca Juga : Cara Membuat Tabel Blog Dengan MS Word

Terkadang saat membuat sebuah artikel di blog kita membutuhkan table untuk keperluan tertentu, seperti misalkan ingin menginformasikan sebuah produk dengan detail. Dengan table ini informasi yang akan kita sajikan akan menjadi lebih rapih.

Cara membuat table responsif di blog

Baik, sebelum kita mulai membahas cara mebuat table di blog, saya ingin menunjukan kepada anda tampilan tablenya terlebih dahulu. Berikut adalah tampilan table yang akan kita buat:

JUDUL: DESKRIPSI:
Table 1 Deskripsi 1
Table 2 Deskripsi 2
Table 3 Deskripsi 3
Table 4 Deskripsi 4
Table 5 Deskripsi 5
Table 6 Deskripsi 6
Table 7 Deskripsi 7
Table 8 Deskripsi 8
Table 9 Deskripsi 9

Nah bagaimana? Tertarik untuk membuatnya?

Sudah gak sabar mau tau cara buatnya? Hehehe

Baik sekarang kita langsung ke tutorial cara membuat table seperti diatas.

Tutorial Cara Membuat Tabel Di Blog :


1. Masuk ke Blogger
2. Buka Dashbord blog anda
3. Pilih Tema > Edit HTML
4. Cari kode ]]></b:skin> dan letakan script berikut ini tepat di atasnya, untuk mempercepat pencarian kode bisa gunakan tombol CTRL + F dikomputer anda
5. Lalu Save

/* Table Post */
table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #457fdf;font-weight:bold;color:#fff;padding:15px 10px;text-align:left;vertical-align:top;font-size:14px}
.post-body table th {background:#4285f4;}
.post-body table.tr-caption-container {border:1px solid #f1f1f1;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body table tr:nth-child(even) > td {background-color:#f9f9f9;}
.post-body table tr:nth-child(even) > td:hover {background-color:#fbfbfb;}
.post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px}
.post-body td a:hover {color:#7f9bdf;border-color:#adbce0;}
.post-body td a[target="_blank"]:after {margin-left:5px;}
.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;}
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%}

Untuk merubah warna header table silahkan ganti kode warna yang dikasih tanda berwana merah dengan kode warna yang anda inginkan.

Setelah selesai meletakan kode script diatas tadi di dalam Tema / Template blog anda, sekarang kita lanjut kelangkah berikutnya, yaitu membuat table pada postingan atau artikel blog.

Pertama, silahkan masuk ke Dashbord blog anda lalu pilih menu Postingan > Entri Baru atau Edit pada artikel yang ingin ditambahkan table di dalamnya, lalu pilih mode "HTML" bukan compose, dan letakan kode / script Table berikut ini:

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Judul:</th>   <th>Desrkripsi:</th> </tr>
<tr> <td>Table 1</td>   <td>Deskripsi 1</td> </tr>
<tr> <td>Table 2</td>   <td>Deskripsi 2</td> </tr>
<tr> <td>Table 3</td>   <td>Deskripsi 3</td> </tr>
<tr> <td>Table 4</td>   <td>Deskripsi 4</td> </tr>
<tr> <td>Table 5</td>   <td>Deskripsi 5</td> </tr>
<tr> <td>Table 6</td>   <td>Deskripsi 6</td> </tr>
<tr> <td>Table 7</td>   <td>Deskripsi 7</td> </tr>
<tr> <td>Table 8</td>   <td>Deskripsi 8</td> </tr>
<tr> <td>Table 9</td>   <td>Deskripsi 9</td> </tr>
</tbody> </table>

Setelah itu silahkan ganti semua kata yang berwarna merah pada script diatas dengan kata yang anda inginkan.
Selesai, table reponsif sudah jadi diblog anda, mudah bukan?

Cara Menambah Kolom Pada Tabel

Untuk menambahkan kolom atau tabel, anda tinggal tambahkan kode berikut ini :

1. Menambah kolom / table ke samping pada bagian judul table.

Caranya : tambahkan kode <th>Judul 3</th> diantara kode </th> dan </tr>

2. Menambahkan kolom / table ke samping pada bagian bawah judul

Caranya : tambahkan kode <td>kolom 3</td> diantara kode </td> dan </tr>

3. Menambahkan kolom / table kebagian bawah

Caranya : tambahkan kode <tr> <td>Table 10</td>   <td>Deskripsi 10</td> </tr> dibawah kode table 9 tadi.

Nah, itulah cara membuat table yang responsif di blog, silahkan di coba ya, dan semoga tulisan ini bermanfaat buat sobat Blogger semua.

Selain cara yang dijelaskan diatas, anda juga bisa membuat table yang responsif di blog dengan menggunakan Ms Word / Ms Excel. Untuk tutorialnya silahkan baca disini : Cara Membuat Tabel Blog di Ms Word

Sekian dulu artikel kali ini, jika ada yang ingin ditanyakan tentang cara membuat table ini silahkan bertanya pada kolom komentar.

Terimakasih telah berkujung, dan sampai jumpa pada artikel berikutnya :D

Baca Juga
SHARE
Ady Kusanto
Blogger pemula yang masih belajar

Related Posts

Subscribe to get free updates

6 comments

Post a Comment