WEB表格設計攻略

表格table，在進修html標簽時，必心猿意馬會介紹的一個標簽，也是web項目中利用很普遍的一個標簽。往往用于將數據分類匯總展示。

本文就為您介紹web項目中表格的利用

方式/步調

1
表格-用途
1）表格table標簽本家兒要用來展示列表數據，分行列展示比力直不雅，還可能帶有匯總行顯示
2）表格除了顯示列表數據外，還可以用來頁面結構，因為表格可以設置占用頁面百分比，所以，可以用來做頁面自順應寬度結果，只是，表格需要填充完整數據才會起頭在頁面呈現，若是用表格結構，且內部很是多內容，當收集慢的時辰，界面可能會呈現一段時候的空白
3）本文利用vscode作為編纂器，演示表格的利用（在vscode中新建html文件后，輸入一個感慨號，在按一下tab鍵，就可以快速構建html5的dom布局）
4前端頁面開辟東西的下載與安裝
2
表格-默認樣式
1）表格table標簽默認是不帶任何樣式的
2）邊框都沒有，寬度也不會沾滿一整行
3
表格-邊框
1）經由過程css樣式+table標簽設置表格邊框是現實項目中常用的體例
2）表格分為單位格邊框，行邊框，所以需要將兩個邊框歸并當作一個顯示
4
表格-奇偶行顏色
1）奇偶行顏色也是經由過程css+table標簽實現的
2）odd暗示奇數行，even暗示偶數行
3）css選擇器若是從表體起頭，則從第一個數據行起頭計較奇偶
4）css選擇器若是是整個表格，那么表頭也介入計較奇偶行
5
表格-歸并單位格
1）無論何等復雜的表格歸并，最終都是基于行、列單位格歸并的
2）行單位格歸并，利用rowspan
3）列單位格歸并，利用colspan
6
表格-凍結表頭
1）web的表格標簽默認是沒有凍結表頭的功能的
2）因為凍結表格需要css+js的輔助，且每個瀏覽器結果還有點紛歧樣，是以，不建議小我本身實現，為了利用便利與快速，建議直接利用當作熟的列表控件，如jqgrid表格控件、easyui前端框架、bootstrap框架等等
3）jqgrid表格控件可以凍結表頭、歸并表頭、按列名稱排序等等功能，默認jqgrid列表樣式如圖所示
7
表格-結構
1）利用表格結構可以讓頁面寬度自順應，當寬度不敷的時辰，表格內的文字會主動換行
2）注重：最好不要將很是多的內容塞到table中作為頁面的相對頂級的結構，不然，可能造當作頁面加載慢的樣子

發表于 2018-12-03 00:00
閱讀 ( 1347 )
分類：其他類型

WEB表格設計攻略

方式/步調

你可能感興趣的文章

相關問題

0 條評論

作家榜 ?

推薦文章