table表頭分組程式碼例項
表格組織資料非常便利,有時候分類比較複雜,比如大的分類中還包括小的分類。
下面就分享一段類似功能的程式碼例項。
程式碼如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> table{ border:1px solid #ccc; border-collapse:collapse; width:60%; } table td,table th{ border:1px solid #ccc; padding:10px; text-align:center; } </style> </head> <body> <table> <thead> <tr> <td></td> <th colspan="4">部門情況</th> <th colspan="4">外包情況</th> </tr> <tr> <td></td> <th>人數</th> <th>計劃飽和度</th> <th>絕對飽和度</th> <th>相對飽和度</th> <th>人數</th> <th>計劃飽和度</th> <th>絕對飽和度</th> <th>相對飽和度</th> </tr> </thead> <tbody> <tr> <th> <a href="#">資訊系統開發</a> </th> <td>30</td> <td>100%</td> <td>100%</td> <td>100%</td> <td>5</td> <td>100%</td> <td>100%</td> <td>100%</td> </tr> <tr> <th> <a href="#">業務系統開發</a> </th> <td>30</td> <td>100%</td> <td>100%</td> <td>100%</td> <td>5</td> <td>100%</td> <td>100%</td> <td>100%</td> </tr> <tr> <th> <a href="#">支撐系統開發</a> </th> <td>30</td> <td>100%</td> <td>100%</td> <td>100%</td> <td>5</td> <td>100%</td> <td>100%</td> <td>100%</td> </tr> <tr> <th> <a href="#">運營系統開發</a> </th> <td>30</td> <td>100%</td> <td>100%</td> <td>100%</td> <td>5</td> <td>100%</td> <td>100%</td> <td>100%</td> </tr> <tr> <th> <a href="#">增值業務開發</a> </th> <td>30</td> <td>100%</td> <td>100%</td> <td>100%</td> <td>5</td> <td>100%</td> <td>100%</td> <td>100%</td> </tr> <tr> <th> <a href="#">技術服務</a> </th> <td>30</td> <td>100%</td> <td>100%</td> <td>100%</td> <td>5</td> <td>100%</td> <td>100%</td> <td>100%</td> </tr> <tr> <th> <a href="#">系統整合</a> </th> <td>30</td> <td>100%</td> <td>100%</td> <td>100%</td> <td>5</td> <td>100%</td> <td>100%</td> <td>100%</td> </tr> <tr> <th> <a href="#">質量管理</a> </th> <td>30</td> <td>100%</td> <td>100%</td> <td>100%</td> <td>5</td> <td>100%</td> <td>100%</td> <td>100%</td> </tr> </tbody> </table> </body> </html>
上面實現了table表頭分組效果,本質上還是單元格合併。
相關閱讀:
(1).colspan參閱HTML <td> colspan屬性一章節。
(2).rowspan參閱HTML <td> rowspan屬性一章節。
(3).border-collapse參閱CSS border-collapse一章節。
相關文章
- table表頭固定例項程式碼
- javascript: 帶分組資料的Table表頭排序JavaScript排序
- table表格美化程式碼例項
- table表格使用程式碼例項
- js table表格排序程式碼例項JS排序
- table細線表格例項程式碼
- jQuery操作表格table程式碼例項jQuery
- table表格隔行變色程式碼例項
- CSS空心箭頭程式碼例項CSS
- jQuery table表格隔行換色程式碼例項jQuery
- js table表格操作大全程式碼例項JS
- js table隔行變色效果程式碼例項JS
- 檢索table表格資料程式碼例項
- javascript生成指定行列table表格程式碼例項JavaScript
- javascript動態操作table表格程式碼例項JavaScript
- 刪除table表格行和列程式碼例項
- 獲取table表格有多少列程式碼例項
- table表格單元格合併程式碼例項
- 清空form表單例項程式碼ORM單例
- canvas繪製箭頭效果程式碼例項Canvas
- 更換select箭頭程式碼例項
- canvas繪製熊貓頭像程式碼例項Canvas
- javascript新增或者刪除table表格行程式碼例項JavaScript行程
- 動態刪除和新增table行程式碼例項行程
- js迭代table表格的行和列程式碼例項JS
- JavaScript 表單驗證程式碼例項JavaScript
- 表單提示美化效果程式碼例項
- 點選左右箭頭可以移動選項例項程式碼
- easyui-table表格客戶端分頁例項UI客戶端
- js增加千分符程式碼例項JS
- 滑鼠懸浮評分效果程式碼例項
- jQuery數字分頁效果程式碼例項jQuery
- canvas繪製機器貓頭像程式碼例項Canvas
- jQuery清除表單資料程式碼例項jQuery
- 使用ajax方式提交表單程式碼例項
- .NET中列印Excel報表程式碼例項Excel
- 數字千分位分隔程式碼例項
- js動態新增和刪除table表格行程式碼例項JS行程