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

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

2、、同列的寬度一致,第,1,個單元格的內(nèi)容,第,2,個單元格的內(nèi)容,.,第,1,個單元格的內(nèi)容,第,2,個單元格的內(nèi)容,.,.,定義表格,定義行,基本語法,定義列,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、績,語文,98,數(shù)學(xué),95,如何跨列,1,、,colspan,屬性表示跨多少列,2,、該行其他單元格的內(nèi)容就省略不寫了,操作演示,2,：跨列的表格,張三,語文,98,數(shù)學(xué),95,.,代碼同上,.,兩行內(nèi)容,.,如何跨行,1,、,rowspan,屬性表示跨多少行,2,、該列單元格的內(nèi)容就省略不寫了,操作演示,3,：跨行的表格,學(xué)生成績,張三,語文,98,數(shù)學(xué),95,.,代碼同上兩行,.,如何跨行、跨列,cols,pan,跨,3,列,cols,pan,跨,2,行,操作演示,4,：跨行跨列的表格,練習(xí),簡單表格,需求說明,制作頁面,完成時間：,15,分鐘,用,2,行,3,列的表格顯示商品數(shù)據(jù),練習(xí),

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

5、問題集中講解,常見調(diào)試問題及解決辦法,代碼規(guī)范問題,共性問題集中講解,表格布局的應(yī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)上大熱銷,整個是,5,行,2,列的表格,實(shí)際布局時,border=“0”,隱藏邊框,公告欄：跨,2,列,圖片：跨,4,行,操作演示,6,：圖文布局,練習(xí),貴美商品分類頁,需求說明,根據(jù)提供的素材實(shí)現(xiàn),完成時間：,25,分鐘,使用表格實(shí)現(xiàn)圖文布局,如何實(shí)現(xiàn)表單布局,3-1,如何實(shí)現(xiàn)頁面中登錄表單的布局？,問題：結(jié)構(gòu)簡單，但不美觀,如何實(shí)現(xiàn)表單布

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

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