Cara Membuat Tabel pada Postingan/Artikel Blog (Responsive)

Membuat tabel pada postingan blog berfungsi untuk membuat tampilan artikel menjadi lebih rapi dan berurutan sehingga mudah dipahami oleh pembaca.

Beberapa hari yang lalu saya sempat membuat tabel pada salah satu artikel saya, sebelumnya saya sepatkan untuk browsing bagaimana cara membuat tabel pada postingan blog, tetapi sayangnya beberapa ada yang tidak berfungsi dengan baik. Entah ini karena saya yang tidak bisa memasang tabel tersebut di postingan blog saya, atau karena ada kesalahan kode CSS nya? Entahlah…

Namun setelah saya mencari lagi tutorialnya, dan menemukan cara yang baru lagi di blog Sumpuk.net kemudian saya mencobanya. Dan akhirnya Tabel yang saya inginkan bisa dipasang dan digunakan pada postingan blog saya.

Cara Membuat Tabel pada Postingan Blog

 

Cara Pemasangan Tabel pada Postingan Blog

Caranya boleh dibilang mudah saja, karena hanya perlu menambahkan sedikit CSS Tabel pada HTML Blog. Jika sobat ingin mencoba membuat tabel pada postingan atau artikel blog, silahkan ikuti tutorianya ya…

Langkah pertama adalah masuk ke Dasbor Blogger kemudian pilih Tema, lalu Edit HTMLnya

Langkah kedua carilah kode ]]></b:skin> dengan menggunakan tombol CTRL+F pada keybord PC atau Laptop sobat.

Jika sudah ketemu, langkah ketiga copy CSS dibawah ini dan letakan persis diatas kode ]]></b:skin> tadi

/* CSS Post Table */ .post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:5px 10px;text-align:left;vertical-align:top;} .post-body table th {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;} .post-body table.tr-caption-container {border:1px solid #e9e9e9;} .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;} .post-body table tr:nth-child(even) > td {background-color:#f9f9f9;} .post-body table tr:nth-child(even) > td:hover {background-color:#0082d8;} .post-body th{background:#bcdbfe;font-weight:bold;text-transform:uppercase;font-size:14px} .post-body th:hover{background:#fdfdfd;} .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 {font-size:80%;padding:0px 8px 8px !important;} .post-body li {list-style-type:square;} 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;} 

Catatan:

Jika ingin mengubah warna backgroud pada tabel paling atas yang biasanya digunakan untuk judul dari tabel, sobat bisa merubah kode .post-body th{background:#bcdbfe dengan warna yang sobat inginkan.

Jika ingin mengubahnya menjadi tampilan biasa (tidak tebal), dan tidak huruf besar semua (capslock) ubah kode font-weight:bold;text-transform:uppercase;font-size:14px} sesuai keinginan sobat.

Langkah terakhir adalah klik Simpan

Nah sejauh ini CSS untuk membuat tabel pada postingan blog sudah terpasang, selanjutnya tinggal mengaplikasikannya pada postingan blog

Cara Pemakaian dan Penggunaan Tabel pada Postingan Blog

Sebenarnya caranya sama dengan penulisan artikel biasanya, hanya saja penulisan yang biasanya ditulis pada mode Compose, diubah ke mode HTML caranya bagaimana, simak tutorialnya berikut ini

ganti ke mode HTML

Salin kode dibawah ini dan letakan pada mode HTML sobat

<table cellpadding="0" cellspacing="0" style="text-align: left;">

<tbody>

<tr> <th>Header Kolom 1</th> <th>Header Kolom 2</th> </tr>

<tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr>

<tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr>

<tr> <td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td> </tr>

<tr> <td>Baris 4 Kolom 1</td> <td>Baris 4 Kolom 2</td> </tr>

<tr> <td>Baris 5 Kolom 1</td> <td>Baris 5 Kolom 2</td> </tr>

</tbody> 

</table> 

Jika cara pemakaian tabel pada blog itu benar maka hasilnya bisa dilihat sebagai berikut

hasil tabel pada postingan blog

Bagaimana menambahkan kolom dan baris pada tabel?

Nah pertanyaan yang bagus, mudah saja, sobat tinggal menambah kode baris dan kolomnya. Contoh jika sobat ingin membuat tabel dengan 3 kolom dan 5 baris maka kodenya adalah sebagai berikut

<table cellpadding="0" cellspacing="0" style="text-align: left;">

<tbody>

<tr> <th>Header Kolom 1</th> <th>Header Kolom 2</th> <th>Header Kolom 3</th> </tr>

<tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> <td>Baris 1 Kolom 3</td></tr>

<tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> <td>Baris 2 Kolom 3</td></tr>

<tr> <td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td> <td>Baris 3 Kolom 3</td></tr>

<tr> <td>Baris 4 Kolom 1</td> <td>Baris 4 Kolom 2</td> <td>Baris 4 Kolom 3</td></tr>

<tr> <td>Baris 5 Kolom 1</td> <td>Baris 5 Kolom 2</td> <td>Baris 5 Kolom 3</td></tr>

</tbody> 

</table> 

Nah begitu seterusnya

Masalahnya adalah?

Nah terkadang dalam penggunaan tabel pada postingan blog, ada kalanya diskripsi yang kita isikan kedalam tabel terlalu panjang sehingga menyebabkan tabel menjadi kurang bagus dan tidak rapi. Saran saya jika kejadiannya seperti itu gunakanlah sedikit trik agar kolom tabel pada blog yang kita buat bisa terlihat rapi, caranya mudah saja tinggal memasukan “width” pada kolom Header tabel. Contoh:

<table cellpadding="0" cellspacing="0" style="text-align: left;">

<tbody>

<tr> <th width=”100px”>Header Kolom 1</th> <th width=”100px”>Header Kolom 2</th> <th width=”100px”>Header Kolom 3</th> </tr>

<tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> <td>Baris 1 Kolom 3</td></tr>

<tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> <td>Baris 2 Kolom 3</td></tr>

<tr> <td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td> <td>Baris 3 Kolom 3</td></tr>

<tr> <td>Baris 4 Kolom 1</td> <td>Baris 4 Kolom 2</td> <td>Baris 4 Kolom 3</td></tr>

<tr> <td>Baris 5 Kolom 1</td> <td>Baris 5 Kolom 2</td> <td>Baris 5 Kolom 3</td></tr>

</tbody> 

</table> 

Nah sobat bisa mengaturnya menjadi lebih kecil sesuai kebutuhan. Jika sudah, maka lihat hasilnya dengan preview terlebih dahulu. Gunanya agar memastikan saja tabel yang sudah sobat buat sesuai dengan keinginan.

Nah sekiranya tulisan cara membuat tabel pada postingan blog ini bisa membantu dan berhasil. Yah kerana saya sudah mempraktekannya pada blog saya ini.

Selamat mencoba

Berbagi :