《網(wǎng)頁設(shè)計HTML表格基礎(chǔ)與布局》由會員分享，可在線閱讀，更多相關(guān)《網(wǎng)頁設(shè)計HTML表格基礎(chǔ)與布局（13頁珍藏版）》請在裝配圖網(wǎng)上搜索。
1、,單擊此處編輯母版文本樣式,第二級,第三級,第四級,第五級,*,單擊此處編輯母版標(biāo)題樣式,LOGO,單擊此處編輯母版文本樣式,第二級,第三級,第四級,第五級,單擊此處編輯母版標(biāo)題樣式,表格基礎(chǔ)與布局,本課內(nèi)容,1、表格標(biāo)記基礎(chǔ),2、表格布局及應(yīng)用,3、HTML總結(jié)及編寫注意事項,帶著求知好學(xué)的態(tài)度，超越自己，完善自己。,基本語法,單元格內(nèi)容,表格,表格中的一行,.-,定義表格,-,定義表行,-,定義表頭,-,定義表元,(,表格的具體數(shù)據(jù),),帶著求知好學(xué)的態(tài)度，超越自己，完善自己。,表格的邊框及尺寸,設(shè)置邊框,設(shè)置表格的寬和高,單元格之間間隙,#=value內(nèi)容與單元格邊框距離,帶著求知好學(xué)的
2、態(tài)度，超越自己，完善自己。,表格相關(guān)顏色設(shè)置,表格邊框顏色設(shè)置,背景顏色設(shè)置,背景圖片設(shè)置,亮邊框的顏色,暗邊框的顏色,帶著求知好學(xué)的態(tài)度，超越自己，完善自己。,表格的合并,1、跨多列的單元格 合并列,2、跨多行的單元格 合并行,#為合并的單元格數(shù)量,帶著求知好學(xué)的態(tài)度，超越自己，完善自己。,表格對齊,align,#=left、right,表格相對于網(wǎng)頁的位置,#=left,center,right,內(nèi)容相對于單元格的位置,帶著求知好學(xué)的態(tài)度，超越自己，完善自己。,HTML表格補(bǔ)充,劃分表格結(jié)構(gòu),的三個標(biāo)簽：,（表首）,（表主體）,（表尾）,目的：對表格的各部分的屬性進(jìn)行統(tǒng)一的設(shè)置，而不用單一
3、逐個設(shè)置,注：文字、圖片、多媒體等內(nèi)容只能放或里面,帶著求知好學(xué)的態(tài)度，超越自己，完善自己。,注意事項,1、表格標(biāo)記必須要有、或者（表頭標(biāo)簽）,2、表格內(nèi)容必須寫在(或th)標(biāo)簽之內(nèi),帶著求知好學(xué)的態(tài)度，超越自己，完善自己。,表格布局原則,網(wǎng)頁結(jié)構(gòu)是由一些矩形有機(jī)組成的，所有的內(nèi)容都是放在矩形內(nèi)的。這些矩形我們可以用表格來代替表格布局的最基本原則。,網(wǎng)頁在瀏覽器中寬度是一定的，若無限制的放置文字、圖片、多媒體等內(nèi)容，就不能控制好這些內(nèi)容的位置，可以將內(nèi)容放在表格的單元格里，只要把表格的形狀設(shè)置好了，內(nèi)容也定位好了,表格布局的直觀原因。,表格布局的兩個技術(shù),：,表格嵌套：分清楚表格的兩種功能：結(jié)
4、構(gòu)布局,(安排頁面排版)，內(nèi)容容器(組織和顯示信息)。,口訣能獨立就獨立，能成行就不列,自適應(yīng)：口訣,外像素，內(nèi)百分,帶著求知好學(xué)的態(tài)度，超越自己，完善自己。,HTML小結(jié),標(biāo)簽:,由包含起來的表示一定含義的html單元，分為雙標(biāo)簽、單標(biāo)簽。,標(biāo)簽屬性:,用來表示該標(biāo)簽的具體功能或者某一具體的性質(zhì)，使用的時候必須跟隨它所屬的標(biāo)簽寫在同一對內(nèi)才會有效。,屬性值:,屬性值就是用數(shù)字或其他具有一定含義的名詞來表示標(biāo)簽屬性的,程度。,編寫HTML時注意：,1、謹(jǐn)記塊級元素與行內(nèi)元素,2、代碼的整潔,Html文檔由html標(biāo)簽構(gòu)成，標(biāo)簽含有多種屬性，屬性有屬性值用來表示屬性的程度,帶著求知好學(xué)的態(tài)度，超越自己，完善自己。,本課作業(yè),利用表格布局編寫本課所給的網(wǎng)頁實例,帶著求知好學(xué)的態(tài)度，超越自己，完善自己。,感謝您的關(guān)注！,
網(wǎng)頁設(shè)計HTML表格基礎(chǔ)與布局
