網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目教程單元4--表格與表格布局網(wǎng)頁(yè)的制作

1、網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目教程（微課版）湯智華 主編王愛(ài)紅 主審工業(yè)和信息化“十三五”高職高專(zhuān)人才培養(yǎng)規(guī)劃教材 單元4 表格與表格布局網(wǎng)頁(yè)的制作【教學(xué)導(dǎo)航】教學(xué)目標(biāo)（1）學(xué)會(huì)正確地插入表格，并合理地設(shè)置表格的屬性（2）學(xué)會(huì)正確地在表格中插入嵌套表格，并合理地設(shè)置嵌套表格的屬性（3）掌握單元格的合并、拆分的操作方法，行、列的插入和刪除的操作方法（4）學(xué)會(huì)正確地設(shè)置表格中行和列的屬性（5）學(xué)會(huì)正確設(shè)置表格、單元格的背景圖像和背景顏色（6）學(xué)會(huì)正確地在表格中輸入文字（7）學(xué)會(huì)正確地在表格中插入圖像（8）學(xué)會(huì)制作流行的細(xì)線表格的方法（9）學(xué)會(huì)設(shè)置滾動(dòng)文本效果的方法（10）能使用表格布局網(wǎng)頁(yè)，能正確理解適合表格

2、布局的含義本單元重點(diǎn)（1）插入表格、設(shè)置表格的屬性（2）合并或拆分單元格（3）設(shè)置表格、單元格的背景圖像和背景顏色（4）在表格中輸入文字、插入圖像（5）制作流行的細(xì)線表格（6）使用表格布局網(wǎng)頁(yè)本單元難點(diǎn)（1）在表格中插入嵌套表格，并設(shè)置嵌套表格的屬性（2）設(shè)置滾動(dòng)文本效果教學(xué)方法任務(wù)驅(qū)動(dòng)法、分組討論法4.1 表格一、創(chuàng)建表格1為什么要應(yīng)用表格 日常生活中，為了清晰地顯示數(shù)據(jù)或信息，常常使用表格對(duì)數(shù)據(jù)或信息進(jìn)行統(tǒng)計(jì)，同樣在制作網(wǎng)頁(yè)時(shí)，為了使網(wǎng)頁(yè)中的元素有條理地顯示，也需要使用表格對(duì)網(wǎng)頁(yè)進(jìn)行規(guī)劃。 【說(shuō)明】 表格標(biāo)簽既適合制作表格，也可用適當(dāng)用于網(wǎng)頁(yè)布局。雖然，使用表格進(jìn)行網(wǎng)頁(yè)布局的方法已被摒棄。

3、2創(chuàng)建表格的基本語(yǔ)法 創(chuàng)建表格的基本語(yǔ)法格式如下： 單元格內(nèi)的文字 運(yùn)行完整的案例代碼，得到效果如圖4-1所示。圖4-1 表格的定義方法二、標(biāo)記 大多數(shù)HTML標(biāo)記都有相應(yīng)的屬性，用于為元素提供更多的信息，標(biāo)記也不例外，HTML語(yǔ)言為其提供了一系列的屬性，用于控制表格的顯示樣式。（1）border屬性：在標(biāo)記中，border屬性用于設(shè)置表格的邊框，默認(rèn)值為0。（2）cellspacing屬性：cellspacing屬性用于設(shè)置單元格與單元格邊框之間的空白間距，默認(rèn)為2px。（3）cellpadding屬性：cellpadding屬性用于設(shè)置單元格內(nèi)容與單元格邊框之間的空白間距，默認(rèn)為1px。（

4、4）width與height屬性：默認(rèn)情況下，表格的寬度和高度靠其自身的內(nèi)容來(lái)支撐。（5）align屬性：用于定義元素的水平對(duì)齊方式，其可選屬性值為left、center、right。（6）bgcolor屬性：用于設(shè)置表格的背景顏色。（7）background屬性：用于設(shè)置表格的背景圖像。三、標(biāo)記 通過(guò)對(duì)標(biāo)記應(yīng)用各種屬性，可以控制表格的整體顯示樣式，但是制作網(wǎng)頁(yè)時(shí)，有時(shí)需要表格中的某一行特殊顯示，這時(shí)就可以為行標(biāo)記定義屬性，其常用屬性如下。（1）height：設(shè)置行高度，常用屬性值為像素值。（2）align：設(shè)置一行內(nèi)容的水平對(duì)齊方式，常用屬性值為left、center、right。（3）va

