【正文】 width height colspan rowspan bgcolor bordercolor align …… 單元格屬性 td table/table tr/tr td/td 注意：距離目標(biāo)元素最近的標(biāo)簽屬性起作用 第 36頁 作業(yè) 312 編寫 如下圖所示效果對(duì)應(yīng)的 html代碼 任務(wù)一 表格的設(shè)計(jì) 第 37頁 任務(wù)一 表格的設(shè)計(jì) %LANGUAGE=VBSCRIPT CODEPAGE=65001% html head meta equiv=ContentType content=text/html。 charset=gb2312 / title垂直跨度 /title /head body table width=500 border=1 align=center cellpadding=5 cellspacing=1 tr td商品名稱： /td td彩晶石銀手鏈 /td /tr tr td規(guī)格： /td td材質(zhì)： 925純銀 天然紫晶 黃晶 橄欖石 /td /tr tr td單位： /td td每條 /td /tr tr td rowspan=2類別： /td td925銀飾 /td /tr tr td銀鏈?zhǔn)骤C /td /tr /table /body /html 第 31頁 任務(wù)一 表格的設(shè)計(jì) ● 表格的結(jié)構(gòu) 表首 標(biāo)記 thead、表主體標(biāo)記 tbody以及表尾標(biāo)記 tfoot ，使用這些標(biāo)記能對(duì)表格的一行或多行單元格屬性進(jìn)行統(tǒng)一修改，從而省去了逐一修改單元格屬性的麻煩。該值的效果常常與 bottom 值相同。 – valign屬性：指定表格或某一個(gè)單元格里的內(nèi)容（文本、圖片等） 的垂直對(duì)齊 方式 。通過 bordercolorlight可以 設(shè)置 單元格亮邊框 的顏色。單位可以是 %或者象素。其屬性值為一個(gè) URL地址 。 charset=utf8 / title表格的邊框顏色 /title /head body table width=200 border=5 bordercolor=66CCFF tr td單元格 1/td td單元格 2/td /tr tr td單元格 3/td td單元格 4/td /tr /table /body /html 第 18頁 任務(wù)一 表格的設(shè)計(jì) – 內(nèi)框?qū)挾?cellspacing （間距） ? 用于設(shè)置表格內(nèi)部每個(gè)單元格之間的間距，單位是像素； ? 語法： – table cellspacing=“內(nèi)框?qū)挾戎?” – 表格內(nèi)文字與邊框間距 cellpadding （填充） ? 在默認(rèn)情況下，單元里的內(nèi)容會(huì)緊貼著表格的邊框，這樣看上去非常擁擠。 charset=utf8 / title表格的基本屬性 /title /head body table width=500 height=130 border=1 align=center caption考試成績(jī)表 /caption th姓名 /th th語文 /th th數(shù)學(xué) /th th副科 /th tr td張三 /td td95/td td76/td td80/td /tr tr td李四 /td td88/td td90/td td85/td /tr tr td三毛 /td td80/td td89/td td90/td /tr /table /body /html 第 16頁 任務(wù)一 表格的設(shè)計(jì) – border屬性：表格邊線粗細(xì)，可以使用 border設(shè)置表格的邊框效果，包括邊框的寬度、變寬的顏色等 。 – height屬性：指定表格或某一個(gè)表格單元格的高度。在一般情況下，瀏覽器會(huì)以粗體和居中的樣式顯示 th 元素中的內(nèi)容。缺少任何一個(gè)元素，都無法定義出一個(gè) 表格。 ? tr元素：定義表格的 行 – 一 個(gè)表格可以有多行，所以 tr /tr對(duì)于 一個(gè)表格來說不是唯一的。 第 5頁 任務(wù)一 表格的設(shè)計(jì) ● 任務(wù)實(shí)施 – 案例 1 表格的設(shè)計(jì) ——主頁面 設(shè)計(jì) ? 新建頁面 ? 查看表格屬性面板進(jìn)行表格屬性設(shè)置 ? 插入或刪除行和列 ? 單元格的拆分和合并 第 6頁 任務(wù)一 表格的設(shè)計(jì) 圖片寬： 204，高： 231 圖片寬： 204，高： 263 圖片寬： 486，高： 263 圖片寬： 204，高： 263 將單元格拆分為 1列 7行 插入內(nèi)嵌表格， 1行 7列 第 7頁 任務(wù)一 表格的設(shè)計(jì) ● 表格基本概念 表格是網(wǎng)頁制作中使用最多的工具之一，它不僅可以將相關(guān)數(shù)據(jù)有序的排列起來，還可以精確地定位文字、圖像等網(wǎng)頁元素在頁面中的位置，使得頁面在形式上豐富多彩又條理清楚，在組織上井然有序又不顯單調(diào)。 表格由行、列和單元格 3部分組成，一般通過表格標(biāo)記 table、行標(biāo)記 tr、單元格標(biāo)記 td來創(chuàng)建。 ? td元素：定義表格的一個(gè)單元格 。 第 10頁 任務(wù)一 表格的設(shè)計(jì) %LANGUAGE=VBSCRIPT CODEPAGE=65001% html head meta equiv=ContentType content=text/html。 ? 語法： th ……./ th 第 13頁 任務(wù)一 表格的設(shè)計(jì) html head meta equiv=ContentType content=text/html。單位可以是 %或者象素。 ? 語法： table border=“邊框?qū)挾?” – border屬性設(shè)置的表格邊框職能影響表格四周的邊框?qū)挾?，而不能影響單元格之間的邊框尺寸?？梢允褂?cellpadding來設(shè)置單元格邊框與單元格里的內(nèi)容之間的距離； ? 語法： – table cellpadding=“文字與邊框距離值 ” 第 19頁 任務(wù)一 表格的設(shè)計(jì) %LANGUAGE=VBSCRIPT CODEPAGE=65001% html head meta equiv=ContentType content=text/html。 第 22頁 任務(wù)一 表格的設(shè)計(jì) ● 單元格屬性 – width屬性：指定表格或某一個(gè)表格單元格的寬度。 – bordercolordark屬性 ：?jiǎn)卧竦陌颠吙蚓褪菃卧襁吙虮彻獾牟糠帧? 第 23頁 任務(wù)一 表格的設(shè)計(jì) %LANGUAGE=VBSCRIPT CODEPAGE=65001% html head meta equiv=ContentType content=text/html。 屬性值 含義 Left 左對(duì)齊 Center 居中對(duì)齊 right 右對(duì)齊 屬性值 含義 top 對(duì)內(nèi)容進(jìn)行上 對(duì)齊 middle 對(duì)內(nèi)容進(jìn)行居中 對(duì)齊 bottom 對(duì)內(nèi)容進(jìn)行下 對(duì)齊 baseline 與基線 對(duì)齊 第 25頁 任務(wù)一 表格的設(shè)計(jì) ● 單元格屬性 ? baseline 值 基線是一條虛構(gòu)的線。不過，如果文本的字號(hào)各不相同，那么 baseline 的效果會(huì)更好 。 –表首標(biāo)記 thead ? 語法 – thead bgcolor=“背景顏色 ” align=“對(duì)齊方式 ”…… /thead ? 用于定義表格最上端表首的樣式 ? 一個(gè)表元素中只能有一個(gè) thead標(biāo)記 第 32頁 任務(wù)一 表格的設(shè)計(jì) %LANGUAGE=VBSCRIPT CODEPAGE=65001% html head meta equiv=ContentType content=text/html。 charset=utf8 / title作業(yè) 32/title /head body table border=1 tr td rowspan=2阿里巴巴旗下網(wǎng)站 /td td我要買 /td td我要買 /td td我淘寶 /td /tr tr td colspan=3你好，歡迎來淘寶！ /td /tr /table /body /html 作業(yè) 312源代碼 第 38頁 跨 2行 ，并放了一副圖片 此單元格放了 一副圖片 此單元格跨了 3列 作業(yè) 313 編寫如下圖所示效果對(duì)應(yīng)的 html代碼 插入圖片： img src=url width=“圖片寬度 ” heigjt=“圖片高度 ” 任務(wù)一 表格的設(shè)計(jì) 第 39頁 任務(wù)一 表格的設(shè)計(jì) %LANGUAGE=VBSCRIPT CODEPAGE=65001% html head meta equiv=ContentType content=text/html。 img元素下的基本元素屬性是 src屬性， src的屬性值為所引用的圖片的 URL地址。 ? 語法： img src=“url” alt=“圖像提示文字” 第 48頁 任務(wù)二 圖片視頻的插入 ● 圖片的插入 – 圖片的顯示 大小 ? img src=“erl“ width=“” height=“” ? width指定圖片的寬度， height指定高度。本山訓(xùn)場(chǎng)是一片布置于樹林及原野間的山訓(xùn)場(chǎng)，場(chǎng)內(nèi)的設(shè)施均具野味而刺激。本山訓(xùn)場(chǎng)是一片布置于樹林及原野間的山訓(xùn)場(chǎng)，場(chǎng)內(nèi)的設(shè)施均具野味而刺激。公司本著“科技為民所用”的原則，致力于農(nóng)業(yè)科技成果的轉(zhuǎn)化和推廣，在研發(fā)具有自主知識(shí)產(chǎn)權(quán)產(chǎn)品的同時(shí)，以亞洲為中心，積極引進(jìn)和篩選來自世界各地的優(yōu)質(zhì)產(chǎn)品資源。為了使企業(yè)能夠持續(xù)、健康、穩(wěn)定地發(fā)展，公司將所獲利潤(rùn)的較大部分投入到了產(chǎn)品研發(fā)之中，在自主研發(fā)與合作開發(fā)的理念指導(dǎo)下，與國(guó)內(nèi)眾多大專院校、科研機(jī)構(gòu)及企業(yè)有著密切地交流及技術(shù)往來，并建立了科研試驗(yàn)基地 160多畝。我們堅(jiān)信：在全體同仁的共同努力下，公司的明天會(huì)更美好，一定能夠在農(nóng)業(yè)的騰飛中大放異彩??！ /p/font/td /tr tr td colspan=2 img src=images/ width=985 height=87/td /tr /table /body /html 第 55頁 任務(wù)二 圖片視頻的插入 ● 插入音頻文件 – 語法 ? embed src=“多媒體文件地址 ” width=“多媒體的寬度 ” heiht=“多媒體的高度 ” ? 例如： ? embed src=“images/” width=“500” height=“400”/embed 第 56頁 第 57頁 任務(wù)二 圖片視頻的插入 ● 插入背景音樂 – 語法 ? bgsound src=“背景音樂的地址 ” Loop=“循環(huán)次數(shù) ” – 背景音樂需要不斷地播放，可以通過設(shè)置 loop來實(shí)現(xiàn)循環(huán)次數(shù)的控制； – 循環(huán)次數(shù)設(shè)置為 true，表示無限次地循環(huán)播放背景音樂； 第 58頁 任務(wù)二 圖片視頻的插入 ● 設(shè)置滾動(dòng)效果 – 滾動(dòng)標(biāo)記 marquee ? marquee…滾動(dòng)的內(nèi)容 …/marquee – direction ? 默認(rèn)情況下職能從右向左滾動(dòng)，通過 d