教你如何制作網(wǎng)頁表格-資料下載頁
2025-01-18 17:51本頁面
【正文】 元格內(nèi)容在垂直方向上相對單元格的對齊方式。有 5種選擇，即 Top（ 頂部）、 Middle（ 居中）、 Bottom（ 底端）、Baseline（ 基線）、 Default（ 默認(rèn)）。選擇 Default，則采用瀏覽器指定的默認(rèn)垂直對齊方式，通常是居中對齊方式，這時(shí)也相當(dāng)于在 HTML中刪除垂直對齊方式的屬性 Valign， 即取消垂直對齊方式的設(shè)置。68注意：水平對齊和垂直對齊的意義和效果與在文本和圖像中的對齊是一樣的；單元格的對齊效果可以通過屬性面板上部的文本對齊方式按鈕 實(shí)現(xiàn)，但它們的本質(zhì)是不同的，單元格對齊方式設(shè)置的是 Td標(biāo)記的 align屬性和 valign屬性，它影響所設(shè)置的整個(gè)單元格；而文本對齊設(shè)置的是段落屬性，它只影響所設(shè)置的一個(gè)或多個(gè)段落，如果兩者都設(shè)置，則段落屬性優(yōu)先。2. 設(shè)置單元格的寬度和高度在表格中，一行中的所有單元格的高度是一樣的，一列中的所有單元格的寬度也是一樣的。所以，單元格的高度就是相應(yīng)行的高度，單元格的寬度就是相應(yīng)列的寬度。69W（ 寬度）： 該文本框設(shè)置單元格寬度值，如果輸入數(shù)值，則表示是像素值；如果輸入帶有百分號的數(shù)字，如“40%”，則表示單元格寬度相對于整張表格寬度的百分比，但該值的設(shè)置一般不影響整個(gè)表格的寬度。H（ 高度）： 該文本框用來設(shè)置單元格的高度。輸入數(shù)字，表示像素值；輸入帶有百分號的數(shù)字，如 “10%”，表示單元格高度相對于整張表格高度的百分比。注意： 如果在一行中設(shè)置了多個(gè)單元格的高度，則行高以最高的設(shè)置為準(zhǔn)，列寬也是一樣，所以，設(shè)置時(shí)最好按行或列設(shè)置高度和寬度。用鼠標(biāo)拖動(dòng)的方法改變表格的行高和列寬更為方便。將鼠標(biāo)移動(dòng)到某行下方的邊框上，當(dāng)鼠標(biāo)變?yōu)樯舷码p箭頭形狀時(shí)拖動(dòng)鼠標(biāo)，即可以改變行高。將鼠標(biāo)移動(dòng)到某列右方的邊框上，當(dāng)鼠標(biāo)變?yōu)樽笥译p箭頭形狀時(shí)拖動(dòng)鼠標(biāo)，即可以改變列寬 (見圖 )。70圖 713. 設(shè)置單元格的邊框顏色和背景單元格的邊框顏色和背景是指定單元格四周的邊框顏色和局部背景顏色，不是整個(gè)表格的邊框和背景，也不是所有單元格的邊框架和背景。通過單元格邊框顏色和背景的設(shè)置，可以使不同的區(qū)域有不同的邊框顏色和背景。如果設(shè)置的單元格邊框顏色與背景顏色相同，可以實(shí)現(xiàn)局部無線表格的效果（見圖）。Brdr（ 邊框顏色）： 設(shè)置選中行、列或單元格的邊框顏色?？梢詥螕纛伾粹o選擇需要的顏色，也可以直接在顏色框中輸入顏色的十六進(jìn)制數(shù)值。72圖 73Bg（ 背景）： 上面一個(gè) Bg文本框用來設(shè)置單元格的背景圖像?？梢栽谠撐谋究蛑休斎雸D像文件的 URL地址，也可以單擊右方的文件夾按鈕，從磁盤上選擇圖像文件下面的 Bg（ 背景）顏色框可以設(shè)置單元格的背景顏色?？梢詥螕纛伾粹o選擇顏色，也可以在顏色框中輸入顏色的十六進(jìn)制數(shù)值。注意： 單元格的邊框顏色和背景顏色設(shè)置的是選中單元格的局部邊框和背景顏色，對未設(shè)置的單元格，使用的是表格的相應(yīng)屬性值。4. 控制單元格內(nèi)容的換行方式由于表格單元格的區(qū)域受到限制，在顯示長文本時(shí)如何換行就顯得比較重要。No Warp（ 不換行）： 如果不選中該復(fù)選框，則在單元格中輸入文本時(shí)，長度超出了單元格的寬度，文本會自動(dòng)換行，單元格的高度增加，寬度保持不變。反之，如果選中該復(fù)選框，則在單元格中輸入文本時(shí)，文本長度超出了單元格的寬度，文本不自動(dòng)換行，單元格的寬度將隨之變寬。745. 設(shè)置標(biāo)題單元格在表格的設(shè)計(jì)和制作中，為了清晰地表示表格各行和各列的意思，通常用一些醒目的字體或顏色顯示，這可使用單元格內(nèi)容的格式化操作來實(shí)現(xiàn)，也可使用表格中的標(biāo)題標(biāo)記來實(shí)現(xiàn)。Header（ 標(biāo)題）： 如果選中該復(fù)選框，則將所有選中的單元格設(shè)置為標(biāo)題單元格，通常為字體加黑顯示；如果不選中該復(fù)選框，則將所有選中的單元格設(shè)置為數(shù)據(jù)單元格，一般文本顯示，當(dāng)然字符的格式化還是有效的（見圖 ）。75圖 76 自動(dòng)套用格式【例 】表格套用格式① 選中要套用格式的表格。② 執(zhí)行 Commands|Format Table（ 格式化表格）命令，會出現(xiàn) Format Table(格式化表格 )對話框（見圖 ）。③ 在左上角的列表中，選擇現(xiàn)有的某種格式，這時(shí)在右方可以看到當(dāng)前選擇的預(yù)覽效果。在該對話框中，還可以對表格的格式進(jìn)行相應(yīng)的調(diào)整。圖 。77圖 78圖 79 利用表格布局版面在網(wǎng)頁制作中，表格除用作格式化數(shù)據(jù)的排放外，由于其定位方便，在頁面的布局中有很大的用處。圖 800buy的一個(gè)網(wǎng)頁，查看它的 HTML源代碼，并將表格加上 5個(gè)像素的邊圖 ，這時(shí)可以清楚地看到它的表格結(jié)構(gòu)（見圖 ，每一個(gè)黑框是一個(gè)表格），如果將其中的內(nèi)容刪除，它的結(jié)構(gòu)更為清晰（見圖 ）。使用表格布局版面應(yīng)注意以下問題：瀏覽器在下載表格時(shí)，需要將表格中的所有內(nèi)容（包括圖像）都下載完畢后才顯示，所以，如果一個(gè)頁面有很好的上下結(jié)構(gòu)，可以分成幾個(gè)上下并列的表格，而不要把整個(gè)頁面中的所有內(nèi)容都放在一個(gè)表格中，這樣可以加快瀏覽速度，減少等待時(shí)間，特別是網(wǎng)頁內(nèi)容較多時(shí)更應(yīng)這樣。80圖 81圖 82圖 83如果版面是大塊內(nèi)容，可以使用較粗的表格，即行列數(shù)不用太多。如果頁面內(nèi)容比較細(xì)碎，可以使用較細(xì)的表格，也可以使用嵌套表格，即表格單元格的內(nèi)容是另一個(gè)表格。用表格布局版面，一種是通過細(xì)分行列精確定位頁面元素，另一種是通過行高和列寬的調(diào)整來確定頁面元素在版面中的位置。用表格布局版面時(shí)一般不希望頁面顯示表格線，這時(shí)可以設(shè)置表格的邊框?qū)挾葹?0，以達(dá)到不顯示表格線的目的，也可以設(shè)置邊框的顏色為背景色。84思考與練習(xí)、單元格、單元格內(nèi)部邊距、單元格邊距、表格邊框？ ?如何使用已有的格式化文本文件創(chuàng)建表格？？簡要說明操作命令。？，將網(wǎng)頁中的文本和圖像放在表格的單元格中，通過不同的單元格或?qū)ο笤趩卧裰械牟煌帕蟹绞剑ň又?、居左、居右等）或改變單元格的大小來定位其中的對象。用什么辦法不顯示表格邊框？85演講完畢，謝謝觀看！
環(huán)評公示相關(guān)推薦
鄂ICP備17016276號-1