WEbUI表格相關(guān)操作_第1頁
WEbUI表格相關(guān)操作_第2頁
WEbUI表格相關(guān)操作_第3頁
WEbUI表格相關(guān)操作_第4頁
WEbUI表格相關(guān)操作_第5頁
已閱讀5頁，還剩53頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第7章表格主要內(nèi)容熟悉表格的常用屬性，制作表格

利用表格來容納表格式數(shù)據(jù)

利用表格進(jìn)行頁面的排版布局7.1表格簡介表格在網(wǎng)站應(yīng)用中非常廣泛，幾乎所有的HTML頁面中都或多或少地采用表格，表格可以方便靈活地實(shí)現(xiàn)對(duì)網(wǎng)頁的排版，可以把相互關(guān)聯(lián)的信息元素集中定位，使瀏覽頁面的人一目了然，賞心悅目。所以說要制作好網(wǎng)頁，就要學(xué)好表格，熟練掌握和運(yùn)用表格的各種屬性。7.2.1表格基本標(biāo)記表格標(biāo)簽在HTML語法中，表格主要通過3個(gè)標(biāo)簽來構(gòu)成：<table>、<tr>、<td>。基本語法：

<table><tr><td>…</td>…</tr><tr><td>…</td>…</tr>…</table>7.2.1表格基本標(biāo)記<!--實(shí)例7-1代碼--><html><head><title>定義表格</title></head><body><tablewidth="600"border="1"><tr><!--表格第一行--><td>節(jié)次</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td></tr><tr><!--表格第二行--><td>第12節(jié)</td><td>體育</td><td>大學(xué)英語</td><td>高等數(shù)學(xué)</td><td>數(shù)據(jù)結(jié)構(gòu)實(shí)驗(yàn)</td><td>Web開發(fā)</td></tr><tr><!--表格第二行--><td>第34節(jié)</td><td>大學(xué)英語</td><td>高等數(shù)學(xué)</td><td>數(shù)據(jù)結(jié)構(gòu)</td><td>數(shù)據(jù)結(jié)構(gòu)</td><td>Web開發(fā)實(shí)驗(yàn)</td></tr></table></body></html>7.2.1表格基本標(biāo)記7.2.2表格標(biāo)題表格標(biāo)題就是對(duì)表格內(nèi)容的簡單說明，用<caption>標(biāo)簽實(shí)現(xiàn)?；菊Z法：<caption>…</caption>

7.2.2表格標(biāo)題<!--程序7-2-->…<tablewidth="600"border="1"><caption>課程表</caption><tr><!--表格第一行--><td>節(jié)次</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td></tr>…</table7.2.2表格標(biāo)題7.2.3表格表頭表頭指表格的第一行，文字樣式為居中、加粗顯示，通過<th>標(biāo)簽實(shí)現(xiàn)?；菊Z法：

<table><tr><th>…</th>…</tr><tr><td>…</td>…</tr>…</table>7.2.3表格表頭<!--程序7-3-->…<tablewidth="600"border="1"><caption>課程表</caption><tr><!--表格表頭--><th>節(jié)次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr>…</table>7.2.3表格表頭7.2.4設(shè)置劃分結(jié)構(gòu)的表格為了清楚區(qū)分表格結(jié)構(gòu)，將一個(gè)表格分三個(gè)部分在網(wǎng)頁上顯示出來，HTML語言規(guī)定了<thead>、<tbody>、<tfoot>3個(gè)標(biāo)簽分別對(duì)應(yīng)于表格的表首、表主體和表尾?；菊Z法：<thead>…</thead><tbody>…</tbody><tfoot>…</tfoot>7.2.4設(shè)置劃分結(jié)構(gòu)的表格<!--程序7-4--><html><head><title>定義表格結(jié)構(gòu)</title></head><body><tablewidth="600"border="1"><caption>課程表</caption><thead><!--表格表頭--><tr><th>節(jié)次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><tr></thead><tfoot><!--表格的頁腳--><tr><tdcolspan="6">適用時(shí)間：2008~2009第一學(xué)期083007班</td></tr></tfoot>7.2.4設(shè)置劃分結(jié)構(gòu)的表格<tbody><!--表格表體--><tr><td>第12節(jié)</td><td>體育</td><td>大學(xué)英語</td><td>高等數(shù)學(xué)</td><td>數(shù)據(jù)結(jié)構(gòu)實(shí)驗(yàn)</td><td>Web開發(fā)</td></tr><tr><td>第34節(jié)</td><td>大學(xué)英語</td><td>高等數(shù)學(xué)</td><td>數(shù)據(jù)結(jié)構(gòu)</td><td>數(shù)據(jù)結(jié)構(gòu)</td><td>Web開發(fā)實(shí)驗(yàn)</td></tr></tbody></table></body></html>

7.2.4設(shè)置劃分結(jié)構(gòu)的表格7.3表格修飾表格是網(wǎng)頁布局中的重要元素，它有豐富的屬性，可以對(duì)其進(jìn)行相關(guān)設(shè)置。7.3.1設(shè)置表格的邊框?qū)傩员砀竦倪吙蚰J(rèn)情況下表格邊框?yàn)?，可以通過給表格添加屬性及屬性值，實(shí)現(xiàn)為表格設(shè)置邊框線以及美化表格的目的，常見屬性如表7-2所示。基本語法：<tableborder=”

