商務(wù)網(wǎng)頁設(shè)計與制作（第2版）課件 第7課 表格制作方法_第1頁
商務(wù)網(wǎng)頁設(shè)計與制作（第2版）課件 第7課 表格制作方法_第2頁
商務(wù)網(wǎng)頁設(shè)計與制作（第2版）課件 第7課 表格制作方法_第3頁
商務(wù)網(wǎng)頁設(shè)計與制作（第2版）課件 第7課 表格制作方法_第4頁
商務(wù)網(wǎng)頁設(shè)計與制作（第2版）課件 第7課 表格制作方法_第5頁
已閱讀5頁，還剩15頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第3章 HTML網(wǎng)頁制作技術(shù)3.6表格制作方法3.6.1表格的代碼結(jié)構(gòu)3.6.2制作表格的方法3.6.3單元格或表頭的合并方法3.6.4制作單元格內(nèi)容3.6表格制作方法網(wǎng)頁中的表格與現(xiàn)實(shí)生活中的表格類似，但用途與概念有一些區(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.6.1表格的代碼結(jié)構(gòu)在網(wǎng)頁中使用表格技術(shù)，需要了解表格基本的代碼結(jié)構(gòu)網(wǎng)頁中的表格是通過表標(biāo)簽<table>創(chuàng)建，再由行標(biāo)簽<tr>創(chuàng)建表格行，最后通過單元格標(biāo)簽<td>創(chuàng)建表格的單元。多行的表格單元構(gòu)成了一個完整的表格。從表格的代碼結(jié)構(gòu)上看，表格的數(shù)據(jù)實(shí)例放在單元格的開始標(biāo)簽和結(jié)束標(biāo)簽的中間。3.6.2制作表格的方法生活中的表格可以用筆畫，或者用Ecxel等工具制作，而網(wǎng)頁中的表格必須用純文本的方式來定義和描述。創(chuàng)建表格應(yīng)當(dāng)使用表標(biāo)簽<table>、表頭標(biāo)簽<th>、行標(biāo)簽<tr>、單元格標(biāo)簽<td>及其相關(guān)屬性。創(chuàng)建表格首先要創(chuàng)建表，然后按照創(chuàng)建行、創(chuàng)建該行的單元格，再創(chuàng)建行、創(chuàng)建該行單元格的順序進(jìn)行，直至所有表格創(chuàng)建完畢。3.6.3制作單元格和表頭內(nèi)容在表格中，所有表格數(shù)據(jù)信息均在單元格（或表頭）中顯示，所以，制作表格，就必須學(xué)會制作單元格（或表頭）內(nèi)容。制作單元格（或表頭）內(nèi)容，就是指在單元格或表頭中引用文本、圖像等。1．引用文本引用文本比較簡單，直接在單元格標(biāo)簽<td></td>（或表頭標(biāo)簽<th></th>）之間放入文本即可，可按照以前學(xué)習(xí)的知識設(shè)置文本的字體、字號、顏色。嵌入文字的方法為<td><fontface=”屬性值”color=”屬性值”size=”屬性值”>文字實(shí)例</font></td>或<th><fontface=”屬性值”color=”屬性值”size=”屬性值”>文字示例</font></th>2．引用圖像引用圖像的方法與網(wǎng)頁引用圖像的方法基本相同，將圖像嵌入到單元格標(biāo)簽<td></td>（或表頭標(biāo)簽<th></th>）之間，必須使用圖像標(biāo)簽<img>及其“src（圖像源）”，通常也需要使用“width（寬度）”“height（高度）”屬性設(shè)置顯示尺寸，設(shè)置方法為：<td><imgsrc="圖像URL"width="屬性值"height="屬性值"/></td>或<th><imgsrc="圖像URL"width="屬性值"height="屬性值"/></th>表頭與單元格的功能和作用非常相似，除了表頭的字體是加粗的、默認(rèn)的水平對齊方式是居中這兩點(diǎn)之外，兩者沒有其它區(qū)別。而且，兩者在設(shè)置方法上也是相同的。所以在后續(xù)課程中，如無特殊說明，單元格的使用方法同樣適用于與表頭，只是標(biāo)簽不同而已，故不再單獨(dú)對表頭設(shè)置做額外講解。3.6.4制作第一個表格網(wǎng)頁第一步：按照常規(guī)的制作網(wǎng)頁的方法，制作網(wǎng)頁主體結(jié)構(gòu)代碼如下：<!DOCTYPEhtml><html><head><title>制作第一個表格網(wǎng)頁</title></head><body>

</body></html>第二步：在主文檔中采用表<table>制作表域，同時用border=”1”確定表格線為1像素寬。<tableborder=’1’>

</table>第三部：在表域中采用行標(biāo)簽<tr>制作6個（示例中有6行）行域。<tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>第四步：通常第一行是表頭行，在第一行的行域中采用表頭標(biāo)簽<th>分別制作表頭行的3項(xiàng)表頭內(nèi)容，既把表頭內(nèi)容放在<th></th>之間即可。<th>序號</th><th>姓名</th><th>成績</th>第五步：在第二行的行域中，采用單元格標(biāo)簽<td>分別制作數(shù)據(jù)區(qū)首行的3項(xiàng)單元格數(shù)據(jù)，既把單元格數(shù)據(jù)放在<td></td>之間即可。然后以此類推分別制作完后續(xù)4行的單元格數(shù)據(jù)內(nèi)容。<td>1</td><td>張一豐</td><td>99</td>第六步：參照第五步分別制作后續(xù)4行的單元格數(shù)據(jù)內(nèi)容，完成表格網(wǎng)頁的制作。完成后的代碼見3.6節(jié)示例代碼“制作第一個表格.html”3.6.5單元格合并的方法單元格合并分為多列單元格合并、多行單元格合并以及多行多列單元格同時合并3種形式，需要使用表格單元格標(biāo)簽<td>的“colspan”屬性、“rowspan”屬性。1．多列單元格合并多列單元格合并是指當(dāng)前列與右邊連續(xù)多列單元格的合并。設(shè)置方法為<tdcolspan="屬性值">其中，colspan的屬性值為整數(shù)數(shù)字，如1、2、3、4、5等，表示合并連續(xù)幾列的單元格。<html><head><title>表格列合并</title></head><body><tableborder="1"><tr><th>項(xiàng)目1</th><th>項(xiàng)目2</th><th>項(xiàng)目3</th><th>項(xiàng)目4</th><th>項(xiàng)目5</th> </tr><tr><tdcolspan="2">單元格</td><td>單元格</td><td>單元格</td><td>單元格</td></tr><tr><td>單元格</td><td>單元格</td><td>單元格</td><td>單元格</td><td>單元格</td> </tr></table></body></html>2．多行單元格合并多行單元格合并是指當(dāng)前行與下邊連續(xù)多行單元格的合并。設(shè)置方法為<tdrowspan="屬性值">其中，rowspan的屬性值為整數(shù)數(shù)字，如1、2、3、4、5等，表示合并幾行。<html><head><title>表格行合并</title></head><body><tableborder="1"><tr><th>項(xiàng)目1</th><th>項(xiàng)目2</th><th>項(xiàng)目3</th><th>項(xiàng)目4</th><th>項(xiàng)目5</th> </tr><tr><tdrowspan="2">單元格</td><td>單元格</td><td>單元格</td><td>單元格</td><td>單元格</td></tr><tr><td>單元格</td><td>單元格</td><td>單元格</td><td>單元格</td></tr></table></body></html>思考：行合并后，當(dāng)前行還應(yīng)當(dāng)制作幾個單元格？下行單元格如何制作？從哪個位置開始？制作單元格的數(shù)量怎么計算？另，表頭的合并與單元格合并的方法完全相同，只是標(biāo)簽不同，本書不做重復(fù)介紹。3．多行多列單元格同時合并多行多列單元格同時合并是指一個單元格與右列、下行的單元格同時合并。設(shè)置方法為<tdcolspan="屬性值"rowspan="屬性值">要點(diǎn)：觀察表格，計算行列合并后，需要制作的單元格數(shù)量。<html><head><title>表格行列同時合并</title></head><body><tableborder="1"><tr><th>項(xiàng)目1</th><th>項(xiàng)目2</th><th>項(xiàng)目3</th><th>項(xiàng)目4</th><th>項(xiàng)目5</th> </tr><tr><tdcolspan="2"rowspan="2">單元格</td><td>單元格

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論