HTML第二節(jié)表格4.5(3.23)_第1頁
HTML第二節(jié)表格4.5(3.23)_第2頁
HTML第二節(jié)表格4.5(3.23)_第3頁
HTML第二節(jié)表格4.5(3.23)_第4頁
HTML第二節(jié)表格4.5(3.23)_第5頁
已閱讀5頁,還剩25頁未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、第四章 HTML 基礎(chǔ)語法 第二節(jié)4.5 表格本節(jié)教學(xué)目標(biāo) 1、掌握表格的HTML的基本語法;2、掌握表格及其屬性的標(biāo)記。重點(diǎn):使用HTML標(biāo)記語言熟練設(shè)置表格的標(biāo)記;難點(diǎn):使用HTML標(biāo)記語言熟練設(shè)置表格的標(biāo)記。本節(jié)教學(xué)內(nèi)容4.5.1 4.5.1 表格的表格的HTMLHTML的基本語法的基本語法4.5.2 4.5.2 表格屬性的標(biāo)記表格屬性的標(biāo)記4.5.1 表格的表格的HTML的基本語法的基本語法 表示插入一個(gè)表格表示插入一行表行.表示插入一列,但只能用于題頭部分 定義單元格 范例范例1:插入:插入2行行3列的表格。列的表格。在在.中插入相應(yīng)的內(nèi)容中插入相應(yīng)的內(nèi)容 1 2 3 A B C表示

2、插入了表示插入了1行行3列的表格列的表格表示插入了表示插入了1行行3列的表格列的表格表示插入了表示插入了2行行3列的表格列的表格范例范例1:插入:插入2行行3列的表格。列的表格。 1 2 3 A B C123ABC范例范例1:插入:插入2行行3列的表格。列的表格。 1 2 3 A B C123ABC思考并回答:插入思考并回答:插入3行行3列表格的列表格的HTML代碼?代碼? 1 2 3 AB C ab c123ABCabc width width 表格寬度表格寬度 height height 表格高度表格高度 border border 表格邊框表格邊框 background backgrou

3、nd 表格背景圖片表格背景圖片 bgcolor bgcolor 表格的背景顏色表格的背景顏色 cellspacing cellspacing 表格之間的空白距離表格之間的空白距離 cellpadding cellpadding 表格表格內(nèi)文本和單元格之間表格表格內(nèi)文本和單元格之間的距離的距離 align align 設(shè)置表格的對(duì)齊方式設(shè)置表格的對(duì)齊方式4.5.2 4.5.2 表格屬性的標(biāo)記表格屬性的標(biāo)記 1、 width 表格寬度表格寬度書寫格式:書寫格式: . height 表格高度表格高度書寫格式:書寫格式: .4.5.2 4.5.2 表格屬性的標(biāo)記表格屬性的標(biāo)記 2、 border 表格

4、邊框表格邊框 書寫格式:書寫格式: . border的默認(rèn)值為的默認(rèn)值為04.5.2 4.5.2 表格屬性的標(biāo)記表格屬性的標(biāo)記 3、 background 表格背景圖片表格背景圖片書寫格式:書寫格式: bgcolor 表格的背景顏色表格的背景顏色書寫格式:書寫格式: 4.5.2 4.5.2 表格屬性的標(biāo)記表格屬性的標(biāo)記4、 cellspacing cellspacing 表格之間的空白距離表格之間的空白距離 cellpadding cellpadding 表格內(nèi)文本和單元格之間的表格內(nèi)文本和單元格之間的距離距離你你好好4.5.2 4.5.2 表格屬性的標(biāo)記表格屬性的標(biāo)記5、 align 設(shè)置表

5、格的對(duì)齊方式設(shè)置表格的對(duì)齊方式書寫格式:書寫格式:. align的屬性的屬性 center:橫向劇居中:橫向劇居中 left:橫向劇居左:橫向劇居左 right:橫向劇居右橫向劇居右 4.5.2 4.5.2 表格屬性的標(biāo)記表格屬性的標(biāo)記課上活動(dòng)課上活動(dòng)1 1 練習(xí)使用表格的align=“right/center/left”的標(biāo)記,并觀察其網(wǎng)頁效果圖。6、單元格的屬性標(biāo)記、單元格的屬性標(biāo)記(1)書寫格式:)書寫格式:.表示的是對(duì)這個(gè)表示的是對(duì)這個(gè)單元格單元格的屬性設(shè)置的屬性設(shè)置 align的屬性的屬性 center:橫向居中:橫向居中 left:橫向居左:橫向居左 right:橫向居右橫向居右

