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