網(wǎng)站設(shè)計(jì)公司在前面的文章中分享過(guò)網(wǎng)頁(yè)設(shè)計(jì)時(shí)如何處理表格的刪除增加等經(jīng)驗(yàn),本文今天主要接前面文章未完部分分享我們網(wǎng)頁(yè)前端設(shè)計(jì)師在處理表格時(shí)對(duì)于屬性的操作經(jīng)驗(yàn)。
網(wǎng)頁(yè)設(shè)計(jì)時(shí)對(duì)于屬性
和
按鈕的使用:清除表格中行的高度值和列的寬度值,如圖6.14所示。
網(wǎng)頁(yè)設(shè)計(jì)屬性按鈕應(yīng)用圖614清除表格的行高和列高
按鈕:將表格的寬度和高度由百分比單位的形式轉(zhuǎn)換為像素的形式,變換單位后,輸入的數(shù)值也隨之變化。
注意:這個(gè)轉(zhuǎn)化是以當(dāng)前編輯窗口的大小為參考進(jìn)行的,例如,編輯窗口寬為300像素,表格寬度+jl00%,如圖6.15(a)所示,然后將表格寬度轉(zhuǎn)換為像素,則表格寬度為286像素,如圖6.15(b)所示,如果把編輯窗口拖長(zhǎng)為400像素,則表格效果如圖6.15(c)所示。
網(wǎng)站設(shè)計(jì)對(duì)于屬性按鈕使用示意圖6.15表格寬度的單位轉(zhuǎn)換
網(wǎng)站設(shè)計(jì)屬性
按鈕:將表格的寬度和高度由像素的形式轉(zhuǎn)換為以百分比為單位的形式。
網(wǎng)站設(shè)計(jì)如何設(shè)置單元格屬性
設(shè)置好表格的整體屬性后,還可以根據(jù)不同的要求,設(shè)置相應(yīng)單元格的屬眭。設(shè)置單元格屬眭的操作步驟如下。
【操作步驟】
第1步,選中要設(shè)置屬性的單元格。例如,選中表格的第1行,并按Ctrl+F3快捷鍵,打開(kāi)【屬性】面板,如圖6.16所示。
提示:把光標(biāo)置于單元格內(nèi),出可以設(shè)置該單元格屬性,如圖6.17所示。這種方法比較方便快捷,也是最常用的設(shè)置單元格方法。
技巧:任選以下方法都可以選中單元格
1.單擊表格單元格,并拖動(dòng)鼠標(biāo)選中多個(gè)單元格
網(wǎng)站設(shè)計(jì)表格屬性處理示意圖6.17不選中并設(shè)置單元格
2.接住Ctrl鍵,并單擊要選中的單元格,可以選中多個(gè)不相連的單元格。
3.單擊要選中的矩形區(qū)域的第1個(gè)單元格,按住Shift鍵,并單擊該區(qū)域的最后個(gè)單元格,可以選中連續(xù)的多個(gè)單元格
網(wǎng)站設(shè)計(jì)對(duì)于屬性處理第2步,在【屬性】面板中進(jìn)行如下設(shè)置。
4.【合并單元格】按鈕
:可以把多個(gè)單元格合并為個(gè)單元格,如圖6.18所示
注意:選中的單元格必須是連續(xù)的矩形區(qū)域內(nèi),如圖6.19所示的被選中多個(gè)單元格是不能夠被合并的。
網(wǎng)站設(shè)計(jì)屬性處理示意圖6.19不能合并的選中多個(gè)單元格區(qū)域形狀
5.【拆分單元格】按鈕
:可以把選中的單元格拆分為多個(gè)單元格。單擊該按鈕時(shí),會(huì)打開(kāi)【拆分單元格】對(duì)話(huà)框,如圖6.20所示。
在該對(duì)話(huà)框中設(shè)置要拆分為行或列,并設(shè)置拆分的行數(shù)或列數(shù)。注意,不能同時(shí)拆分多行和多列。
6.水平對(duì)齊萬(wàn)式:在【水平】下拉列表框中選擇單元格內(nèi)元素的水平對(duì)齊方式包括左默認(rèn)、對(duì)齊、右對(duì)齊和居中對(duì)齊。其中“默認(rèn)”選項(xiàng)會(huì)根據(jù)瀏覽器內(nèi)部設(shè)置而定,般默認(rèn)都為左對(duì)齊。
7.垂直對(duì)齊萬(wàn)式:在【垂直】下拉列表框中選擇單元格內(nèi)元素的垂直對(duì)齊方式包括默認(rèn)、頂端、居中、底部和基線(xiàn)5種。這些對(duì)齊方式變化比較微妙
網(wǎng)站設(shè)計(jì)師下面逐進(jìn)行舉例說(shuō)明。
注意:這些對(duì)齊方式最初都是根據(jù)英文字母的基本結(jié)構(gòu)來(lái)設(shè)置的,所以,參照漢
字對(duì)齊方式可能就不是那么精確。
底部:插入元素(文字、圖像等有形元素)底部以單元格內(nèi)底部為線(xiàn)進(jìn)行對(duì)齊,如圖6.22所示。
居中:插入元素(文字、圖像等有形元素)的中線(xiàn)以單元格內(nèi)中線(xiàn)為參考線(xiàn)進(jìn)行對(duì)齊,如圖6.23所示。
默認(rèn):插入元素(文字、圖像等有形元素)會(huì)根據(jù)各個(gè)瀏覽器的設(shè)置決定對(duì)齊方式,般為居中對(duì)齊。
基線(xiàn):插入元素(文字、圖像等有形元素)的基線(xiàn)以行內(nèi)最低基線(xiàn)為參照線(xiàn)進(jìn)行對(duì)齊。
記住基線(xiàn)是針對(duì)英文字母的結(jié)構(gòu)來(lái)說(shuō)的,它和英文字母的底部是有區(qū)別的,如圖6.24所示。
頂端:插入元素(文字、圖像等有形元素)頂端以單元格匈頂端為線(xiàn)進(jìn)行對(duì)齊,如圖6.2l所示。

8.寬和高:用于設(shè)置單元格的寬度和高度,以像素為單位。
9.不換行:設(shè)置單元格中的內(nèi)容是否自動(dòng)換行。選中該復(fù)選框,則在單元格中輸入文本時(shí)不會(huì)自動(dòng)換行,而是擴(kuò)展單元格的寬度,如圖6.25所示。
網(wǎng)站設(shè)計(jì)對(duì)于屬性處理示意圖6.25換行和不換行效果比較
10.標(biāo)題:可以將所選的單元格設(shè)置為標(biāo)題單元格。而單元格里的文本內(nèi)容將會(huì)居中加粗顯示,如圖6.26所示。這和在【表格】對(duì)話(huà)框和設(shè)置【頁(yè)眉】選項(xiàng)效果是一致的。
網(wǎng)站設(shè)計(jì)對(duì)于屬性處理示意圖6.26設(shè)置標(biāo)題單元格
11.背景顏色:在【背景顏色】文本框中可以設(shè)置單元格的背景顏色。好了深圳網(wǎng)站設(shè)計(jì)公司關(guān)于在前端設(shè)計(jì)如何處理表格屬性的使用問(wèn)題,本文就介紹到這里,如果您喜歡本站的文章,敬請(qǐng)持續(xù)關(guān)注。我們會(huì)定期更新發(fā)布相關(guān)類(lèi)型的知識(shí),希望能對(duì)你的工作有所幫助。深圳網(wǎng)站制作博納網(wǎng)絡(luò)編輯整理。