HTML制作表格

1、HTML 表格制作表格制作制作人：繆衛(wèi)平制作人：繆衛(wèi)平 會實現(xiàn)簡單表格 會實現(xiàn)跨行、跨列的復雜表格 會對表格進行美化修飾本章目標為什么使用表格 表格應用場合 論壇 門戶網站 購物網站論壇中應用論壇中應用表格表格門戶網站應門戶網站應用表格用表格購物網站購物網站應用表格應用表格表格的基本結構行行列列單元格單元格在在 HTML 文檔中，廣泛使用文檔中，廣泛使用表格表格來存放網頁上的文本和圖像來存放網頁上的文本和圖像表頭表頭表格的基本語法 表頭表頭單元格內容單元格內容 單元格內容單元格內容 .定定義表格義表格 定義列定義列 定義行定義行 border用來設置表用來設置表格邊框尺寸大小格邊框尺寸大小 定

2、義列定義列( (表頭表頭) ) 如何創(chuàng)建表格 姓名姓名 性別性別 學號學號 你的名字你的名字 你的性別你的性別 你的學號你的學號 王平王平 男男 148081222 設置表格邊框設置表格邊框2像素像素第一行第二行第三行什么是跨行跨列的表格跨跨3列列跨跨3行行下圖中的表格哪里用了跨行？哪里用了跨列？下圖中的表格哪里用了跨行？哪里用了跨列？跨了幾行幾列跨了幾行幾列? ?跨多列的表格 學生成績表學生成績表 英語英語 數(shù)學數(shù)學 語文語文 95 98 89 COLSPAN=“n” 屬性表示跨多少列？屬性表示跨多少列？跨多行的表格 早上菜譜早上菜譜 食物食物 雞蛋雞蛋 飲料飲料 牛奶牛奶 甜點甜點 開心粉

3、開心粉 rowspan =“n” 屬性表示跨多少行？屬性表示跨多少行？ 手機充值、手機充值、IP卡卡 辦公設備、文具辦公設備、文具 各種卡的總匯各種卡的總匯 鉛筆鉛筆 彩筆彩筆 打印打印 刻錄刻錄 如何創(chuàng)建跨行跨列的表格小結1 1編寫如下圖所示效果對應的html代碼源代碼源代碼此格子跨了此格子跨了3列列第一行第一個第一行第一個格子跨了格子跨了2行行什么是表格的美化修飾文字對文字對齊方式齊方式根據(jù)理解根據(jù)理解,下面表格應該從哪些方面進行美化修飾？下面表格應該從哪些方面進行美化修飾？表格的高度表格的高度表格的寬度表格的寬度背景色背景色源代碼源代碼邊框寬度邊框寬度如何設置表格的尺寸和邊框 品牌商城品

4、牌商城 筆記本電腦筆記本電腦 辦公設備、文具、耗材辦公設備、文具、耗材 惠普惠普 華碩華碩 打印機打印機 刻錄盤刻錄盤 width用來設置表格的寬度用來設置表格的寬度height用來設置表格的高度用來設置表格的高度border用來設置表用來設置表格邊框尺寸大小格邊框尺寸大小bordercolor用來設用來設置表格邊框顏色置表格邊框顏色源代碼源代碼如何設置背景   筆記本電腦筆記本電腦 辦公設備、文具、耗材辦公設備、文具、耗材 惠普惠普 華碩華碩 打印機打印機 刻錄盤刻錄盤background屬性用來設置表格的背景圖片屬性用來設置表格的背景圖片bgcolor屬性用來設置表格、行、列屬性

5、用來設置表格、行、列的背景色。的背景色?！?EBEFFF”是用是用RGB表示的一種顏色值，表示的一種顏色值，RGB指的是紅指的是紅綠藍綠藍 。源代碼源代碼如何設置對其方式   筆記本電腦筆記本電腦 辦公設備、文具、耗材辦公設備、文具、耗材 惠普惠普 華碩華碩 打印機打印機 刻錄盤刻錄盤 align屬性用來設置表格、行、列屬性用來設置表格、行、列的對齊方式：的對齊方式：left(左左)、right(右右)、center(居中居中)連續(xù)的空格連續(xù)的空格為什么要使用填充屬性單元格里的內容太靠近邊線，怎么辦？未填充的效果，字與單元格邊未填充的效果，字與單元格邊框之間的距離靠得太近框之間的距離

6、靠得太近什么是填充屬性和間距屬性border(邊框的厚度邊框的厚度) 內容內容內容內容內容內容內容內容cellpadding(單元格填充單元格填充)cellspacing(單元格間距單元格間距)如何使用填充、間距屬性border(邊框的厚度邊框的厚度) cellpadding(單元格填充單元格填充)cellspacing(單元格間距單元格間距)源代碼源代碼如何設置表格的填充屬性 品牌商城品牌商城 筆記本電腦筆記本電腦 辦公設備、文具、耗材辦公設備、文具、耗材 惠普惠普 華碩華碩 打印機打印機 刻錄盤刻錄盤 cellspacing屬性用來屬性用來設置表格內框寬度設置表格內框寬度 cellpadding屬性用來屬性用來設置表格內填充距離設置表格內填充距離源代碼源代碼填充之后填充之后的效果的效果小結2 2編寫如下圖所示效果對應的HTML代碼單元格居單元格居中對齊中對齊具體要求：具體要求：width=400“height=200 border=20 cellpadding=10 cellspacing=10 bordercolor=#22FF11”第一行第一行bgcolor=#EBEFFF”最后以你的學號為文件名保存在桌面上，復制給老師，作為評分依據(jù)。如何實現(xiàn)圖文內容的布局，達到如左圖所示頁面的效果？分析上圖所示頁面，應該用什么進行