《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第11課 使用HTML5添加表格_第1頁
《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第11課 使用HTML5添加表格_第2頁
《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第11課 使用HTML5添加表格_第3頁
《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第11課 使用HTML5添加表格_第4頁
《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第11課 使用HTML5添加表格_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1131第1131第課使用HTML5添加表格的基基本本PAGE141132111321使用HTML5添加表格第課PAGE13113212使用HTML5113212使用HTML5添加表格第課PAGE1

課題使用HTML5添加表格課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）了解表格的基本組成（2）掌握使用HTML5添加表格的方法（3）學(xué)習(xí)HTML5中設(shè)置表格標(biāo)簽常用屬性的方法思政育人目標(biāo)：通過學(xué)習(xí)HTML5添加表格的方法，培養(yǎng)出學(xué)生認(rèn)真、嚴(yán)謹(jǐn)?shù)墓ぷ鲬B(tài)度，同時(shí)鍛煉學(xué)生的邏輯思維、辯證思維教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：掌握使用HTML5設(shè)置表格標(biāo)簽常用屬性的方法教學(xué)難點(diǎn)：使用HTML5語言添加表格教學(xué)方法講授法、啟發(fā)法、問答法、演示法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：知識(shí)講解（20min）第2節(jié)課：?jiǎn)栴}導(dǎo)入（4min）

知識(shí)講解（20min）

代碼分析（12min）

多維評(píng)價(jià)（5min）

課堂小結(jié)（2min）

作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課考勤

（2min）【教師】清點(diǎn)上課人數(shù)，記錄好考勤【學(xué)生】班干部報(bào)請(qǐng)假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問題導(dǎo)入

（4min）【教師】提出問題，引出新知識(shí)點(diǎn)在網(wǎng)頁中使用表格可以清晰直觀地顯示數(shù)據(jù)，讓用戶更加直觀找到自己想要的數(shù)據(jù)，那么如何在網(wǎng)頁中添加表格呢？添加表格的方式與之前學(xué)習(xí)的內(nèi)容是否存在不同【學(xué)生】思考、發(fā)言【教師】總結(jié)學(xué)生發(fā)言HTML5語言提供很多插入表格的方法，讓用戶選擇最適合的方法去操作通過問答的方式，讓學(xué)生思考如何在HTML5中加入表格，引出本節(jié)課的內(nèi)容知識(shí)講解

