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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

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

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

知識講解（20min）

代碼分析（12min）

多維評價（5min）

課堂小結（2min）

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

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

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

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

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

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

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

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

（12min）【教師】多媒體展示參考代碼講述使用表格制作“網(wǎng)上書店”頁面的“熱銷排行榜”（1）在<divid="main_xs">…</div>標簽中的h1標題下方添加以下代碼，制作“熱銷排行榜”區(qū)域中表格的一部分。<tableid="xsbd"> <thead> <tr> <th>熱度</th> <th>圖書</th> <th>簡介</th> <th>分類</th> <th>現(xiàn)價</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>榮獲中國版權金獎作品獎，銷量逾千萬冊</td> <td>小說</

溫馨提示

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

評論

0/150

提交評論