Cara Mudah Membuat Tabel Sederhana Responsive dengan CSS - masandri
Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Mudah Membuat Tabel Sederhana Responsive dengan CSS

Tabel keterangan atau kotak keterangan merupakan suatu fitur yang fungsinya untuk menampilkan keterangan secara rinci dengan style tampilan kotak-kotak. Dengan menggunakan tabel keterangan ini akan mempermudah pengunjung atau client pada suatu website untuk mendapatkan informasi dengan mudah.

Pada umumnya Tabel keterangan pada sebuah blog berisikan informasi keterangan template, spesifikasi handphone, bisnis dan masih banyak lainnya. Sebetulnya sobat bisa membuat tabel keterangan dengan mudah tanpa harus ribet-ribet untuk coding, yaitu dengan cara copy dan paste secara langsung melalui Microsoft Word, Excel, atau website Table Generator. Namun hasilnya tidak responsive atau masih acak-acakan, contohnya saat tampilan di desktop rapi, tetapi di handphone berantakan.

Oleh karena itu artikel ini dibuat, penulis akan memberikan tutorial singkat Cara Mudah Membuat Tabel Keterangan Responsive di Blogger dengan CSS. Jika sobat tertarik untuk menggunakan tabel pada blog, sobat bisa simak dalam tutorial di bawah ini.

Cara Membuat Tabel Keterangan di Blogger

1. Log in ke akun Blogger - Tema - Edit HTML


2. Copy dan pastekan kode Style CSS di bawah ini sebelum kode ]]></b:skin> atau </style>


/* Tabel Blogger Responsive */
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:7px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #6f7785;color:#fff;padding:8px 10px;text-align:left;vertical-align:top;font-size:16px}
.post-body table caption{border:none;font-style:italic;}
.post-body table th {background:#747d8c;} .post-body table tr th:hover{background:#57606f} .post-body table.tr-caption-container {border:1px solid #f6f8f9;}
.post-body table tr:nth-child(even) > td {background-color:#ecf0f1;}
.post-body td, .post-body th{color:#57606f;vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;} .post-body table tr:nth-child(odd) > td {background-color:#f6f8f9;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.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;}
table.section-columns td.first.columns-cell{border-left:none}
.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{border:none;table-layout:fixed;width:100%;position:relative}
.post-body table tr:hover td {background:#b0b1b4;color:#FFFFFF;border-top: 1px solid #22262e;}
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%}
table tr:nth-child(odd):hover td {background:#b0b1b4;}
3. Simpan tema

4. Selanjutnya buat postingan baru dan masuk ke mode HTML bukan compose. Lalu masukan kode pemanggil di bawah ini.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Nama</th><th>Keterangan</th> </tr>
<tr><td>Nama2</td><td>Nilai2</td> </tr>
<tr><td>Nama1</td><td>Nilai1</td> </tr> <tr><td>Nama3</td><td>Nilai3</td> </tr>
</tbody> </table>
<tr><td>Nama4</td><td>Nilai4</td> </tr>
Catatan : silahkan ganti tulisan Nama1,2,3,4 & Nilai 1,2,3,4 dengan data atau keterangan yang sobat perlukan.

 5. Selesai

Berikut adalah tampilan Tabel keterangan Responsive yang telah terpasang di Blogger.


Sekian Tutorial cara membuat tabel keterangan responsive di Blogger yang bisa saya bagikan untuk sobat. Jika sobat memiliki pertanyaan perihal artikel ini, jangan sungkan untuk berkomentar di bawah ini. Semoga bermanfaat. Sumber referensi : https://inwepo.co/

masandri.org
masandri.org Blog Personal Mengulas seputar dunia blogger, AdSense, Game, Islami dan Jasa pembuatan website SEO Responsive

Posting Komentar untuk "Cara Mudah Membuat Tabel Sederhana Responsive dengan CSS "

Berlangganan via Email