（20min）【教師】講解字典的創(chuàng)建添加表格表格由行和列組成，它們的交點(diǎn)稱為單元格，如圖6-1所示。圖6-1表格的基本結(jié)構(gòu)一個(gè)最基本的表格結(jié)構(gòu)包括行標(biāo)簽與單元格標(biāo)簽。在HTML5中，使用<table>標(biāo)簽標(biāo)記表格，使用<tr>子標(biāo)簽標(biāo)記行，<td>子標(biāo)簽標(biāo)記單元格，具體格式為：<table> <tr> <td>…</td>……<td>…</td> </tr> ……</table>其中，一個(gè)<tr>標(biāo)簽表示一行，一個(gè)<td>標(biāo)簽表示一個(gè)單元格，<td>標(biāo)簽必須包含在<tr>標(biāo)簽中?！窘處煛垦菔尽纠?-1】操作流程，實(shí)現(xiàn)圖6-2的效果制作一個(gè)基本表格（部分代碼），頁面效果如圖6-2所示。<table> <tr><td>《辛德勒的名單》</td><td>1993年</td><td>9.4分</td></tr> <tr><td>《肖申克的救贖》</td><td>1994年</td><td>9.6分</td></tr> <tr><td>《阿甘正傳》</td><td>1994年</td><td>9.4分</td></tr> <tr><td>《羅馬假日》</td><td>1953年</td><td>8.9分</td></tr> <tr><td>《陽光燦爛的日子》</td><td>1994年</td><td>8.7分</td></tr></table>圖6-2基本表格的頁面效果創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，使用表格標(biāo)簽制作電影佳作推薦表。<table> <caption>電影佳作推薦表</caption> <tr><th>電影名稱</th><th>上映時(shí)間</th><th>評(píng)分</th></tr> <tr><td>《辛德勒的名單》</td><td>1993年</td><td>9.4分</td></tr> <tr><td>《肖申克的救贖》</td><td>1994年</td><td>9.6分</td></tr> <tr><td>《阿甘正傳》</td><td>1994年</td><td>9.4分</td></tr> <tr><td>《羅馬假日》</td><td>1953年</td><td>8.9分</td></tr> <tr><td>《陽光燦爛的日子》</td><td>1994年</td><td>8.7分</td></tr></table>表頭與標(biāo)題1．表頭表頭是對(duì)一組數(shù)據(jù)的概括或解釋，表頭信息可以方便用戶理解表格數(shù)據(jù)的含義，提高網(wǎng)頁的可讀性。在HTML5中，使用<th>標(biāo)簽標(biāo)記表頭單元格，具體格式為：<table> <tr> <th>…</th>……<th>…</th> </tr> ……</table>其中，<th>標(biāo)簽必須包含在<tr>標(biāo)簽中，一般位于表格的首行或每行的第一個(gè)單元格。2．標(biāo)題標(biāo)題就是表格的名稱，可以提示整個(gè)表格要表達(dá)的內(nèi)容。在HTML5中，使用<caption>標(biāo)簽標(biāo)記表格標(biāo)題，具體格式為：<table> <caption>…</caption> ……</table>一個(gè)<table>標(biāo)簽中只能添加一個(gè)<caption>標(biāo)簽，一般位于首行【教師】演示【例6-2】操作流程，實(shí)現(xiàn)圖6-3的效果制作電影佳作推薦表，頁面效果如圖6-3所示。圖6-3電影佳作推薦表的頁面效果【教師】講解表格分組表格分組1．按行分組一個(gè)完整的表格按行分組可分為表頭、表體和表尾3部分，它們分別對(duì)應(yīng)<thead>、<tbody>和<tfoot>標(biāo)簽。當(dāng)表格中的數(shù)據(jù)過多以至于在屏幕中無法完整顯示時(shí)，可以將表頭與表尾設(shè)置為始終可見，表體則滾動(dòng)或翻頁顯示。在實(shí)際的網(wǎng)頁制作中，一般將表體放置在表頭與表尾之后?！窘處煛垦菔尽纠?-3】操作流程，實(shí)現(xiàn)圖6-4的效果制作第一季度工資單，頁面效果如圖6-4所示。圖6-4第一季度工資單的頁面效果（1）創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，構(gòu)建第一季度工資單表格的結(jié)構(gòu)。<table> <caption>第一季度工資單</caption> <thead> <tr><th>月份</th><th>金額</th></tr> </thead> <tfoot> <tr><th>總計(jì)</th><td>15200.0元</td></tr> </tfoot> <tbody> <tr><td>1月</td><td>5000.0元</td></tr> <tr><td>2月</td><td>5000.0元</td></tr> <tr><td>3月</td><td>5200.0元</td></tr> </tbody></table>（2）在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，設(shè)置表格中單元格的樣式。th,td{width:100px;text-align:center;}/*設(shè)置所有單元格的寬度與居中對(duì)齊*/2．按列分組當(dāng)需要單獨(dú)設(shè)置表格中某一列或多列的樣式時(shí)，可以將表格按列分組。在HTML5中，使用<col>標(biāo)簽對(duì)列進(jìn)行分組，該標(biāo)簽必須包含在<table>標(biāo)簽中。多個(gè)<col>標(biāo)簽依次對(duì)應(yīng)表格中的列，當(dāng)需要同時(shí)為多個(gè)列設(shè)置樣式時(shí)，可以設(shè)置<col>標(biāo)簽的span屬性，屬性值為對(duì)應(yīng)列的個(gè)數(shù)。【教師】演示【例6-4】操作流程，實(shí)現(xiàn)圖6-5的效果制作高中課程表，頁面效果如圖6-5所示。圖6-5高中課程表的頁面效果【學(xué)生】聆聽、記錄、思考【教師】講解參考代碼【學(xué)生】聆聽、思考通過講解知識(shí)點(diǎn)，讓學(xué)生了解在HTML5插入表格的方法課堂練習(xí)

（14min）【教師】布置課堂練習(xí)新建自己的家庭表格，包括自己的父母、親戚等，表格中有表頭與標(biāo)題，最終的效果跟6-5類似【教師】講解課堂練習(xí)創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，構(gòu)建個(gè)人的家庭表格的結(jié)構(gòu)。在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，設(shè)置兩組單元格與表格內(nèi)文本的樣式。.c1{width:70px;background-color:#d6f580;}.c2{width:80px;background-color:#fff689;}/*分別設(shè)置兩組單元格的寬度與背景顏色*/tr{text-align:center;}/*設(shè)置表格行中的文本居中對(duì)齊*/【學(xué)生】完成課堂練習(xí)【教師】巡視課堂，督促學(xué)生完成課堂練習(xí)【學(xué)生】提出問題，向老師尋求幫助【教師】回答學(xué)生提問【教師】公布課堂練習(xí)答案【學(xué)生】參考答案，修改內(nèi)容利用練習(xí)法，培養(yǎng)出學(xué)生對(duì)HTML5中表格的操作經(jīng)驗(yàn)知識(shí)搶答

（5min）【教師】開展知識(shí)搶答活動(dòng)設(shè)置知識(shí)搶答內(nèi)容（1）表格的基本組成包括哪些（2）表頭與標(biāo)題的區(qū)別在哪里（3）表格可以按照哪些方式分組以小組為單位，統(tǒng)計(jì)小組得分【學(xué)生】參加知識(shí)搶答【教師】公布小組分?jǐn)?shù)，組織小組總結(jié)【學(xué)生】總結(jié)學(xué)習(xí)心得讓學(xué)生參與知識(shí)搶答，形成頭腦風(fēng)暴，鞏固知識(shí)點(diǎn)第二節(jié)課問題導(dǎo)入

