HTML制作表格

1、 會(huì)實(shí)現(xiàn)簡(jiǎn)單表格 會(huì)實(shí)現(xiàn)跨行、跨列的復(fù)雜表格 會(huì)對(duì)表格進(jìn)行美化修飾本章目標(biāo)本章目標(biāo)為什么使用表格為什么使用表格 表格應(yīng)用場(chǎng)合 論壇 門(mén)戶(hù)網(wǎng)站 購(gòu)物網(wǎng)站論壇中應(yīng)用論壇中應(yīng)用表格表格門(mén)戶(hù)網(wǎng)站應(yīng)門(mén)戶(hù)網(wǎng)站應(yīng)用表格用表格購(gòu)物網(wǎng)站購(gòu)物網(wǎng)站應(yīng)用表格應(yīng)用表格表格的基本結(jié)構(gòu)表格的基本結(jié)構(gòu)行行列列單元格單元格在在 HTML 文檔中，廣泛使用文檔中，廣泛使用表格表格來(lái)存放網(wǎng)頁(yè)上的文本和圖像來(lái)存放網(wǎng)頁(yè)上的文本和圖像表頭表頭表格的基本語(yǔ)法表格的基本語(yǔ)法 表頭表頭單元格內(nèi)容單元格內(nèi)容 單元格內(nèi)容單元格內(nèi)容 .定定義表格義表格 定義列定義列 定義行定義行 border用來(lái)設(shè)置表用來(lái)設(shè)置表格邊框尺寸大小格邊框尺寸大小 定義列

2、定義列( (表頭表頭) ) 如何創(chuàng)建表格如何創(chuàng)建表格 姓名姓名 性別性別 學(xué)號(hào)學(xué)號(hào) 你的名字你的名字 你的性別你的性別 你的學(xué)號(hào)你的學(xué)號(hào) 王平王平 男男 148081222 設(shè)置表格邊框設(shè)置表格邊框2像素像素第一行第一行第二行第二行第三行第三行什么是跨行跨列的表格什么是跨行跨列的表格跨跨3列列跨跨3行行下圖中的表格哪里用了跨行？哪里用了跨列？下圖中的表格哪里用了跨行？哪里用了跨列？跨了幾行幾列跨了幾行幾列? ?跨多列的表格跨多列的表格 學(xué)生成績(jī)表學(xué)生成績(jī)表 英語(yǔ)英語(yǔ) 數(shù)學(xué)數(shù)學(xué) 語(yǔ)文語(yǔ)文 95 98 89 COLSPAN=“n” 屬性表示跨多少列？屬性表示跨多少列？跨多行的表格跨多行的表格 早上

3、菜譜早上菜譜 食物食物 雞蛋雞蛋 飲料飲料 牛奶牛奶 甜點(diǎn)甜點(diǎn) 開(kāi)心粉開(kāi)心粉 rowspan =“n” 屬性表示跨多少行？屬性表示跨多少行？ 手機(jī)充值、手機(jī)充值、IP卡卡 辦公設(shè)備、文具辦公設(shè)備、文具 各種卡的總匯各種卡的總匯 鉛筆鉛筆 彩筆彩筆 打印打印 刻錄刻錄 如何創(chuàng)建跨行跨列的表格如何創(chuàng)建跨行跨列的表格小結(jié)小結(jié)1 1編寫(xiě)如下圖所示效果對(duì)應(yīng)的html代碼源代碼源代碼此格子跨了此格子跨了3列列第一行第一個(gè)第一行第一個(gè)格子跨了格子跨了2行行什么是表格的美化修飾什么是表格的美化修飾文字對(duì)文字對(duì)齊方式齊方式根據(jù)理解根據(jù)理解,下面表格應(yīng)該從哪些方面進(jìn)行美化修飾？下面表格應(yīng)該從哪些方面進(jìn)行美化修飾？

