




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
1、HTML 表格制作表格制作制作人:繆衛(wèi)平制作人:繆衛(wèi)平 會(huì)實(shí)現(xiàn)簡(jiǎn)單表格 會(huì)實(shí)現(xiàn)跨行、跨列的復(fù)雜表格 會(huì)對(duì)表格進(jìn)行美化修飾本章目標(biāo)為什么使用表格 表格應(yīng)用場(chǎng)合 論壇 門戶網(wǎng)站 購(gòu)物網(wǎng)站論壇中應(yīng)用論壇中應(yīng)用表格表格門戶網(wǎng)站應(yīng)門戶網(wǎng)站應(yīng)用表格用表格購(gòu)物網(wǎng)站購(gòu)物網(wǎng)站應(yīng)用表格應(yīng)用表格表格的基本結(jié)構(gòu)行行列列單元格單元格在在 HTML 文檔中,廣泛使用文檔中,廣泛使用表格表格來(lái)存放網(wǎng)頁(yè)上的文本和圖像來(lái)存放網(wǎng)頁(yè)上的文本和圖像表頭表頭表格的基本語(yǔ)法 表頭表頭單元格內(nèi)容單元格內(nèi)容 單元格內(nèi)容單元格內(nèi)容 .定定義表格義表格 定義列定義列 定義行定義行 border用來(lái)設(shè)置表用來(lái)設(shè)置表格邊框尺寸大小格邊框尺寸大小 定
2、義列定義列( (表頭表頭) ) 如何創(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” 屬性表示跨多少列?屬性表示跨多少列?跨多行的表格 早上菜譜早上菜譜 食物食物 雞蛋雞蛋 飲料飲料 牛奶牛奶 甜點(diǎn)甜點(diǎn) 開心粉
3、開心粉 rowspan =“n” 屬性表示跨多少行?屬性表示跨多少行? 手機(jī)充值、手機(jī)充值、IP卡卡 辦公設(shè)備、文具辦公設(shè)備、文具 各種卡的總匯各種卡的總匯 鉛筆鉛筆 彩筆彩筆 打印打印 刻錄刻錄 如何創(chuàng)建跨行跨列的表格小結(jié)1 1編寫如下圖所示效果對(duì)應(yīng)的html代碼源代碼源代碼此格子跨了此格子跨了3列列第一行第一個(gè)第一行第一個(gè)格子跨了格子跨了2行行什么是表格的美化修飾文字對(duì)文字對(duì)齊方式齊方式根據(jù)理解根據(jù)理解,下面表格應(yīng)該從哪些方面進(jìn)行美化修飾?下面表格應(yīng)該從哪些方面進(jìn)行美化修飾?表格的高度表格的高度表格的寬度表格的寬度背景色背景色源代碼源代碼邊框?qū)挾冗吙驅(qū)挾热绾卧O(shè)置表格的尺寸和邊框 品牌商城品
4、牌商城 筆記本電腦筆記本電腦 辦公設(shè)備、文具、耗材辦公設(shè)備、文具、耗材 惠普惠普 華碩華碩 打印機(jī)打印機(jī) 刻錄盤刻錄盤 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è)備、文具、耗材 惠普惠普 華碩華碩 打印機(jī)打印機(jī) 刻錄盤刻錄盤background屬性用來(lái)設(shè)置表格的背景圖片屬性用來(lái)設(shè)置表格的背景圖片bgcolor屬性用來(lái)設(shè)置表格、行、列屬性
5、用來(lái)設(shè)置表格、行、列的背景色。的背景色?!?EBEFFF”是用是用RGB表示的一種顏色值,表示的一種顏色值,RGB指的是紅指的是紅綠藍(lán)綠藍(lán) 。源代碼源代碼如何設(shè)置對(duì)其方式 筆記本電腦筆記本電腦 辦公設(shè)備、文具、耗材辦公設(shè)備、文具、耗材 惠普惠普 華碩華碩 打印機(jī)打印機(jī) 刻錄盤刻錄盤 align屬性用來(lái)設(shè)置表格、行、列屬性用來(lái)設(shè)置表格、行、列的對(duì)齊方式:的對(duì)齊方式:left(左左)、right(右右)、center(居中居中)連續(xù)的空格連續(xù)的空格為什么要使用填充屬性單元格里的內(nèi)容太靠近邊線,怎么辦?未填充的效果,字與單元格邊未填充的效果,字與單元格邊框之間的距離靠得太近框之間的距離
6、靠得太近什么是填充屬性和間距屬性border(邊框的厚度邊框的厚度) 內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容cellpadding(單元格填充單元格填充)cellspacing(單元格間距單元格間距)如何使用填充、間距屬性border(邊框的厚度邊框的厚度) cellpadding(單元格填充單元格填充)cellspacing(單元格間距單元格間距)源代碼源代碼如何設(shè)置表格的填充屬性 品牌商城品牌商城 筆記本電腦筆記本電腦 辦公設(shè)備、文具、耗材辦公設(shè)備、文具、耗材 惠普惠普 華碩華碩 打印機(jī)打印機(jī) 刻錄盤刻錄盤 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é)2 2編寫如下圖所示效果對(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)行
溫馨提示
- 1. 本站所有資源如無(wú)特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 門面物業(yè)管理合同
- 工業(yè)用智能管理系統(tǒng)軟件開發(fā)協(xié)議
- 通訊工程設(shè)備調(diào)試及技術(shù)指導(dǎo)合同
- 智能智能智能建筑設(shè)備開發(fā)合同
- 電子商務(wù)平臺(tái)的入駐合作協(xié)議
- 公共圖書館圖書借閱服務(wù)協(xié)議
- 2025年滾刀合作協(xié)議書
- 2025年非接觸式物位儀表合作協(xié)議書
- 2025年動(dòng)態(tài)血壓監(jiān)測(cè)系統(tǒng)合作協(xié)議書
- 2025年煤制天然氣合作協(xié)議書
- 2025年 中國(guó)南水北調(diào)集團(tuán)新能源投資公司第一批中層及考試筆試試卷附答案
- 敘事護(hù)理學(xué)智慧樹知到答案2024年中國(guó)人民解放軍海軍軍醫(yī)大學(xué)
- 火龍罐綜合灸技術(shù)課件
- 大海(張雨生)原版五線譜鋼琴譜正譜樂譜
- 有限空間作業(yè)實(shí)操評(píng)分標(biāo)準(zhǔn)
- 規(guī)劃展覽館方案-南京軍區(qū)軍史館布展總體方案
- (完整版)煤礦主扇司機(jī)考試卷(含答案)
- 雙柏縣工業(yè)用大麻開發(fā)種植實(shí)施計(jì)劃方案
- 租賃房屋交接清單
- 吊頂檢驗(yàn)報(bào)告(共5頁(yè))
- (完整版)10KV電力線路施工組織設(shè)計(jì)方案
評(píng)論
0/150
提交評(píng)論