商務(wù)網(wǎng)頁第8課課件

1、3.5 表格制作方法網(wǎng)頁中的表格與現(xiàn)實生活中的表格類似，但用途與概念有一些區(qū)別。網(wǎng)頁中的表格除了展示格式化的數(shù)據(jù)信息外，還具有美化網(wǎng)頁的重要作用，常常用來排版網(wǎng)頁。盡管表格布局網(wǎng)頁的技術(shù)正逐漸被后來發(fā)展起來的“DIV+CSS”技術(shù)取代，但其作為排版數(shù)據(jù)的功能依然受到很多網(wǎng)頁設(shè)計人員的喜愛。網(wǎng)頁設(shè)計制作人員可以利用表格技術(shù)快速地表示價格列表、統(tǒng)計比較、圖表等，還能高效快捷地把圖像、文本、數(shù)據(jù)和表單元素等有序地顯示在頁面上，讓我們可以設(shè)計出清晰的網(wǎng)頁布局和漂亮的網(wǎng)頁界面。3.5.1 表格的代碼結(jié)構(gòu)在網(wǎng)頁中使用表格技術(shù)，需要了解表格基本的代碼結(jié)構(gòu)網(wǎng)頁中的表格是通過表標簽創(chuàng)建，再由行標簽創(chuàng)建表格行，最

2、后通過單元格標簽創(chuàng)建表格的單元。多行的表格單元構(gòu)成了一個完整的表格。從表格的代碼結(jié)構(gòu)上看，表格的數(shù)據(jù)實例放在單元格的開始標簽和結(jié)束標簽的中間。3.5.2 制作表格的方法生活中的表格可以用筆畫，或者用Ecxel等工具制作，而網(wǎng)頁中的表格必須用純文本的方式來定義和描述。創(chuàng)建表格應(yīng)當(dāng)使用表標簽、表頭標簽、行標簽、單元格標簽及其相關(guān)屬性。創(chuàng)建表格首先要創(chuàng)建表，然后按照創(chuàng)建行、創(chuàng)建該行的單元格，再創(chuàng)建行、創(chuàng)建該行單元格的順序進行，直至所有表格創(chuàng)建完畢。3.5.3 單元格合并的方法單元格合并分為多列單元格合并、多行單元格合并以及多行多列單元格同時合并3種形式，需要使用表格單元格標簽的“colspan”屬性

3、、“rowspan”屬性。1多列單元格合并多列單元格合并是指當(dāng)前列與右邊連續(xù)多列單元格的合并。設(shè)置方法為其中，colspan的屬性值為整數(shù)數(shù)字，如1、2、3、4、5等，表示合并連續(xù)幾列的單元格。 表格列合并 項目1 項目2 項目3 項目4 項目5 單元格 單元格 單元格 單元格 單元格 單元格 單元格 單元格 單元格 2多行單元格合并多行單元格合并是指當(dāng)前行與下邊連續(xù)多行單元格的合并。設(shè)置方法為其中，rowspan的屬性值為整數(shù)數(shù)字，如1、2、3、4、5等，表示合并幾行。 表格行合并 項目1 項目2 項目3 項目4 項目5 單元格 單元格 單元格 單元格 單元格 單元格 單元格 單元格 單元格

4、 思考：行合并后，當(dāng)前行還應(yīng)當(dāng)制作幾個單元格？下行單元格如何制作？從哪個位置開始？制作單元格的數(shù)量怎么計算？另，表頭的合并與單元格合并的方法完全相同，只是標簽不同，本書不做重復(fù)介紹。3多行多列單元格同時合并多行多列單元格同時合并是指一個單元格與右列、下行的單元格同時合并。設(shè)置方法為要點：觀察表格，計算行列合并后，需要制作的單元格數(shù)量。 表格行列同時合并 項目1 項目2 項目3 項目4 項目5 單元格 單元格 單元格 單元格 單元格 單元格 3.5.4 制作單元格內(nèi)容制作單元格內(nèi)容主要指引用文本、圖像，以及設(shè)置單元格背景。1引用文本引用文本比較簡單，直接在單元格標簽之間放入文本即可，可按照以前學(xué)習(xí)的知識設(shè)置文本的字體、字號、顏色。嵌入文字的方法為文字實例2引用圖像引用圖像的方法與網(wǎng)頁引用圖像的方法基本相同，需要使用圖像標簽及其“src（圖像源）”“width（寬度）”“height（高度）”屬性。設(shè)置方法為：其中，“width”“height”的屬性值有絕對像素值、百分比兩種表達方式。需要注意的是：在單元格內(nèi)引用圖像時使用百分比賦值，則圖像的百分比跟蹤的