WEB表格設計攻略

表格table，在學習html標籤時，必定會介紹的一個標籤，也是web項目中使用很廣泛的一個標籤。往往用於將數據分類彙總展示。
本文就為您介紹web項目中表格的使用

操作方法

（01）表格-用途1）表格table標籤主要用來展示列表數據，分行列展示比較直觀，還可能帶有彙總行顯示2）表格除了顯示列表數據外，還可以用來頁面佈局，因為表格可以設置佔用頁面百分比，所以，可以用來做頁面自適應寬度效果，只是，表格需要填充完整數據才會開始在頁面呈現，如果用表格佈局，且內部非常多內容，當網絡慢的時候，界面可能會出現一段時間的空白3）本文使用vscode作為編輯器，演示表格的使用（在vscode中新建html文件後，輸入一個感歎號，在按一下tab鍵，就可以快速構建html5的dom結構）

（02）表格-默認樣式1）表格table標籤默認是不帶任何樣式的2）邊框都沒有，寬度也不會沾滿一整行

（03）表格-邊框1）通過css樣式+table標籤設置表格邊框是實際項目中常用的方式2）表格分為單元格邊框，行邊框，所以需要將兩個邊框合併成一個顯示

（04）表格-奇偶行顏色1）奇偶行顏色也是通過css+table標籤實現的2）odd表示奇數行，even表示偶數行3）css選擇器如果從表體開始，則從第一個數據行開始計算奇偶4）css選擇器如果是整個表格，那麼表頭也參與計算奇偶行

（05）表格-合併單元格1）無論多麼複雜的表格合併，最終都是基於行、列單元格合併的2）行單元格合併，使用rowspan3）列單元格合併，使用colspan

（06）表格-凍結表頭1）web的表格標籤默認是沒有凍結表頭的功能的2）由於凍結表格需要css+js的輔助，且每個瀏覽器效果還有點不一樣，因此，不建議個人自己實現，為了使用方便與快速，建議直接使用成熟的列表控件，如jqgrid表格控件、easyui前端框架、bootstrap框架等等3）jqgrid表格控件可以凍結表頭、合併表頭、按列名稱排序等等功能，默認jqgrid列表樣式如圖所示

（07）表格-佈局1）使用表格佈局可以讓頁面寬度自適應，當寬度不夠的時候，表格內的文字會自動換行2）注意：最好不要將非常多的內容塞到table中作為頁面的相對頂級的佈局，否則，可能造成頁面加載慢的樣子