”bordercolor=”

”bordercolorlight=”

”bordercolordark=”

”>7.3.1設(shè)置表格的邊框?qū)傩?lt;!--程序7-5-->…<tablewidth="600"border="1"bordercolor="#00FF00"bordercolorlight＝"#FF0000"bordercolordark="#0000FF">…</table>7.3.2設(shè)置表格的寬度和高度表格的寬度和高度默認(rèn)情況下，表格的寬度和高度會(huì)根據(jù)內(nèi)容自動(dòng)調(diào)整。基本語法：<tablewidth=”

”height=”

”>7.3.2設(shè)置表格的寬度和高度<!--程序7-6-->…<tablewidth="600"height="200"border="1">…</table>7.3.2設(shè)置表格的寬度和高度7.3.3設(shè)置表格背景<!--程序7-7-->…<tablewidth="600"border="1"bgcolor="#f5f5dc">…</table>7.3.4設(shè)置表格的背景圖像表格背景圖像表格背景圖像可以是GIF、JPEG或PNG三種圖像格式。基本語法：<tablebackgruond=”

”>7.3.5設(shè)置邊框樣式邊框的樣式在前面我們使用border屬性時(shí)，每個(gè)單元格之間以及表格本身會(huì)出現(xiàn)邊框，我們可以利用frame屬性控制應(yīng)該顯示哪些表格邊框，利用rules屬性控制應(yīng)該顯示哪些內(nèi)部邊框?；菊Z法：<tableframe=”

”rules=”

”>7.3.5設(shè)置邊框樣式<!--程序7-9-->…<tablewidth=”600"border="1"frame="hsides"rules="all">…</table>7.3.5設(shè)置邊框樣式7.3.6設(shè)置表格單元格間距<!--程序7-10-->…<tablewidth="600"border="1"frame="hsides"rules="all"cellspacing="15">…</table>7.3.6設(shè)置表格單元格間距7.3.7設(shè)置表格單元格邊距單元格邊距單元格邊距是指單元格中的內(nèi)容與單元格邊框的距離?；菊Z法：<tablecellpadding="">7.3.7設(shè)置表格單元格邊距<!--程序7-11-->…<tablewidth="600"border="1"frame="hsides"rules="all"cellspacing="15"cellpadding="10">…</table>7.3.7設(shè)置表格單元格邊距7.3.8設(shè)置表格的水平對(duì)齊屬性水平對(duì)齊在水平方向上，可以設(shè)置表格的對(duì)齊方式為：居左、居中、居右。如果沒特別進(jìn)行設(shè)置，則默認(rèn)為居左排列?；菊Z法：<tablealign=”

”>7.4.1行內(nèi)容水平對(duì)齊基本語法：<tralign=”

”>…</tr><!--程序7-13-><html><head><title>設(shè)定表格水平對(duì)齊</title></head><body><tablewidth="600"border="1"align="center"><caption>課程表</caption><tralign="center"><th>節(jié)次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th>7.4.1行內(nèi)容水平對(duì)齊<th>星期五</th><tr><tralign="right"><td>第12節(jié)</td><td>體育</td><td>大學(xué)英語</td><td>高等數(shù)學(xué)</td><td>數(shù)據(jù)結(jié)構(gòu)實(shí)驗(yàn)</td><td>Web開發(fā)</td></tr><tr><!--表格第二行--><td>第34節(jié)</td><td>大學(xué)英語</td><td>高等數(shù)學(xué)</td><td>數(shù)據(jù)結(jié)構(gòu)</td><td>數(shù)據(jù)結(jié)構(gòu)</td><td>Web開發(fā)實(shí)驗(yàn)</td></tr><tr><tdcolspan="6">適用時(shí)間：2008~2009第一學(xué)期083007班</td></tr></table></body></html>7.4.1行內(nèi)容水平對(duì)齊7.4.2行內(nèi)容垂直對(duì)齊基本語法：<trvalign=””>…</tr>

<!--程序7-14--><html><head><title>設(shè)定表格行內(nèi)容垂直對(duì)齊</title></head><body><tablewidth="600"height="200"border="1"align="center"><caption>課程表</caption><trvalign="top">…<tr>7.4.2行內(nèi)容垂直對(duì)齊<trvalign="bottom">…</tr><tr><!--表格第二行-->…</tr><tr><tdcolspan="6">適用時(shí)間：2008~2009第一學(xué)期083007班</td></tr></table></body></html>7.4.2行內(nèi)容垂直對(duì)齊7.5設(shè)置表格中某一單元格的屬性<td>的屬性用于設(shè)定表格中某一單元格的屬性7.5.1設(shè)置單元格跨行跨行合并單元格的rowspan屬性可實(shí)現(xiàn)單元格的跨行合并（縱向合并）?；菊Z法：<tdrowspan=”

