HTML表格基礎(chǔ).ppt

1、第二章,表格基礎(chǔ),回顧,HTML標(biāo)簽區(qū)分大小寫嗎？ HTML的基本結(jié)構(gòu)并說明各部分的含義。 頁面鏈接有幾種？分別用在什么場合？ 超鏈接的基本格式及其各部分的含義。,預(yù)習(xí)檢查,請敘述表格是由哪兩部分組成？ 創(chuàng)建一個表格必須需要哪些標(biāo)簽？,本章任務(wù),制作“寶貝分類”頁面 制作“公告欄”頁面,會使用表格的基本結(jié)構(gòu)實現(xiàn)簡單表格 會使用表格相關(guān)標(biāo)簽實現(xiàn)跨行、跨列的復(fù)雜表格 會使用表格相關(guān)設(shè)置進(jìn)行美化修飾,本章目標(biāo),為什么使用表格,表格應(yīng)用場合 論壇 門戶網(wǎng)站 購物網(wǎng)站,論壇中應(yīng)用表格,門戶網(wǎng)站應(yīng)用表格,購物網(wǎng)站應(yīng)用表格,表格的基本結(jié)構(gòu),行,列,單元格,在 HTML 文檔中，廣泛使用表格來存放網(wǎng)頁上的文本

2、和圖像,表格的基本語法, 單元格內(nèi)容 ,border用來設(shè)置表格邊框尺寸大小,如何創(chuàng)建表格, 移動 聯(lián)通 鐵通 IBM 惠普 華碩 ,查看源代碼,什么是跨行跨列的表格,跨3列,跨3行,下圖中的表格哪里用了跨行？哪里用了跨列？ 跨了幾行幾列?,跨多列的表格, 學(xué)生成績表 英語 數(shù)學(xué) 語文 95 98 89 ,COLSPAN=“n” 屬性表示跨多少列？,查看源代碼,跨多行的表格, 早上菜譜 食物 雞蛋 飲料 牛奶 甜點 開心粉 ,rowspan =“n” 屬性表示跨多少行？,查看源代碼, 手機(jī)充值、IP卡 辦公設(shè)備、文具 各種卡的總匯 鉛筆 彩筆 打印 刻錄 ,如何創(chuàng)建跨行跨列的表格,查看源代碼,

3、小結(jié)1,編寫如下圖所示效果對應(yīng)的html代碼,第一行第一個格子跨了2行,此格子跨了3列,練習(xí)答案,練習(xí)代碼,什么是表格的美化修飾,根據(jù)理解,下面表格應(yīng)該從哪些方面進(jìn)行美化修飾？,如何設(shè)置表格的尺寸和邊框, 品牌商城 筆記本電腦 辦公設(shè)備、文具、耗材 惠普 華碩 打印機(jī) 刻錄盤 ,width用來設(shè)置表格的寬度 height用來設(shè)置表格的高度,border用來設(shè)置表格邊框尺寸大小,bordercolor用來設(shè)置表格邊框顏色,查看源代碼,如何設(shè)置背景, 筆記本電腦 辦公設(shè)備、文具、耗材 ,background屬性用來設(shè)置表格的背景圖片,bgcolor屬性用來設(shè)置表格、行、列的背景色。“#EBEFFF

4、”是用RGB表示的一種顏色值，RGB指的是紅綠藍(lán) ，下圖就是RGB顏色對照表 。,查看源代碼,如何設(shè)置對其方式, 筆記本電腦 辦公設(shè)備、文具、耗材 惠普 華碩 打印機(jī) 刻錄盤 ,align屬性用來設(shè)置表格、行、列的對齊方式,查看源代碼,為什么要使用填充屬性,單元格里的內(nèi)容太靠近邊線，怎么辦？,未填充的效果，字與單元格邊框之間的距離靠得太近,什么是填充屬性和間距屬性,border(邊框的厚度),cellpadding (單元格填充),cellspacing (單元格間距),如何使用填充、間距屬性,border(邊框的厚度),cellpadding (單元格填充),cellspacing (單元格

5、間距),查看源代碼, ,如何設(shè)置表格的填充屬性, 筆記本電腦 辦公設(shè)備、文具、耗材 . ,cellspacing屬性用來設(shè)置表格內(nèi)框?qū)挾?cellpadding屬性用來設(shè)置表格內(nèi)填充距離,查看源代碼,填充之后的效果,小結(jié)2,表格的高度、寬度、背景圖像、邊框和填充屬性,行的背景色,單元格居中對齊,練習(xí)答案,練習(xí)代碼,編寫如下圖所示效果對應(yīng)的HTML代碼,如何實現(xiàn)圖文內(nèi)容的布局，達(dá)到如左圖所示頁面的效果？ 分析上圖所示頁面，應(yīng)該用什么進(jìn)行布局？,什么是表格布局,使用表格進(jìn)行布局,用表格對網(wǎng)頁的內(nèi)容進(jìn)行整體控制,如何使用表格進(jìn)行布局,使用表格布局下圖，需要幾行幾列？,需要7行2列,如何使用表格進(jìn)行布局, 超值變形金鋼2.5折! 人們?yōu)樯秾﹄娨暫鸾?,查看源代碼,編寫如下圖所示效果對應(yīng)的html代碼,小結(jié)3,跨2行，并放了一副圖片,此單元格放了一副圖片,此單元格跨