6、valign的屬性的屬性 top:縱向居上:縱向居上 middle:縱向居中:縱向居中 bottom:縱向居底:縱向居底4.5.2 4.5.2 表格屬性的標(biāo)記表格屬性的標(biāo)記 思考并分析思考并分析1:下面這個(gè)表格的:下面這個(gè)表格的HTML代碼為代碼為?(邊框大小為(邊框大小為1,表格高度為,表格高度為400像素,寬度為像素,寬度為50像素)像素)A BC A B C4.5.2 4.5.2 表格屬性的標(biāo)記表格屬性的標(biāo)記 思考并分析思考并分析2:下面這個(gè)表格的:下面這個(gè)表格的HTML代碼為代碼為?(邊框大小為(邊框大小為1,表格高度為,表格高度為400像素,寬度為像素,寬度為70像素)像素)A BC

7、 A B C4.5.2 4.5.2 表格屬性的標(biāo)記表格屬性的標(biāo)記6、單元格的屬性標(biāo)記、單元格的屬性標(biāo)記(2)書寫格式:)書寫格式:. background bgcolor 例:例:. 表示這個(gè)表示這個(gè)單元格單元格的背景圖片是的背景圖片是a.jpg例:例: . 表示這個(gè)表示這個(gè)單元單元格的背景顏色是紅色格的背景顏色是紅色4.5.2 4.5.2 表格屬性的標(biāo)記表格屬性的標(biāo)記6、單元格的屬性標(biāo)記、單元格的屬性標(biāo)記(3)書寫格式:)書寫格式:. 注意:注意: X表示的是向右(下)合并的單元格格數(shù)表示的是向右(下)合并的單元格格數(shù)colspan 合并同一行里的單元格合并同一行里的單元格rowspan 合

8、并同一列里的單元格合并同一列里的單元格4.5.2 4.5.2 表格屬性的標(biāo)記表格屬性的標(biāo)記6、單元格的屬性標(biāo)記、單元格的屬性標(biāo)記書寫格式:書寫格式:td =“”思考并分析思考并分析3:下面這個(gè)表格的:下面這個(gè)表格的HTML代碼代碼是?是? 4.5.2 4.5.2 表格屬性的標(biāo)記表格屬性的標(biāo)記6、單元格的屬性標(biāo)記、單元格的屬性標(biāo)記書寫格式:書寫格式:.思考并分析思考并分析4:下面這個(gè)表格的:下面這個(gè)表格的HTML代碼是?代碼是?你北京歡迎 你你 歡迎歡迎 北京北京 4.5.2 4.5.2 表格屬性的標(biāo)記表格屬性的標(biāo)記練習(xí)1234567呼倫貝爾學(xué)院1234567書寫格式:書寫格式:.表示的是對(duì)這表

9、示的是對(duì)這一行一行的屬性設(shè)置的屬性設(shè)置7、 tr的屬性標(biāo)記的屬性標(biāo)記align:center/left/right; valign:middle/top/bottom background bgcolor 4.5.2 4.5.2 表格屬性的標(biāo)記表格屬性的標(biāo)記動(dòng)手操作動(dòng)手操作1: 創(chuàng)建一個(gè)創(chuàng)建一個(gè)3行行3列的表格列的表格要求:創(chuàng)建這樣一個(gè)表格,如下:(表格邊框?qū)挾纫螅簞?chuàng)建這樣一個(gè)表格,如下:(表格邊框?qū)挾?1,寬為,寬為200像素,高為像素,高為50像素像素,表格居中),它的表格居中),它的HTML代碼是什么?代碼是什么?123ABCabC動(dòng)手操作動(dòng)手操作1: 創(chuàng)建一個(gè)創(chuàng)建一個(gè)3行行3列的表格列的表格AAAAAAAA 1 2 3 A B C a b c同學(xué)們對(duì)照自己練習(xí)的結(jié)果,查看網(wǎng)頁效果及對(duì)照代碼同學(xué)們對(duì)照自己練習(xí)的結(jié)果,查看網(wǎng)頁效果及對(duì)照代碼課后活動(dòng)課后活動(dòng)1、熟悉練習(xí)課件中出現(xiàn)

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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ì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論