（4min）【教師】提出問題，引入新知識(shí)點(diǎn)當(dāng)表格創(chuàng)建之后，我們需要對(duì)表格進(jìn)行設(shè)置，包括表格的內(nèi)外邊框、內(nèi)外邊距以及單元格的屬性，那么應(yīng)該如何對(duì)這些對(duì)象進(jìn)行操作呢，操作流程跟常見的表格操作是否存在不同呢【學(xué)生】聆聽、思考通過問答的方式，對(duì)課程進(jìn)行深入的講解，激發(fā)學(xué)生對(duì)HTML5中表格的探索欲知識(shí)講解

（20min）【教師】講述整體邊框與單元格內(nèi)外邊距整體邊框與單元格內(nèi)外邊距在HTML5中，使用<table>標(biāo)簽的border屬性設(shè)置表格的整體邊框，它與CSS3中的border屬性用法不同，其屬性值為數(shù)值（省略其單位“px”）在<table>標(biāo)簽中，使用cellpadding和cellspacing屬性設(shè)置單元格的內(nèi)外邊距，屬性值為數(shù)值（省略其單位“px”）。單元格內(nèi)邊距是指單元格邊框與內(nèi)容之間的距離，單元格外邊距則是指單元格邊框與整個(gè)表格的邊框或其他單元格之間的距離【教師】演示【例6-5】操作流程，實(shí)現(xiàn)圖6-6的效果制作第二季度工資單，頁面效果如圖6-6所示。默認(rèn)情況下，單元格之間有寬度為1px的外邊距默認(rèn)情況下，單元格之間有寬度為1px的外邊距圖6-6第二季度工資單的頁面效果（1）創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，構(gòu)建第二季度工資單表格的結(jié)構(gòu)，并通過設(shè)置<table>標(biāo)簽的border屬性添加表格的整體邊框。<tableborder="1"> <caption>第二季度工資單</caption> <thead> <tr><th>月份</th><th>金額</th></tr> </thead> <tfoot> <tr><th>總計(jì)</th><td>15700.0元</td></tr> </tfoot> <tbody> <tr><td>4月</td><td>5200.0元</td></tr> <tr><td>5月</td><td>5250.0元</td></tr> <tr><td>6月</td><td>5250.0元</td></tr> </tbody></table>（2）在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，設(shè)置表格中單元格的樣式。th,td{width:100px;text-align:center;}/*設(shè)置所有單元格的寬度與居中對(duì)齊*/（3）在<table>標(biāo)簽中，使用cellpadding和cellspacing屬性設(shè)置單元格的內(nèi)外邊距，屬性值為數(shù)值（省略其單位“px”）。單元格內(nèi)邊距是指單元格邊框與內(nèi)容之間的距離，單元格外邊距則是指單元格邊框與整個(gè)表格的邊框或其他單元格之間的距離。【學(xué)生】聆聽、思考、理解【教師】詢問學(xué)生，是否有不理解的地方【學(xué)生】舉手提問【教師】回答學(xué)生提問【教師】講解表格內(nèi)外邊框表格內(nèi)外邊框在HTML5中，使用<table>標(biāo)簽的rules屬性設(shè)置表格的內(nèi)邊框，其屬性值及說明如表6-1所示。表6-1rules屬性值及其說明屬性值說明none不顯示內(nèi)邊框groups僅顯示按行或按列分組的邊框rows顯示行之間的邊框cols顯示列之間的邊框all顯示行與列之間的邊框在HTML5中，使用<table>標(biāo)簽的frame屬性設(shè)置表格的外邊框，其屬性值及說明如表6-2所示。表6-2frame屬性值及其說明屬性值說明屬性值說明void不顯示外邊框lhs顯示左外邊框above顯示上外邊框rhs顯示右外邊框below顯示下外邊框hsides顯示上、下外邊框box、border顯示所有外邊框vsides顯示左、右外邊框單元格跨行、跨列顯示<th>與<td>都是表示單元格的標(biāo)簽，設(shè)置它們的rowspan與colspan屬性可以使單元格跨行或跨列顯示，這兩個(gè)屬性的屬性值為跨行或跨列的個(gè)數(shù)。【教師】演示【例6-6】操作流程，實(shí)現(xiàn)圖6-8的效果制作第三季度工資單，頁面效果如圖6-8所示。圖6-8表格內(nèi)外邊框的設(shè)置效果（1）創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，構(gòu)建第三季度工資單表格的結(jié)構(gòu)，并通過設(shè)置表格的內(nèi)外邊框制作特殊的邊框線效果。<tablerules="groups"frame="hsides"><!--設(shè)置表格按組顯示內(nèi)邊框，并顯示上、下外邊框--> <caption>第三季度工資單</caption> <thead> <tr><th>月份</th><th>金額</th></tr> </thead> <tfoot> <tr><th>總計(jì)</th><td>15300.0元</td></tr> </tfoot> <tbody> <tr><td>7月</td><td>5100.0元</td></tr> <tr><td>8月</td><td>5200.0元</td></tr> <tr><td>9月</td><td>5000.0元</td></tr> </tbody></table>（2）在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，設(shè)置表格中單元格的樣式。th,td{width:100px;text-align:center;}/*設(shè)置所有單元格的寬度與居中對(duì)齊*/【教師】講解單元格跨行、跨列顯示<th>與<td>都是表示單元格的標(biāo)簽，設(shè)置它們的rowspan與colspan屬性可以使單元格跨行或跨列顯示，這兩個(gè)屬性的屬性值為跨行或跨列的個(gè)數(shù)?！窘處煛垦菔尽纠?-7】操作流程，實(shí)現(xiàn)圖6-9的效果制作完整的高中課程表，頁面效果如圖6-9所示。圖6-9完整高中課程表的頁面效果（1）創(chuàng)建HTML5文檔，在<body>標(biāo)簽中輸入以下代碼，構(gòu)建完整高中課程表表格的結(jié)構(gòu)。<tableframe="box"rules="all"> <caption>高中課程表</caption> <tr><thcolspan="2"> </th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><!--設(shè)置空白單元格橫向占據(jù)兩格--> <tr><throwspan="5">上午</th><th>早自習(xí)</th><td>晨會(huì)</td><td>語文</td><td>英語</td><td>語文</td><td>英語</td></tr><!--設(shè)置“上午”單元格豎向占據(jù)5格-->……（省略部分代碼，具體內(nèi)容如圖6-9所示） <tr><thcolspan="7">午休</th></tr><!--設(shè)置“午休”單元格橫向占據(jù)7格--> <tr><throwspan="4">下午</th><th>第五節(jié)</th><td>體育</td><td>語文</td><td>英語</td><td>地理</td><td>自習(xí)</td></tr><!--設(shè)置“下午”單元格豎向占據(jù)4格-->……（省略部分代碼，具體內(nèi)容如圖6-9所示） <tr><thcolspan="7">晚自習(xí)</th></tr><!--設(shè)置“晚自習(xí)”單元格橫向占據(jù)7格--></table>（2）在<head>標(biāo)簽中添加<style>標(biāo)簽，在其中輸入以下代碼，設(shè)置表格的樣式。th{width:70px;background-color:#d6f580;}td{width:80px;background-color:#fff689;}/*分別設(shè)置表頭與普通單元格的寬度與背景顏色*/tr{text-align:center;}/*設(shè)置表格行中的文本居中對(duì)齊*/【學(xué)生】聆聽、思考、理解通過講解知識(shí)點(diǎn)，加強(qiáng)學(xué)生對(duì)HTML5中表格使用方法的操作流程代碼分析

（12min）【教師】多媒體展示參考代碼講述使用表格制作“網(wǎng)上書店”頁面的“熱銷排行榜”（1）在<divid="main_xs">…</div>標(biāo)簽中的h1標(biāo)題下方添加以下代碼，制作“熱銷排行榜”區(qū)域中表格的一部分。<tableid="xsbd"> <thead> <tr> <th>熱度</th> <th>圖書</th> <th>簡(jiǎn)介</th> <th>分類</th> <th>現(xiàn)價(jià)</th> <th>操作</th> </tr> </thead> <tfoot> <tr> <tdcolspan="6"><ahref="#">完整榜單……</a></td> </tr> </tfoot> <tbody> <tr> <td>2678555<imgsrc="images/bg_hm.png"/></td> <td><aclass="xs_ts"href="book_detail.html">《活著》</a></td> <td>榮獲中國版權(quán)金獎(jiǎng)作品獎(jiǎng)，銷量逾千萬冊(cè)</td> <td>小說</

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論