Tabel sering digunakan oleh banyak orang untuk berbagai keperluan, untuk pengelompokan data tertentu. Kolom itu sendiri terdiri dari kolom dan juga baris, jika kamu pernah membuka Microsoft Excel seperti itulah kira-kira sebuah tabel. Tabel pada dalam dunia blog juga, bakalan sering kita gunakan dan untuk itu disini saya akan memberikan sebuah tips untuk membuat tabel yang Responsive.

Baca Juga: CARA MEMBUAT WIDGET ABOUT ME KEREN UNTUK BLOG

Contoh Tabel Responsive

Dan dengan adanya tabel, kita dapat dengan mudah menyajikan sebuah data menjadi lebih rapih dan juga terstruktur. Sehingga data yang kita sisipkan dalam blog , menjadi lebih mudah untuk dibaca dan juga dipahami oleh setiap orang.

Baca Juga: CARA MEMBUAT KOTAK BERLANGGANAN KEREN DI BLOGGER

Seperti apa contoh penggunaan tabel oleh seorang blogger? Nah dalam dunia blog, tabel ini sering dimanfaatkan untuk penyajian artikel jenis:

  1. Spesifikasi sebuah Teknologi, seperti Gadget, komputer untuk blog-blog yang membahas dengan topik tersebut.
  2. Penyajian kelebihan dari sebuah Template, jika topik pada blog tersebut banyak membagikan soal template. Dan ini sering saya gunakan.
  3. Untuk membuat data perbandingan atau perbedaan antara data A dan Data B.
  4. Dan masih banyak lagi contoh kasus penggunaanya, yang dapat kamu cari lagi.

Membuat tabel tidaklah harus memiliki warna-warni, namun yang harus kita perhatikan bahwa tabel yang kita buat itu benar-benar Responsive untuk blog.

Lalu bagaimana membuat tabel yang Responsive untuk blog, berikut caranya. Untuk membuat tabel pada postingan blog menjadi responsive, silakan kamu copy dibawah ini dan letakan tepat diatas ]]></b:skin> atau </style> pada template kamu.

/* 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:#008080;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;}

Setiap kamu hendak membuat tabel, silakan kamu gunakan kode dibawah ini dan masukan kedalam postingan kamu:

<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>
<tr><td>Baris 6 Kolom 1</td><td>Baris 6 Kolom 2</td><td>Baris 6 Kolom 3</td></tr>
<tr><td>Baris 7 Kolom 1</td><td>Baris 7 Kolom 2</td><td>Baris 7 Kolom 3</td></tr>
</tbody>
</table>

Demikianlah cara membuat tabel yang responsiv pada blog, semoga bermanfaat.