StyleTable 表單美化

設計網頁的時候，網頁的 table 這一個元素是既方便又複雜的一個東西，很方便就能把你要的資料排列進去，但是雖然是排得很整齊不過表格本身卻又感覺不好看。StyleTable 這一個套件基於 jQuery 框架開發能夠簡單的為 table 網頁元素進行美化的動作，使用方法非常簡單，並且提供了多種的樣式可以選擇。

使用方法：
第一步 載入 StyleTable 所需要用到的 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- StyleTable 的主程式碼 -->
<script type="text/javascript" src="styletable.jquery.plugin.js"></script>

第二步 實際寫一個表格測試
<table border="0" cellpadding="4" cellspacing="0" align="center" width="30%" id="demo1">
  <thead>
<th align="left">Subject</th>
<th align="center" width="30">View</th>
<th align="center" width="30">Edit</th>
<th align="center" width="30">Delete</th>
  </thead>
  <tr>
<td align="left">Accounting</td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
  </tr>
  <tr>
<td align="left">Animation</td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
  </tr>
  <tr>
<td align="left">Anthropology</td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
  </tr>
  <tr>
<td align="left">Archaeology</td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
  </tr>
  <tr>
<td align="left">Architecture</td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
  </tr>
  <tr>
<td align="left">Art</td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
  </tr>
</table>

第三步 使用 JavaScrip 程式碼讓 StyleTable 起作用
$(function(){
  $('table#demo1').styleTable({
th_bgcolor: '#3E83C9',
th_color: '#ffffff',
th_border_color: '#333333',
tr_odd_bgcolor: '#ECF6FC',
tr_even_bgcolor: '#ffffff',
tr_border_color: '#95BCE2',
tr_hover_bgcolor: '#BCD4EC'
  });
});

附上 StyleTable 的可修改參數值

參數	說明
th_bgcolor	表頭背景顏色
th_image	表頭的背景圖片
th_color	表頭的文字顏色
th_border_color	表頭的上下框線顏色
tr_odd_bgcolor	基數行的背景顏色
tr_even_bgcolor	偶數行的背景顏色
tr_bgcolor	所有行的文字顏色
tr_hover_bgcolor	滑鼠滑過的背景顏色
tr_odd_image	基數行的背景圖片
tr_even_image	偶數行的背景圖片
tr_image	所有行的背景圖片
tr_hover_image	滑鼠滑過的背景圖片
tr_odd_color	基數行的文字顏色
tr_even_color	偶數行的文字顏色
tr_color	所有行的文字顏色
tr_border_color	所有行的邊框顏色
td_odd_bgcolor	基數列的背景顏色
td_even_bgcolor	偶數列的背景顏色
td_hover_bgcolor	滑鼠移過列的背景顏色
td_odd_image	基數列的背景圖片
td_even_image	偶數列的背景圖片
td_hover_image	滑鼠移過列的背景圖片
td_odd_color	基數列的文字顏色
td_even_color	偶數列的文字顏色
font_name	文字字型
font_size	文字大小

作者網站：http://sarfraznawaz2005.kodingen.com/demos/jquery/styletable/
檔案大小：242 KB (包含範例)
檔案下載：http://sarfraznawaz2005.kodingen.com/demos/jquery/styletable/table_style_plugin.zip
檔案備份：下載