Tabel merupakan data yang paling sering digunakan untuk memberikan list atau data secara lengkap, hal ini paling sering digunakan baik di presentasi, website, toko online bahkan blog. Namun ada beberapa kelemahan tabel yaitu sulit dibaca dan sulit mencari data jika isi dari data tabel banyak.
Dengan kesulitan ini tentu harus ada trik khusus untuk memudahkan user membacanya. Berikut contoh hasil akhir dari script yang akan kami berikan.
| No. | Judul Lagu | Penyanyi |
|---|---|---|
| 1 | Someone Like You | Adele |
| 2 | Price Tag | Jessie J |
| 3 | Everything at Once | Lenka |
| 4 | I'm Yours | Jason Mraz |
| 5 | What's Make You Beautiful | One Direction |
| 6 | Back to December | Taylor Swift |
| 7 | Breakaway | Kelly Clarkson |
| 8 | Trouble is a Friend | Lenka |
| 9 | Just the Way You Are | Bruno Mars |
| 10 | Firework | Katy Perry |
| 11 | Love the Way You Lie | Rihanna |
| 12 | I Do | Colbie Caillat |
Yuk silahkan ikuti tutorialnya
1. Login ke user blogger anda
2. Masuk ke Menu Template > Edit HTML
3. Masukkan kode css berikut tepat sebelum tag ]]></b:skin> atau tag </style> tergantung dari template yang anda gunakan
1 2 3 4 5 6 7 8 9 10 11 | .mytable{width:100%; font-size:12px;border:1px solid #ccc;}div.tools{ margin:5px; }div.tools input{ background-color:#f4f4f4; border:2px outset #f4f4f4; margin:2px; }th{ background-color:#003366; color:#FFF; padding:2px; border:1px solid #ccc;text-align: center;}td{ padding:2px; border-bottom:1px solid #ccc; border-right:1px solid #ccc; text-align:center;}tr:nth-child(even){background-color: #f2f2f2} |
4. Masukkan code dibawah tepat diatas tag </head>
1 2 |
5. Anda bisa masukkan tabel anda di Post ataupun Page, sebagai contoh saya memasukkann tabel list lagu, dan tentu anda bisa sesuikan dengan tabel kebutuhan anda. Jangan lupa anda input coding ini di pilihan HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 | <h3>Ketikkan pada pencarian dan tekan enter</h3><table class="mytable" id="table1"><tbody> <tr> <th>No.</th> <th>Judul Lagu</th> <th>Penyanyi</th> </tr> <tr> <td>1</td> <td>Someone Like You</td> <td>Adele</td> </tr> <tr> <td>2</td> <td>Price Tag</td> <td>Jessie J</td> </tr> <tr> <td>3</td> <td>Everything at Once</td> <td>Lenka</td> </tr> <tr> <td>4</td> <td>I'm Yours</td> <td>Jason Mraz</td> </tr> <tr> <td>5</td> <td>What's Make You Beautiful</td> <td>One Direction</td> </tr> <tr> <td>6</td> <td>Back to December</td> <td>Taylor Swift</td> </tr> <tr> <td>7</td> <td>Breakaway</td> <td>Kelly Clarkson</td> </tr> <tr> <td>8</td> <td>Trouble is a Friend</td> <td>Lenka</td> </tr> <tr> <td>9</td> <td>Just the Way You Are</td> <td>Bruno Mars</td> </tr> <tr> <td>10</td> <td>Firework</td> <td>Katy Perry</td> </tr> <tr> <td>11</td> <td>Love the Way You Lie</td> <td>Rihanna</td> </tr> <tr> <td>12</td> <td>I Do</td> <td>Colbie Caillat</td> </tr> <tr> <td>13</td> <td>The Climb</td> <td>Miley Cyrus </td> </tr> <tr> <td>14</td> <td>A Thousand Year</td> <td>Christina Perry</td> </tr> <tr> <td>15</td> <td>Breakeven</td> <td>The Script </td> </tr> <tr> <td>16</td> <td>SkyScrapper</td> <td>Demi Lovato</td> </tr> <tr> <td>17</td> <td>Trouble is a Friend</td> <td>Lenka</td> </tr> <tr> <td>18</td> <td>Rolling in The Deep</td> <td>Adele</td> </tr> <tr> <td>19 </td> <td>Last Friday Night </td> <td>Katy Perry </td> </tr> <tr> <td>20</td> <td>Speak Now</td> <td>Taylor Swift</td> </tr> <tr> <td>21</td> <td>You Raise Me Up</td> <td>Josh Groban</td> </tr> <tr> <td>22 </td> <td>I Will Always Love You </td> <td>Whitney Houston </td> </tr> <tr> <td>23</td> <td>Jar of Heart</td> <td>Christina Perry</td> </tr> <tr> <td>24</td> <td>Beyonce</td> <td>Irreplaceable</td> </tr> <tr> <td>25</td> <td>My Heart Will Go On</td> <td>Celine Dion</td> </tr> <tr> <td>26</td> <td>Baby</td> <td>Justin Bieber</td> </tr> <tr> <td>27</td> <td>Umbrella</td> <td>Rihanna</td> </tr> <tr> <td>28</td> <td>I Have a Dream</td> <td>Westlife</td> </tr></tbody></table><script language="javascript" type="text/javascript">//<![CDATA[ setFilterGrid( "table1" );//]]></script> |
Ok Tutorial Cara Membuat Tabe Dinamis di Blogger sudah selesai, anda bisa melihat hasil karya anda sendiri.
Semoga bermanfaat ya
Sumber : www.dokterweb.com
Tag : table, table dinamis
