《表格應(yīng)用和布局綜述》由會(huì)員分享，可在線閱讀，更多相關(guān)《表格應(yīng)用和布局綜述（34頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、單擊此處編輯母版標(biāo)題樣式,單擊此處編輯母版文本樣式,第二級(jí),單擊此處編輯母版標(biāo)題樣式,單擊此處編輯母版文本樣式,第二級(jí),第三章,表格應(yīng)用和布局,回顧與作業(yè)點(diǎn)評(píng),超鏈接的基本語(yǔ)法？,表單的基本語(yǔ)法？,表單元素包括哪些？語(yǔ)法分別是什么？,預(yù)習(xí)檢查,表格的用途？,表格一般包含哪幾部分？,table,、,tr,、,td,的含義？,本章任務(wù),制作表格圖文布局,-,公告欄頁(yè)面,制作表格布局表單頁(yè)面,-,登錄頁(yè)面,本章目標(biāo),使用表格顯示數(shù)據(jù),使用表格實(shí)現(xiàn)頁(yè)面布局,表格應(yīng)用場(chǎng)合,論壇中應(yīng)用表格,購(gòu)物網(wǎng)站應(yīng)用表格,為什么使用表格,門戶網(wǎng)站應(yīng)用表格,行,列,單元格,表格的基本結(jié)構(gòu),特點(diǎn)：通常情況下，同行的高度一致

2、、同列的寬度一致,第,1,個(gè)單元格的內(nèi)容,第,2,個(gè)單元格的內(nèi)容,.,第,1,個(gè)單元格的內(nèi)容,第,2,個(gè)單元格的內(nèi)容,.,.,定義表格,定義行,基本語(yǔ)法,定義列,1,行,1,列的單元格,1,行,2,列的單元格,1,行,3,列的單元格,2,行,1,列的單元格,2,行,2,列的單元格,2,行,3,列的單元格,如何創(chuàng)建表格,代表表格的開始，,border=2,表示邊框?qū)挾葹?2,表格的第,1,行，有,3,條數(shù)據(jù)，,代表行,表格的第,2,行，有,3,條數(shù)據(jù)，,代表行,操作演示,1,：表格的基本結(jié)構(gòu),表格的跨行跨列,下圖中的表格哪里用了跨行？哪里用了跨列？跨了幾行幾列,?,跨,3,列,跨,3,行,學(xué)生成

3、績(jī),語(yǔ)文,98,數(shù)學(xué),95,如何跨列,1,、,colspan,屬性表示跨多少列,2,、該行其他單元格的內(nèi)容就省略不寫了,操作演示,2,：跨列的表格,張三,語(yǔ)文,98,數(shù)學(xué),95,.,代碼同上,.,兩行內(nèi)容,.,如何跨行,1,、,rowspan,屬性表示跨多少行,2,、該列單元格的內(nèi)容就省略不寫了,操作演示,3,：跨行的表格,學(xué)生成績(jī),張三,語(yǔ)文,98,數(shù)學(xué),95,.,代碼同上兩行,.,如何跨行、跨列,cols,pan,跨,3,列,cols,pan,跨,2,行,操作演示,4,：跨行跨列的表格,練習(xí),簡(jiǎn)單表格,需求說(shuō)明,制作頁(yè)面,完成時(shí)間：,15,分鐘,用,2,行,3,列的表格顯示商品數(shù)據(jù),練習(xí),

4、跨行跨列表格,需求說(shuō)明,完成時(shí)間：,20,分鐘,實(shí)現(xiàn)一個(gè)跨行跨列的商品類目表格,h2,標(biāo)題,表格高級(jí)標(biāo)簽,2-1,如何實(shí)現(xiàn)年終數(shù)據(jù)報(bào)表？,表格標(biāo)題,數(shù)據(jù)主體,頁(yè)眉,頁(yè)腳,thfoot,表頭,表格數(shù)據(jù)的分組標(biāo)簽,、,、,配合使用，對(duì)報(bào)表數(shù)據(jù)進(jìn)行邏輯分組,表格高級(jí)標(biāo)簽,2-2,年終數(shù)據(jù)報(bào)表,月份,收入（,RMB,）,1,月,100 ,2,月,80 ,平均月收入,196.67,總計(jì),1180 ,標(biāo)簽對(duì)應(yīng)報(bào)表的頁(yè)眉,對(duì)應(yīng)報(bào)表的數(shù)據(jù)主體,對(duì)應(yīng)報(bào)表的頁(yè)腳,操作演示,5,：,thead,標(biāo)簽,練習(xí),表格分組標(biāo)簽的使用,需求說(shuō)明,實(shí)現(xiàn)一個(gè)按地點(diǎn)和時(shí)間匯總的年終報(bào)表,完成時(shí)間：,20,分鐘,數(shù)據(jù)分組的表格,共性