”>…</td>7.5.1設(shè)置單元格跨行

<!--程序7-15--><html><head><title>設(shè)定跨行的表格</title></head><body><tablewidth="600"border="1"cellpadding="0"cellspacing="0"align="center"><caption>課程表</caption><tr><th>節(jié)次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><tr><tr><td>第12節(jié)</td><td>體育</td>7.5.1設(shè)置單元格跨行

<td>大學(xué)英語</td><td>高等數(shù)學(xué)</td><tdrowspan=“2”valign=“middle”>數(shù)據(jù)結(jié)構(gòu)</td><!--此處定義了一個(gè)單元格占了兩行-->

<td>Web開發(fā)</td></tr><tr><td>第34節(jié)</td><td>大學(xué)英語</td><td>高等數(shù)學(xué)</td><td>數(shù)據(jù)結(jié)構(gòu)</td><!--此處開始少了一個(gè)單元格，因?yàn)樯弦恍幸呀?jīng)定義--><td>Web開發(fā)實(shí)驗(yàn)</td></tr><tr><tdcolspan="6">適用時(shí)間：2008~2009第一學(xué)期083007班</td></tr></table></body></html>7.5.1設(shè)置單元格跨行7.5.2設(shè)置單元格跨列跨列合并colspan屬性可以進(jìn)行單元格的跨列合并（橫向合并）。基本語法：<tdcolspan="">…</td>7.5.2設(shè)置單元格跨列

<!--程序7-16--><html><head><title>設(shè)定跨列的表格</title></head><body><tablewidth="600"border="1"cellpadding="0"cellspacing="0"align="center"><caption>課程表</caption><tr><th>節(jié)次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><tr><tr><!---此表格行和上下兩行相比少了一列定義，但最后一個(gè)單元格實(shí)際上占了兩列--><td>第12節(jié)</td><td>體育</td><td>大學(xué)英語</td><td>高等數(shù)學(xué)</td>7.5.2設(shè)置單元格跨列

<tdcolspan="2"align="center">數(shù)據(jù)結(jié)構(gòu)</td><!--此處定義了一個(gè)單元格占了兩列--><!--此處開始少了一個(gè)單元格，因?yàn)樯弦粏卧褚呀?jīng)定義--></tr><tr><td>第34節(jié)</td><td>大學(xué)英語</td><td>高等數(shù)學(xué)</td><td>數(shù)據(jù)結(jié)構(gòu)</td><td>數(shù)據(jù)結(jié)構(gòu)實(shí)驗(yàn)</td><td>Web開發(fā)實(shí)驗(yàn)</td></tr><tr><tdcolspan="6">適用時(shí)間：2008~2009第一學(xué)期083007班</td></tr></table></body></html>7.5.2設(shè)置單元格跨列7.6表格嵌套表格嵌套就是根據(jù)插入元素的需要，在一個(gè)表格的某個(gè)單元格里再插入一個(gè)若干行和列的表格。對(duì)嵌套表格，可以像對(duì)任何其他表格一樣進(jìn)行格式設(shè)置，但是其寬度受它所在單元格的寬度的限制。利用表格的嵌套，一方面可以編輯出復(fù)雜而精美的效果，另一方面可根據(jù)布局需要來實(shí)現(xiàn)精確的編排。不過，需要注意的是，嵌套層次越多，網(wǎng)頁的載入速度就會(huì)越慢。7.6表格嵌套

<!--程序7-17--><html><head><title>表格嵌套</title></head><body><tablewidth="700"border="1"cellpadding="0"cellspacing="0"align="center"><caption>課程表</caption><tr><tdwidth="100">083007班</td><td><!--此處嵌套了一個(gè)班的課程表--><tablewidth="100%"border="1"cellpadding="0"cellspacing="0"frame="void"><tr>7.6表格嵌套

<th>節(jié)次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><tr><tr><td>第12節(jié)</td><td>體育</td><td>大學(xué)英語</td><td>高等數(shù)學(xué)</td><td>數(shù)據(jù)結(jié)構(gòu)</td><td>Web開發(fā)</td></tr><tr>7.6表格嵌套

<td>第34節(jié)</td><td>大學(xué)英語</td><td>高等數(shù)學(xué)</td><td>數(shù)據(jù)結(jié)構(gòu)</td><td>數(shù)據(jù)結(jié)構(gòu)實(shí)驗(yàn)</td><td>Web開發(fā)實(shí)驗(yàn)</td></tr></table></td></tr><tr><td>083008班</td><td><!—此處省略了嵌套的課程表，內(nèi)容同上--></td></tr></table></body></html>

7.6表格嵌套7.7小實(shí)例一些設(shè)計(jì)人員喜歡使用表格來進(jìn)行頁面布局，因?yàn)樗男Ч诓煌臑g覽器中更容易保持一致，雖然目前更流行的是利用“DIV+CSS”技術(shù)進(jìn)行頁面布局。

7.7小實(shí)例

<!--程序718--><html><head><title>利用表格實(shí)現(xiàn)頁面布局</title>

溫馨提示

  • 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)論