4、表格的高度表格的高度表格的寬度表格的寬度背景色背景色源代碼源代碼邊框?qū)挾冗吙驅(qū)挾热绾卧O(shè)置表格的尺寸和邊框如何設(shè)置表格的尺寸和邊框 品牌商城品牌商城 筆記本電腦筆記本電腦 辦公設(shè)備、文具、耗材辦公設(shè)備、文具、耗材 惠普惠普 華碩華碩 打印機(jī)打印機(jī) 刻錄盤(pán)刻錄盤(pán) width用來(lái)設(shè)置表格的寬度用來(lái)設(shè)置表格的寬度height用來(lái)設(shè)置表格的高度用來(lái)設(shè)置表格的高度border用來(lái)設(shè)置表用來(lái)設(shè)置表格邊框尺寸大小格邊框尺寸大小bordercolor用來(lái)設(shè)用來(lái)設(shè)置表格邊框顏色置表格邊框顏色源代碼源代碼如何設(shè)置背景如何設(shè)置背景   筆記本電腦筆記本電腦 辦公設(shè)備、文具、耗材辦公設(shè)備、文具、耗材

5、惠普惠普 華碩華碩 打印機(jī)打印機(jī) 刻錄盤(pán)刻錄盤(pán)background屬性用來(lái)設(shè)置表格的背景圖片屬性用來(lái)設(shè)置表格的背景圖片bgcolor屬性用來(lái)設(shè)置表格、行、列屬性用來(lái)設(shè)置表格、行、列的背景色。的背景色?！?EBEFFF”是用是用RGB表示的一種顏色值，表示的一種顏色值，RGB指的是紅指的是紅綠藍(lán)綠藍(lán) 。源代碼源代碼如何設(shè)置對(duì)其方式如何設(shè)置對(duì)其方式   筆記本電腦筆記本電腦 辦公設(shè)備、文具、耗材辦公設(shè)備、文具、耗材 惠普惠普 華碩華碩 打印機(jī)打印機(jī) 刻錄盤(pán)刻錄盤(pán) align屬性用來(lái)設(shè)置表格、行、列屬性用來(lái)設(shè)置表格、行、列的對(duì)齊方式：的對(duì)齊方式：left(左左)、right(右右)

6、、center(居中居中)連續(xù)的空格連續(xù)的空格為什么要使用填充屬性為什么要使用填充屬性單元格里的內(nèi)容太靠近邊線，怎么辦？未填充的效果，字與單元格邊未填充的效果，字與單元格邊框之間的距離靠得太近框之間的距離靠得太近什么是填充屬性和間距屬性什么是填充屬性和間距屬性border(邊框的厚度邊框的厚度) 內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容cellpadding(單元格填充單元格填充)cellspacing(單元格間距單元格間距)如何使用填充、間距屬性如何使用填充、間距屬性border(邊框的厚度邊框的厚度) cellpadding(單元格填充單元格填充)cellspacing(單元格間距單元格間距)源代

7、碼源代碼如何設(shè)置表格的填充屬性如何設(shè)置表格的填充屬性 品牌商城品牌商城 筆記本電腦筆記本電腦 辦公設(shè)備、文具、耗材辦公設(shè)備、文具、耗材 惠普惠普 華碩華碩 打印機(jī)打印機(jī) 刻錄盤(pán)刻錄盤(pán) cellspacing屬性用來(lái)屬性用來(lái)設(shè)置表格內(nèi)框?qū)挾仍O(shè)置表格內(nèi)框?qū)挾?cellpadding屬性用來(lái)屬性用來(lái)設(shè)置表格內(nèi)填充距離設(shè)置表格內(nèi)填充距離源代碼源代碼填充之后填充之后的效果的效果小結(jié)小結(jié)2 2編寫(xiě)如下圖所示效果對(duì)應(yīng)的HTML代碼單元格居單元格居中對(duì)齊中對(duì)齊具體要求：具體要求：width=400“height=200 border=20 cellpadding=10 cellspacing=10 bordercolor=#22FF11”第一行第一行bgcolor=#EBEFFF”最后以你的學(xué)號(hào)為文件名保存在桌面上，復(fù)制給老師，作為評(píng)分依據(jù)。如何實(shí)現(xiàn)圖文內(nèi)容的布局，達(dá)到如左圖所示頁(yè)面的效果？分析上圖所示頁(yè)面，應(yīng)該用什么進(jìn)行布局？ 什么是表格布局什么是表格布局使用使用表格表格進(jìn)行布局進(jìn)行布局用表格對(duì)網(wǎng)頁(yè)的內(nèi)用