5、問(wèn)題集中講解,常見調(diào)試問(wèn)題及解決辦法,代碼規(guī)范問(wèn)題,共性問(wèn)題集中講解,表格布局的應(yīng)用場(chǎng)合,表格布局,圖文布局，數(shù)據(jù)規(guī)則整齊,表單布局，同樣要求數(shù)據(jù)規(guī)則整齊,如何實(shí)現(xiàn)圖文布局,2-1,實(shí)現(xiàn)步驟,如何實(shí)現(xiàn)圖文布局,2-2,實(shí)現(xiàn)步驟,大學(xué)要求老師開網(wǎng)店,安全錘網(wǎng)上大熱銷,整個(gè)是,5,行,2,列的表格,實(shí)際布局時(shí),border=“0”,隱藏邊框,公告欄：跨,2,列,圖片：跨,4,行,操作演示,6,：圖文布局,練習(xí),貴美商品分類頁(yè),需求說(shuō)明,根據(jù)提供的素材實(shí)現(xiàn),完成時(shí)間：,25,分鐘,使用表格實(shí)現(xiàn)圖文布局,如何實(shí)現(xiàn)表單布局,3-1,如何實(shí)現(xiàn)頁(yè)面中登錄表單的布局？,問(wèn)題：結(jié)構(gòu)簡(jiǎn)單，但不美觀,如何實(shí)現(xiàn)表單布

6、局,3-2,實(shí)際頁(yè)面中的登錄表單布局,實(shí)際應(yīng)用，需要幾行幾列的表格布局？,如何實(shí)現(xiàn)表單布局,3-3,會(huì)員名,:,input name=“sname”,（可包含,.,）,代碼同“會(huì)員名”,整體布局：,4,行,3,列的表格,圖片后的內(nèi)容跨,2,列，內(nèi)容用“空格”填充,圖片按鈕跨,2,列,操作演示,7,：貴美登錄表單,小結(jié),2-1,使用表格進(jìn)行布局對(duì)顯示數(shù)據(jù)有什么要求？實(shí)現(xiàn)思路是什么？,使用場(chǎng)合：數(shù)據(jù)顯示要求較為規(guī)整，符合表格布局的特點(diǎn),布局的實(shí)現(xiàn)思路：,需要幾行幾列的表格？,哪些單元格有跨行或跨列？,編寫表格代碼實(shí)現(xiàn),小結(jié),2-2,注意：,1,、同列單元格寬度由該列寬度最大的單元格決定,2,、同行

7、單元格寬度由該行高度最高的單元格決定,同列單元格寬度由該列寬度最大的單元格決定，要防止內(nèi)容過(guò)長(zhǎng)撐開單元格,同行單元格同理，注意換行帶來(lái)的高度影響,嵌套布局,2-1,如何用表格實(shí)現(xiàn)下圖布局？,對(duì)于復(fù)雜的頁(yè)面，如使用表格則必須采用多層嵌套,嵌套布局,2-2,嵌套表格布局的缺點(diǎn)：,代碼量大,層次結(jié)構(gòu)也相對(duì)復(fù)雜,不利于,Goole,等搜索引擎搜索查找數(shù)據(jù),表格布局僅適用于：,規(guī)則的數(shù)據(jù)顯示,表單頁(yè)面,表格布局不適合不規(guī)則的復(fù)雜頁(yè)面，這種場(chǎng)合需使用,DIV+CSS,布局（后續(xù)學(xué)習(xí)）,操作演示,8,：嵌套布局,練習(xí),制作貴美注冊(cè)頁(yè),需求說(shuō)明,制作貴美注冊(cè)頁(yè)面,完成時(shí)間：,25,分鐘,1,、先考慮使用幾行幾列的表格,2,、單元格的跨行或跨列情況,共性問(wèn)題集中講解,常見調(diào)試問(wèn)題及解決辦法,代碼規(guī)范問(wèn)題,共性問(wèn)題集中講解,總結(jié),2-1,表格的基本語(yǔ)法是什么？,表格的跨行、跨列屬性分別是什么？,介紹表格布局的使用場(chǎng)合,簡(jiǎn)述表格布局的實(shí)現(xiàn)思路,總結(jié),2-2,前,3,章知識(shí)梳理：,HTML,的基本結(jié)構(gòu)？,W3C,的基本規(guī)范？如何創(chuàng)建符合標(biāo)準(zhǔn)的,HTML,文檔？,常用的,HTML,塊級(jí)標(biāo)簽有哪些？語(yǔ)法分別是什么？,常用的,HTML,行級(jí)標(biāo)簽有哪些？語(yǔ)法分別是什么？,表單的語(yǔ)法及執(zhí)行原理？各類表單元素的語(yǔ)法？,4,種布局常用的塊結(jié)構(gòu)是什么？,