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

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

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

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

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