HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第4章 表格

網(wǎng)頁設(shè)計(jì)與制作授課教案學(xué)年第學(xué)期學(xué)院（部）專業(yè)（學(xué)部）課程名稱電子商務(wù)網(wǎng)頁設(shè)計(jì)與制作任課教師課內(nèi)形式理論教學(xué)□課內(nèi)實(shí)踐□理實(shí)一體習(xí)題復(fù)習(xí)□考核評(píng)價(jià)□其他活動(dòng)□學(xué)習(xí)量安排課內(nèi)：課外形式調(diào)查分析小組研討□實(shí)踐任務(wù)理論探究□考核評(píng)價(jià)□匯報(bào)展示□其他活動(dòng)課外：序號(hào)4授課日期月日月日月日月日授課班級(jí)課內(nèi)教學(xué)內(nèi)容：第4章表格課外學(xué)習(xí)任務(wù)：（1）課前：以小組為單位，分析表格的使用方法以及屬性的使用并以PPT的形式記錄下來。（2）課后：=1\*GB3①練習(xí)使用對(duì)應(yīng)標(biāo)簽創(chuàng)建表格。=2\*GB3②創(chuàng)建一個(gè)課程表。eq\o\ac(○,3)創(chuàng)建嵌套表格。教學(xué)目標(biāo)：知識(shí)目標(biāo)掌握表格的創(chuàng)建掌握表格屬性的使用掌握表格邊框和對(duì)齊掌握表格的合并掌握表格的結(jié)構(gòu)和嵌套能力目標(biāo)能夠掌握表格的使用；能夠使用表格的屬性對(duì)表格樣式進(jìn)行設(shè)置。素質(zhì)目標(biāo)較強(qiáng)的專業(yè)知識(shí)和自學(xué)能力；豐富知識(shí)結(jié)構(gòu)，提升專業(yè)知識(shí)；掌握類和對(duì)象的使用，理解并應(yīng)用專業(yè)知識(shí)。重點(diǎn)難點(diǎn)及解決方法：（1）重點(diǎn)：掌握表格的創(chuàng)建和屬性的使用解決方法：通過課堂示例+各種知識(shí)點(diǎn)相結(jié)合的方法，教師講解表格和表格屬性的使用方法，引導(dǎo)學(xué)生積極思考，掌握相應(yīng)知識(shí)；同時(shí)通過課堂示例展示，使學(xué)生可以掌握創(chuàng)建表格、使用屬性修改表格等相關(guān)知識(shí)；培養(yǎng)學(xué)生的思維能力和分析問題解決問題的能力。（2）難點(diǎn)：掌握表格邊框、背景、單元格合并等知識(shí)解決方法：通過案例解析+啟發(fā)式教學(xué)講解的方式，細(xì)致講解設(shè)置邊框表格和表格結(jié)構(gòu)等相關(guān)內(nèi)容。幫助學(xué)生掌握表格相關(guān)樣式的處理方法和技巧。從實(shí)用的角度幫助學(xué)生提高專業(yè)知識(shí)。課內(nèi)教學(xué)授課地點(diǎn)：教學(xué)媒體：微課、PPT課件、網(wǎng)頁圖片、相關(guān)教學(xué)視頻等。設(shè)備及材料：多媒體計(jì)算機(jī)、多媒體教學(xué)廣播軟件、網(wǎng)頁素材圖片、教學(xué)載體源文件等。其它資源：與本次課相關(guān)的專業(yè)技術(shù)論文電子版。學(xué)習(xí)效果評(píng)價(jià)方式：對(duì)理論知識(shí)學(xué)習(xí)效果評(píng)價(jià)：采用課堂提問、課后習(xí)題和查閱技術(shù)論文研讀筆記的方式；對(duì)技能的評(píng)價(jià)：教師對(duì)學(xué)生上交網(wǎng)頁作品按制作要求進(jìn)行綜合性評(píng)價(jià)；對(duì)職業(yè)素養(yǎng)的評(píng)價(jià)：采用學(xué)生自評(píng)、小組內(nèi)評(píng)價(jià)和教師評(píng)價(jià)相結(jié)合的方式。課后小結(jié)：填表說明：1.序號(hào)，指該課程授課的順序號(hào)，應(yīng)與授課計(jì)劃一致；2.授課形式在相應(yīng)的選項(xiàng)打“√”。課內(nèi)教學(xué)內(nèi)容及過程時(shí)間分配方法及手段1.創(chuàng)建表格表格的開始標(biāo)簽是<table>，結(jié)束標(biāo)簽是</table>。所有的表格內(nèi)容都位于這兩個(gè)標(biāo)簽之間。一個(gè)完整的表格除了包含<table>標(biāo)簽外，還要有行標(biāo)簽<tr>和單元格標(biāo)簽<td>?？梢哉f，在頁面中要?jiǎng)?chuàng)建一個(gè)完整的表格，至少要包含這3個(gè)標(biāo)簽。創(chuàng)建表格的語法格式如下。<table><tr><td>表格的內(nèi)容</td></tr></table>2.表格屬性（教學(xué)重點(diǎn)）【表格寬度】表格的默認(rèn)寬度是以內(nèi)容為標(biāo)準(zhǔn)的。如果要設(shè)置表格的寬度為某一特定值，而與其中的內(nèi)容無關(guān)，則可以使用width屬性，其語法格式如下。<tablewidth="表格寬度"><tr><td>表格的內(nèi)容</td></tr></table>其中，表格寬度可以是表格的絕對(duì)寬度（單位為px），也可以設(shè)置為相對(duì)寬度，即相對(duì)窗口的百分比。【表格高度】除了可以為表格指定寬度之外，還可以為表格指定高度。通常表格的高度都是由表格的行數(shù)及單元格中的內(nèi)容決定的。為表格設(shè)置高度后，如果表格的行數(shù)與單元格中的內(nèi)容使表格的高度高于指定的高度，則瀏覽器將以實(shí)際的高度顯示表格；如果實(shí)際高度低于指定高度，則瀏覽器以指定高度顯示表格。<table>標(biāo)簽的height屬性可以用來指定表格的高度，其語法格式如下。<tableheight="表格高度"><tr><td>表格的內(nèi)容</td></tr></table>【表格背景圖片】通過<table>標(biāo)簽的background屬性可以為表格指定背景圖片，這種指定方法有點(diǎn)類似為網(wǎng)頁指定背景圖片。如果背景圖片比表格小，則會(huì)平鋪該背景圖片以充滿整個(gè)表；如果背景圖片比表格大，則會(huì)對(duì)背景圖片進(jìn)行裁剪，以適應(yīng)該表格。設(shè)置表格背景圖片的語法格式如下。<tablebackground="圖像源文件地址"><tr><td>表格的內(nèi)容</td></tr></table>background的屬性值也是一個(gè)標(biāo)準(zhǔn)的URL地址，其圖片可以為GIF或JPEG格式?！締卧耖g距】單元格間距是指表格中兩個(gè)相鄰單元格之間的距離和單元格與表格邊框的距離。在默認(rèn)情況下，單元格間距是2px。設(shè)置<table>標(biāo)簽的cellspacing屬性值，可以增大或縮小單元格的間距，其語法格式如下。<tablecellspacing="間距大小"><tr><td>表格的內(nèi)容</td></tr></table>【表格內(nèi)單元格與文字的距離】表格內(nèi)單元格與文字的距離是指在單元格內(nèi)，文字與單元格邊框的距離。在默認(rèn)情況下，文字是緊貼著單元格的邊框出現(xiàn)的，這樣會(huì)顯得頁面的內(nèi)容有些擁擠。這時(shí)可以通過<table>標(biāo)簽的cellpadding屬性來調(diào)整這一距離，其語法格式如下。<tablecellpadding="單元格與文字距離的值"><tr><td>表格的內(nèi)容</td></tr></table>其中，單元格與文字的距離以px為單位，默認(rèn)設(shè)置為0px。3.表格邊框（教學(xué)重點(diǎn)）【邊框?qū)挾取吭贖TML中，默認(rèn)表格的邊框?qū)挾葹?，即不顯示表格的邊框。如果要顯示表格的邊框，就必須指定表格邊框?qū)挾?。在HTML中，可以使用<table>標(biāo)簽的border屬性來設(shè)置表格邊框的寬度，其語法格式如下。<tableborder="表格的邊框?qū)挾?><tr><td>表格的內(nèi)容</td></tr></table>【邊框顏色】在默認(rèn)情況下，邊框是灰色的。如果整個(gè)頁面設(shè)置了特定的顏色，為了使表格和整個(gè)頁面協(xié)調(diào)一致，就應(yīng)該為表格的邊框設(shè)置配色。在HTML中，可以使用<table>標(biāo)簽的bordercolor屬性來設(shè)置表格邊框的顏色，其語法格式如下。<tableborder="表格的邊框?qū)挾?bordercolor="邊框顏色"><tr><td>表格的內(nèi)容</td></tr></table>與其他頁面標(biāo)簽一樣，這里的邊框顏色可以是顏色的英文名稱，也可以是十六進(jìn)制的顏色碼。需要注意的是，要想為邊框設(shè)置顏色，必須先為邊框設(shè)置寬度，否則看不到效果。4.設(shè)置表格行的對(duì)齊方式【垂直對(duì)齊方式】valign屬性可以設(shè)置行的垂直對(duì)齊方式，以使行中的內(nèi)容都垂直對(duì)齊。其默認(rèn)值為垂直居中對(duì)齊。垂直對(duì)齊方式的語法格式如下。<table><trvalign=""><td>表格內(nèi)容</td></tr></table>valign屬性有3個(gè)值：middle、top、bottom，分別表示居中對(duì)齊、居上對(duì)齊、居下對(duì)齊。這3個(gè)屬性值除了可以寫在<tr>標(biāo)簽中，還可以寫在<td>標(biāo)簽中。寫在<td>標(biāo)簽中，用來控制每個(gè)列中的內(nèi)容垂直對(duì)齊，其用法與寫在<tr>標(biāo)簽中的用法一樣?！舅綄?duì)齊方式】align屬性可以設(shè)置行的水平對(duì)齊方式，以使行中的內(nèi)容都水平對(duì)齊。其默認(rèn)值為水平居左對(duì)齊。水平對(duì)齊方式的語法格式如下。<table><tralign=""><td>表格內(nèi)容</td></tr></table>align屬性有3個(gè)值：center、right、left，分別表示居中對(duì)齊、居右對(duì)齊和居左對(duì)齊。5.列和行的合并【列的合并】colspan屬性可以合并列，就是把一行中的某個(gè)單元格與其右側(cè)的一個(gè)或多個(gè)單元格合并。其語法格式如下。<table><tr><tdcolspan="所跨的列數(shù)">表格的內(nèi)容</td></tr></table>這里設(shè)置的是單元格所跨的列數(shù)，而不是像素?cái)?shù)。需要注意的是，設(shè)置水平跨度時(shí)，某一行單元格的跨度總和不能超過表格內(nèi)的總列數(shù)，否則表格將會(huì)出現(xiàn)無法編輯的空白區(qū)域?！拘械暮喜ⅰ縭owspan屬性可以合并行，就是合并單元格與其下方的一個(gè)或幾個(gè)單元格。其語法格式如下。<table><tr><tdrowspan="所跨的行數(shù)">表格的內(nèi)容</td></tr></table>這里設(shè)置的是單元格所跨的行數(shù)。同樣地，設(shè)置垂直跨度時(shí)，某一列單元格的跨度總和不能超過表格的總行數(shù)，否則表格內(nèi)也會(huì)出現(xiàn)無法編輯的空白區(qū)域。6.表格結(jié)構(gòu)【表頭】通常表格的第1行都是用于說明本列數(shù)據(jù)含義的表頭行，如圖4.14所示的第1行。表頭標(biāo)簽<thead>用于組合表格的表頭內(nèi)容。使用表頭標(biāo)簽<thead>可以讓網(wǎng)頁中過長的表格在打印時(shí)，每頁的最前面都顯示表頭標(biāo)簽<thead>的內(nèi)容。表頭的語法格式如下。<thead><tr><td>單元格內(nèi)的文字</td></tr></thead>【主體】表格的主體就是表格真正要表達(dá)的內(nèi)容和數(shù)據(jù)，一般占表格的大部分內(nèi)容。通過表主體標(biāo)簽<tbody>可以更好地劃分表格的結(jié)構(gòu)。設(shè)置表格主體部分的語法格式如下。<tbody><tr><td>單元格內(nèi)的文字</td></tr></tbody>【表尾】表格的表尾主要用于標(biāo)注表格的額外信息，如內(nèi)容的設(shè)計(jì)者、創(chuàng)建日期、總和等。使用表格的表尾標(biāo)簽<tfoot>可以讓網(wǎng)頁中過長的表格在打印時(shí)，每頁的最后面都顯示表尾標(biāo)簽<tfoot>的內(nèi)容。表尾的語法格式如下。<tfoot><tr><td>單元格內(nèi)的文字</td></tr></tfoot>7.表格標(biāo)題表格經(jīng)常包括標(biāo)題。在默認(rèn)情況下，表格的標(biāo)題是在表格的上方居中顯示。在HTML中，表格標(biāo)題用<caption>標(biāo)簽來設(shè)置。通常<caption>標(biāo)簽是緊跟在<table>標(biāo)簽之后的，但是它可以出現(xiàn)在<table>標(biāo)簽與<tr>標(biāo)簽之間的任何位置。其語法格式如下。<caption>表格的標(biāo)題文字</caption>8.表格嵌套在實(shí)際應(yīng)用中，表格并不是單一出現(xiàn)的，往往需要在表格內(nèi)嵌套其他的表格來實(shí)現(xiàn)頁面的整體布局。雖然這種方式已經(jīng)被div布局取代，但某些情況下還在使用這種方式。一般布局情況下，需要使用一些可視化軟件來布局，這樣看起來比較直觀，容易達(dá)到預(yù)期的效果，但是也可以直接輸入代碼來實(shí)現(xiàn)。下面舉例說明表格的嵌套。9.教學(xué)評(píng)價(jià)【組織階段考核與學(xué)生自評(píng)互評(píng)、展示考核結(jié)果】本次課的考核注重過程評(píng)價(jià)：課上考核包括專業(yè)能力與職業(yè)素養(yǎng)兩方面。展示本次課《職業(yè)素養(yǎng)評(píng)價(jià)表》，組織學(xué)生自評(píng)、互評(píng)。10．上機(jī)指導(dǎo)【疑難解答】練習(xí)使用對(duì)應(yīng)標(biāo)簽創(chuàng)建表格。創(chuàng)建一個(gè)課程表創(chuàng)建嵌套表格11.板書設(shè)計(jì)第4章表格創(chuàng)建表格表格屬性表格邊框設(shè)置表格行的對(duì)齊方式列和行的合并表格結(jié)構(gòu)表格標(biāo)題表格嵌套教學(xué)評(píng)價(jià)思考與練習(xí)課外學(xué)習(xí)任務(wù)及學(xué)習(xí)指導(dǎo)課前：【教師布置調(diào)研任務(wù)】調(diào)研主題：《在網(wǎng)頁中如何使用表格元素》要求：以小組為單位，分析如何實(shí)現(xiàn)在靜態(tài)網(wǎng)頁布局中實(shí)現(xiàn)多種表格樣式的設(shè)置；同時(shí)制作匯報(bào)PPT（PPT不得不于5頁，圖文并茂），提交到“微信群”?！緦W(xué)生調(diào)研，教師線上指導(dǎo)】學(xué)生采用線上調(diào)研的方式，開展調(diào)研。教師使用“微信群”對(duì)學(xué)生進(jìn)行指導(dǎo)?！窘處煂?duì)各組調(diào)研成果進(jìn)行評(píng)價(jià)】教師查閱學(xué)生調(diào)研結(jié)果PPT，對(duì)每個(gè)小組的PPT進(jìn)行評(píng)價(jià)，記錄評(píng)價(jià)成績，并挑選出優(yōu)秀作品。課后：【練習(xí)使用對(duì)應(yīng)標(biāo)簽創(chuàng)建表格】小組成員團(tuán)結(jié)協(xié)作，通過表格標(biāo)簽創(chuàng)建一個(gè)3行3列的表格，并為表格添加背景圖片。教師使用“微信群”對(duì)學(xué)生進(jìn)行指導(dǎo)。【創(chuàng)建一個(gè)課程表】學(xué)生通過之前所