5、lign：設(shè)置一行內(nèi)容的垂直對(duì)齊方式，常用屬性值為top、middle、bottom。（4）bgcolor：設(shè)置行背景顏色，預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)（5）background：設(shè)置行背景圖像，url地址。 運(yùn)行完整的案例代碼，得到效果如圖4-2所示。圖4-2 行標(biāo)記的常用屬性四、標(biāo)記（1）width：設(shè)置單元格的寬度，常用屬性值為像素值。（2）height：設(shè)置單元格的高度，常用屬性值為像素值。（3）align：設(shè)置單元格內(nèi)容的水平對(duì)齊方式，常用屬性值為left、center、right。（4）valign：設(shè)置單元格內(nèi)容的垂直對(duì)齊方式，常用屬性值為top、mid

6、dle、bottom。（5）bgcolor：設(shè)置單元格的背景顏色，常用屬性值為預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)。（6）background：設(shè)置單元格的背景圖像，常用屬性值為URL地址。（7）colspan：設(shè)置單元格橫跨的列數(shù)（用于合并水平方向的單元格），常用屬性值為正整數(shù)。（8）rowspan：設(shè)置單元格豎跨的行數(shù)（用于合并豎直方向的單元格），常用屬性值為正整數(shù)。 與標(biāo)記不同的是，可以對(duì)標(biāo)記應(yīng)用width屬性，用于指定單元格的寬度，同時(shí)標(biāo)記還擁有colspan和rowspan屬性，用于對(duì)單元格進(jìn)行合并。 運(yùn)行完整的案例代碼，得到效果如圖4-3所示。圖4-3 單元格的合

7、并（垂直相鄰）五、標(biāo)記 應(yīng)用表格時(shí)經(jīng)常需要為表格設(shè)置表頭，以使表格的格式更加清晰，方便查閱。 設(shè)置表頭非常簡(jiǎn)單，只需用表頭標(biāo)記替代相應(yīng)的單元格標(biāo)記即可。 運(yùn)行完整的案例代碼，得到效果如圖4-5所示。圖4-5 表頭標(biāo)記th（使用前）六、表格的結(jié)構(gòu) 為了使搜索引擎更好地理解網(wǎng)頁(yè)內(nèi)容，在使用表格進(jìn)行布局時(shí)，可以將表格劃分為表格標(biāo)題、頭部、主體和頁(yè)腳等結(jié)構(gòu)，用于定義網(wǎng)頁(yè)中的不同內(nèi)容，劃分表格結(jié)構(gòu)的標(biāo)記如下。（1）：用于定義表格標(biāo)題。 標(biāo)簽必須緊隨標(biāo)簽之后。您只能對(duì)每個(gè)表格定義一個(gè)標(biāo)題。通常這個(gè)標(biāo)題會(huì)被居中于表格之上。（2）：用于定義表格的頭部，必須位于 標(biāo)記中，一般包含網(wǎng)頁(yè)的logo和導(dǎo)航等頭部信息。

8、（3）：用于定義表格的頁(yè)腳，位于標(biāo)記中標(biāo)記之后，一般包含網(wǎng)頁(yè)底部的企業(yè)信息等。（4）：用于定義表格的主體，位于標(biāo)記中標(biāo)記之后，一般包含網(wǎng)頁(yè)中除頭部和底部之外的其他內(nèi)容。4.2 表格布局 由于表格布局只適用形式單調(diào)，內(nèi)容也比較簡(jiǎn)單的網(wǎng)頁(yè)，因此這里只需了解即可。 其布局方法是：在相應(yīng)的單元格中插入各種元素即可，無(wú)論是文字、圖像等元素。4.3 CSS控制表格樣式 定義無(wú)序或有序列表時(shí)，可以通過(guò)標(biāo)記的屬性控制列表的項(xiàng)目符號(hào)，但是這種方式實(shí)現(xiàn)的效果并不理想，這時(shí)就需要用到CSS中一系列的列表樣式屬性。一、CSS控制表格邊框樣式 使用邊框樣式屬性border設(shè)置表格邊框時(shí)，要特別注意單元格邊框的設(shè)置。 運(yùn)

9、行案例代碼，得到效果如圖4-7所示。 接著，給單元格單獨(dú)設(shè)置相應(yīng)的邊框樣式，具體代碼如下：td,thborder:1px solid #F00;/*為單元格單獨(dú)設(shè)置邊框*/ 保存文件，刷新網(wǎng)頁(yè)，效果如圖4-8所示。 圖4-7 CSS控制表格邊框樣式01 圖4-8 CSS控制表格邊框樣式02 最后，去掉單元格之間的空白距離，制作細(xì)線邊框效果，具體代碼如下所示：table width:400px; height:150px; border:1px solid #F00; /*設(shè)置table的邊框*/ border-collapse:collapse; /*邊框合并*/ 保存文件，刷新網(wǎng)頁(yè)，效果如圖

