Tabel Responsive di Blog

- October 03, 2017

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...

Live Demo

Contoh 2 Kolom
Kolom 1 Kolom 2
Contoh 1 Contoh 2
Contoh 1 Contoh 2
Contoh 1 Contoh 2
Contoh 1 Contoh 2
Contoh 1 Contoh 2
Contoh 1 Contoh 2
Contoh 1 Contoh 2
Contoh 1 Contoh 2
Contoh 1 Contoh 2
Contoh 1 Contoh 2
Contoh 1 Contoh 2
Contoh 1 Contoh 2
Contoh 1 Contoh 2
Contoh 1 Contoh 2
Contoh 1 Contoh 2


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


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


Share this with short URL:
Blogger
Disqus
Tinggalkan Komentar

No comments

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

 

ketik dan enter untuk mencari