網(wǎng)頁設(shè)計(jì)的內(nèi)容很多，表格就是其中一種常見的表達(dá)方式。網(wǎng)頁中的表格設(shè)計(jì)跟文檔中的表格設(shè)計(jì)有很多不同。那網(wǎng)頁表格設(shè)計(jì)是怎么做的？有哪些網(wǎng)頁表格設(shè)計(jì)技巧提供給大家參考呢？今天就讓faceui為大家介紹一下。

　　網(wǎng)頁表格設(shè)計(jì)技巧

　　1、行高是表格瀏覽時(shí)的重要參數(shù)

　　行高是表格非常重要的參數(shù)，行高間距直接影響著閱讀的體驗(yàn)，有如同Omniature為了最大限度的放置數(shù)據(jù)內(nèi)容，強(qiáng)化數(shù)據(jù)顯示效果而降低行高的情況，也有SugarCRM一樣的行高較高可以放置更多文本信息的表格。

　　2、斑馬線更好的引導(dǎo)閱讀

　　斑馬線和懸停時(shí)的整行變化也是表格中能引起視覺變化的重要元素，斑馬線會使得行與行的界限更為分明，尤其對數(shù)據(jù)列較多時(shí)的橫向引導(dǎo)得到加強(qiáng)，這樣看行內(nèi)的內(nèi)容時(shí)不容易錯(cuò)行，而懸停變色行主要是配合操作交互，為了明確區(qū)分出光標(biāo)所在的行。

網(wǎng)頁表格設(shè)計(jì)（圖片來自網(wǎng)絡(luò)）

　　3、選擇和操作提升使用效率

　　對表格數(shù)據(jù)的選擇會有單選多選或者全選的情況，如果遇到數(shù)據(jù)項(xiàng)很多有翻頁，全選的位置就會增加一些選項(xiàng)來確定是當(dāng)頁全選還是整表全選，這種表格是將選擇區(qū)域放置在表格的左側(cè)第一列，也有表格的設(shè)計(jì)是將選擇放在右側(cè)最后一列，好處在于瀏覽完一行的信息就可以確定是否需要選擇該行內(nèi)容進(jìn)行下一步操作。

　　4、排序使表格活起來

　　排序是表格里經(jīng)常需要使用的操作，可以更為快捷的發(fā)掘出關(guān)注的信息，一般會有升序和降序兩種，當(dāng)前比較常見的是上下空心箭頭默認(rèn)，上箭頭為升序，下箭頭為降序，也有通過明確說明來提示排序的方式。也會出現(xiàn)這種多重排序的表，其實(shí)是將列的數(shù)據(jù)排序區(qū)域作為單獨(dú)的控制區(qū)進(jìn)行操作，以實(shí)現(xiàn)多個(gè)維度的排序。

網(wǎng)頁表格設(shè)計(jì)（圖片來自網(wǎng)絡(luò)）

　　怎樣進(jìn)行網(wǎng)頁表格設(shè)計(jì)

　　1、打開編輯器,在網(wǎng)頁的標(biāo)簽內(nèi)插入標(biāo)簽，屬性border顯示邊框。

　　2、使用行和表格進(jìn)行創(chuàng)建5行3列的表格。

　　3、每個(gè)網(wǎng)格添加數(shù)據(jù)，表格里的文字。

　　4、設(shè)置表格的寬度和表格的間距的距離，分別使用cellspacing和width屬性。

　　5、給表格的第一行添加灰色背景,字體大小設(shè)置。

　　6、在使用表格時(shí)候,首先確定表格的行和列數(shù)，在對每個(gè)部分進(jìn)行使用標(biāo)簽對屬性進(jìn)行修改。

　　以上就是faceui為大家介紹的關(guān)于網(wǎng)頁表格設(shè)計(jì)的相關(guān)內(nèi)容。網(wǎng)頁表格設(shè)計(jì)明顯不同于其他的網(wǎng)頁設(shè)計(jì)，在設(shè)計(jì)時(shí)不但要了解上述介紹的網(wǎng)頁表格設(shè)計(jì)技巧，也需要注意表格的行列問題。