10、4-9所示。圖4-9 CSS控制表格邊框樣式03二、CSS控制單元格邊距 對(duì)單元格設(shè)置內(nèi)邊距padding和外邊距margin樣式，同樣可以控制單元格邊距。 運(yùn)行完整的案例代碼，得到效果如圖4-10所示。 【注意】 行標(biāo)記無(wú)內(nèi)邊距屬性padding和外邊距屬性margin。圖4-10 CSS控制單元格邊距三、CSS控制單元格寬高 單元格的寬度和高度，有著和其他元素不同的特性，主要表現(xiàn)在單元格之間的互相影響上。運(yùn)行完整的案例代碼，得到效果如圖4-11所示。 值得一提的是，對(duì)同一行中的單元格定義不同的高度，或?qū)ν涣兄械膯卧穸x不同的寬度時(shí)，最終的寬度或高度將取其中的較大者。圖4-11 CSS控

11、制單元格寬高【操作準(zhǔn)備】 創(chuàng)建所需的文件夾，復(fù)制所需的資源到桌面上。即：在本地硬盤(pán)（例如D盤(pán)）中創(chuàng)建一個(gè)文件夾“網(wǎng)頁(yè)設(shè)計(jì)與制作練習(xí)Unit04”，然后將光盤(pán)中的“start”文件夾中“Unit04”文件夾中的“Unit04課程資源”文件夾所有內(nèi)容復(fù)制到桌面上。【模仿訓(xùn)練】任務(wù)4.1 北京大學(xué)網(wǎng)站表格與表格布局網(wǎng)頁(yè)的制作 本單元“模仿訓(xùn)練”的任務(wù)卡如表4.1所示。任務(wù)編號(hào)4.1任務(wù)名稱北京大學(xué)網(wǎng)站表格與表格布局網(wǎng)頁(yè)的制作網(wǎng)頁(yè)主題北京大學(xué)計(jì)劃工時(shí) 網(wǎng)頁(yè)制作任務(wù)描述（1）在網(wǎng)頁(yè)中插入表格，并合理地設(shè)置表格的屬性（2）設(shè)置表格、行、列和單元格的屬性（3）在表格的單元格中輸入文字、圖像，并設(shè)置文字、圖像

12、的屬性（4）插入嵌套表格，并設(shè)置嵌套表格的屬性（5）合并與拆分單元格（6）利用表格對(duì)網(wǎng)頁(yè)進(jìn)行布局（7）設(shè)置滾動(dòng)文本效果網(wǎng)頁(yè)布局結(jié)構(gòu)分析（1）表格和表格布局方式，如圖4-12所示（2）滾動(dòng)文本效果網(wǎng)頁(yè)色彩搭配分析網(wǎng)頁(yè)中文字的顏色：#2b2b2b。表格各單元格的背景顏色：#000000網(wǎng)頁(yè)組成元素分析主要包括表格、標(biāo)題文本、正文文本、圖像及鏈接任務(wù)實(shí)現(xiàn)流程分析插入表格及其屬性設(shè)置設(shè)置的背景圖像、行屬性在表格中輸入文本設(shè)置滾動(dòng)文本效果插入表格及其屬性設(shè)置在表格中插入圖像、輸入文本及其屬性設(shè)置合并與拆分單元格表4.1 單元4“模仿訓(xùn)練”任務(wù)卡 本單元“模仿訓(xùn)練”的任務(wù)跟蹤卡如表4.2所示。任務(wù)編號(hào)開(kāi)始

13、時(shí)間完成時(shí)間計(jì)劃工時(shí)實(shí)際工時(shí)當(dāng)前狀態(tài) 表4.2 單元4“模仿訓(xùn)練”任務(wù)跟蹤卡 本單元“模仿訓(xùn)練”網(wǎng)頁(yè)task4-1.html的瀏覽效果如圖4-12所示。圖4-12 北京大學(xué)網(wǎng)站表格與表格布局網(wǎng)頁(yè)task4-1.html的瀏覽效果圖任務(wù)4.1.1 表格及細(xì)線表格的制作任務(wù)描述（1）創(chuàng)建Unit04站點(diǎn)結(jié)構(gòu)，將所需圖片復(fù)制到“images”文件夾中，使用“網(wǎng)頁(yè)骨架.html”文件，保存為“task4-1.html”網(wǎng)頁(yè)文件，將其拖曳到編輯器中進(jìn)行編輯，修改網(wǎng)頁(yè)標(biāo)題為“表格與表格布局網(wǎng)頁(yè)”。（2）使用、/、創(chuàng)建符合Web標(biāo)準(zhǔn)的表格基本結(jié)構(gòu)。設(shè)置窗口的背景色為#cce8cf。（3）設(shè)置標(biāo)簽的屬性，代碼

