GABUNG MAKMUR: Tabel

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUM-EnrfsrHkH1eARaJJ27QL1gFfHgjU05RD4C4zg6oev3ewKv7CSC8rWDRR3JcdZ3htpdzs90n8ln5NkqcS1No55-KZZBBD31TtdKKcFvtnt-oJuk3K2xDJ_hEJKVqYKkE4fXgZqPKMgW/s1600/sort+tabel+flexibel.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="62" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUM-EnrfsrHkH1eARaJJ27QL1gFfHgjU05RD4C4zg6oev3ewKv7CSC8rWDRR3JcdZ3htpdzs90n8ln5NkqcS1No55-KZZBBD31TtdKKcFvtnt-oJuk3K2xDJ_hEJKVqYKkE4fXgZqPKMgW/s1600/sort+tabel+flexibel.PNG" width="200" /></a></div>
<a href="http://www.gabungmakmur.desa.id/2014/08/membuat-sort-tabel-yang-fleksibel.html">Tabel</a>, sebagaimana kita ketahui memiliki peran yang sangat penting sebagai salah satu bentuk kemasan laporan ataupun daftar tertentu. Oleh karena itu, kita harus benar-benar mampu mengemas tampilan tabel dengan sangat baik dan praktis.
<br />
<br />
<a href="http://www.gabungmakmur.desa.id/2014/08/membuat-sort-tabel-yang-fleksibel.html">Tampilan Sort Tabel Yang Fleksibel</a><br />
<div id="container">
<div id="example">
<div class="tableFilter">
<form id="tableFilter" onsubmit="myTable.filter(this.id); return false;">
Filter: 
     <select id="column">
        <option value="1">Firstname</option>
      <option value="2">Lastname</option>
      <option value="3">Department</option>
      <option value="4">Start Date</option>
     </select>
     <input id="keyword" type="text" />
     <input type="submit" value="Submit" />
     <input type="reset" value="Clear" />
    </form>
</div>
<table cellpadding="0" id="myTable">
     <thead>
<tr><th axis="number">ID</th>
    <th axis="string">Firstname</th>
    <th axis="string">Lastname</th>
    <th axis="string">Department</th>
    <th axis="date">Start Date</th>
   </tr>
</thead>
   <tbody>
<tr id="1">
     <td class="rightAlign">1</td>
     <td>Sam</td>
     <td>Birch</td>
     <td>Programming</td>
     <td class="rightAlign">01/06/00</td>
    </tr>
<tr id="2">
     <td class="rightAlign">2</td>
     <td>George</td>
     <td>Lo</td>
     <td>Support</td>
     <td class="rightAlign">01/07/99</td>
    </tr>
<tr id="3">
     <td class="rightAlign">3</td>
     <td>kevin</td>
     <td>Walker</td>
     <td>Programming</td>
     <td class="rightAlign">01/06/05</td>
    </tr>
<tr id="4">
     <td class="rightAlign">4</td>
     <td>Peter</td>
     <td>Aland</td>
     <td>Project Management</td>
     <td class="rightAlign">23/10/06</td>
    </tr>
<tr id="5">
     <td class="rightAlign">5</td>
     <td>Rachel</td>
     <td>Dickinson</td>
     <td>Design</td>
     <td class="rightAlign">20/01/05</td>
    </tr>
<tr id="6">
     <td class="rightAlign">6</td>
     <td>John</td>
     <td>Tsang</td>
     <td>Support</td>
     <td class="rightAlign">05/10/05</td>
    </tr>
</tbody>
   <tfoot>
<tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
    </tr>
</tfoot>
    </table>
</div>
</div>
<br />
Untuk membuat tabel seperti di atas, lakukan beberapa langkah di bawah ini :

<br />
<b><i>Pertama</i></b> : Letakkan kode di bawah ini tepat di atas kode </head> atau setelah kode <head> di template blogger sahabat Indonesia.

Membuat Sort Tabel Yang Fleksibel

Tabel , sebagaimana kita ketahui memiliki peran yang sangat penting sebagai salah satu bentuk kemasan laporan ataupun daftar tertentu. Ole...

Baca selengkapnya »