Tabel Responsive di Blog

Tabel Responsive di Blog

Tabel Responsive di Blog

infoalya.com


.:infoalya.com:. Lagi mnggebuh update blog niihh 😜 tapi kali ini infoalya.com berbagi cara membuat tabel di blog, 👀

Tabel pada blog/web memang terkadang sangat dibutuhkan (walaupun tidak selalu)
Ayoo kita mulai yaa ...

Bentuk CSS seperti dibawah ini :

/* 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:#fbfbfb;} .post-body th{background:#fff;font-weight:400;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;}

Untuk penerapannya gunakan kode dibawah ini :

2 kolom
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Kolom 1</th> <th>Kolom 2</th> </tr>
<tr> <td>Contoh 1</td> <td>Contoh 2</td> </tr>
<tr> <td>Contoh 3</td> <td>Contoh 4</td> </tr>
<tr> <td>Contoh 5</td> <td>Contoh 6</td> </tr>
<tr> <td>Contoh 7</td> <td>Contoh 8</td> </tr>
<tr> <td>Contoh 9</td> <td>Contoh 10</td> </tr>
<tr> <td>Contoh 11</td> <td>Contoh 12</td> </tr>
<tr> <td>Contoh 13</td> <td>Contoh 14</td> </tr>
<tr> <td>Contoh 15</td> <td>Contoh 16</td> </tr>
<tr> <td>Contoh 17</td> <td>Contoh 18</td> </tr>
<tr> <td>Contoh 19</td> <td>Contoh 20</td> </tr>
<tr> <td>Contoh 21</td> <td>Contoh 22</td> </tr>
<tr> <td>Contoh 23</td> <td>Contoh 24</td> </tr>
<tr> <td>Contoh 25</td> <td>Contoh 26</td> </tr>
<tr> <td>Contoh 27</td> <td>Contoh 28</td> </tr>
<tr> <td>Contoh 29</td> <td>Contoh 30</td> </tr>
</tbody> </table>

3 kolom
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Kolom 1</th><th>Kolom 2</th><th>Kolom 3</th></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td></tr>
</tbody> </table>


4 kolom
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Kolom 1</th><th>Kolom 2</th><th>Kolom 3</th><th>Kolom 4</th></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td><td>Contoh 4</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td><td>Contoh 4</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td><td>Contoh 4</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td><td>Contoh 4</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td><td>Contoh 4</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td><td>Contoh 4</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td><td>Contoh 4</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td><td>Contoh 4</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td><td>Contoh 4</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td><td>Contoh 4</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td><td>Contoh 4</td></tr>
<tr><td>Contoh 1</td><td>Contoh 2</td><td>Contoh 3</td><td>Contoh 4</td></tr>
</tbody> </table>
Bagaimana, mudah bukan ?
Jika ada pertanyaan dikolom komentar ya !!!

Jika ingin mempercantik tabel silahkan tambahkan CSS diatas, untuk warna silahkan berkreasi sendiri ya...

Contoh 4 Kolom
Kolom 1 Kolom 2 Kolom 3 Kolom 4
Contoh 1 Contoh 2 Contoh 3 Contoh 4
Contoh 1 Contoh 2 Contoh 3 Contoh 4
Contoh 1 Contoh 2 Contoh 3 Contoh 4
Contoh 1 Contoh 2 Contoh 3 Contoh 4
Contoh 1 Contoh 2 Contoh 3 Contoh 4
Contoh 1 Contoh 2 Contoh 3 Contoh 4
Contoh 1 Contoh 2 Contoh 3 Contoh 4
Contoh 1 Contoh 2 Contoh 3 Contoh 4

Share On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×