14、為。 瀏覽器效果如圖4-14所示。 圖4-14 設(shè)置table標(biāo)簽屬性后的表格（4）設(shè)置所有標(biāo)簽的屬性“居中”,代碼為設(shè)置第25行第二列標(biāo)簽的屬性“左對(duì)齊”，代碼為就業(yè)情況。 瀏覽器效果如圖4-15所示。（5）在第25行第三列使用標(biāo)簽插入圖像。分別替換掉2.35.3的文字，代碼為。 瀏覽器效果如圖4-16所示。 圖4-15 設(shè)置tr、td標(biāo)簽屬性后的表格 圖4-16 插入圖像后的表格（6）合并第6行的1、2、3列。 使用“colspan”屬性，合并第6行的1、2、3列后（注意：將6.2、6.3的都刪除），接著，將6.1修改為“合計(jì)”。代碼為 合計(jì) 3 423 243 243 4 534 444

15、 554 瀏覽器效果如圖4-17所示。圖4-17 合并單元格后的表格（7）將表格線制作成細(xì)線?！咎崾尽?制作細(xì)線表格的步驟如下。（1）設(shè)置表格的邊框?yàn)?，即：border=0。（2）設(shè)置單元格與單元格之間的距離為1，cellspacing=1。（3）設(shè)置表格的背景色 bgcolor，表格的背景色就是表格線的顏色（如：bgcolor=red）。（4）設(shè)置每一個(gè)單元格的背景色，如：白色（也可和瀏覽器的背景色一致）。 瀏覽器效果如圖4-18所示。圖4-18 完成后的細(xì)線表格任務(wù)實(shí)施（1）創(chuàng)建站點(diǎn)結(jié)構(gòu)，使用“網(wǎng)頁(yè)骨架.html”文件，創(chuàng)建“task4-1.html”網(wǎng)頁(yè)文件。（2）創(chuàng)建符合Web標(biāo)準(zhǔn)的

16、表格基本結(jié)構(gòu)。（3）設(shè)置標(biāo)簽的屬性，定義寬度、居中，設(shè)置邊框線、單元格邊距、內(nèi)容邊距。（4）設(shè)置“居中”“左對(duì)齊”屬性。（5）插入圖像。（6）合并單元格。（7）將表格線制作成細(xì)線表格。（8）滾動(dòng)文字效果的制作。任務(wù)4.1.2 滾動(dòng)文本效果的制作任務(wù)描述 在細(xì)線表格下將所輸入的文本設(shè)置為滾動(dòng)效果。任務(wù)實(shí)施（1）在【任務(wù)4.1.1】的基礎(chǔ)上繼續(xù)編輯。（2）在標(biāo)簽下，輸入換行，然后，輸入以下代碼：歡迎來(lái)到北京大學(xué)！（3）保存滾動(dòng)文字的設(shè)置。瀏覽器效果如圖4-19所示。圖4-19 添加滾動(dòng)文本后的瀏覽器效果 任務(wù)4.1.3 表格布局網(wǎng)頁(yè)的制作任務(wù)描述（1）分析布局結(jié)構(gòu)，其結(jié)構(gòu)由兩個(gè)表格構(gòu)成，上表格為三

17、行兩列，居中。下表格為兩行兩列，第2行第1列無(wú)內(nèi)容，如圖4-20所示。（2）使用、創(chuàng)建兩個(gè)表格基本結(jié)構(gòu)。（3）設(shè)置第一個(gè)表格的屬性“居中”，代碼為。（4）在相應(yīng)的單元格中，插入相應(yīng)的圖片、文字和空鏈接。（5）設(shè)置第二個(gè)表格的屬性“高度”為120px，代碼為。圖4-20 表格布局的結(jié)構(gòu)分析圖任務(wù)實(shí)施（1）分析布局結(jié)構(gòu)。（2）創(chuàng)建兩個(gè)表格基本結(jié)構(gòu)。（3）設(shè)置第一個(gè)表格的屬性“居中”。（4）在相應(yīng)的單元格中，插入相應(yīng)的圖片、文字和空鏈接。（5）設(shè)置第二個(gè)表格的屬性“高度”?！就卣褂?xùn)練】任務(wù)4.2 綠色食品網(wǎng)站表格與表格布局網(wǎng)頁(yè)的制作 本單元“拓展訓(xùn)練”的任務(wù)卡如表4.3所示。任務(wù)編號(hào)4.2任務(wù)名稱綠色食品網(wǎng)站表格與表格布局網(wǎng)頁(yè)的制作網(wǎng)頁(yè)主題綠色食品計(jì)劃工時(shí) 拓展訓(xùn)練任務(wù)描述（1）在網(wǎng)頁(yè)中插入表格，并合理地設(shè)置表格的屬性（2）設(shè)置表格、行、列和單元格的屬性（3）在表格的單元格中輸入文字、圖像，并設(shè)置文字、圖像的屬性（4）插入嵌套表格，并設(shè)置嵌套表格的屬性（5）合并與拆