網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)實(shí)驗(yàn)課件第6章 表格_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)實(shí)驗(yàn)課件第6章 表格_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)實(shí)驗(yàn)課件第6章 表格_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)實(shí)驗(yàn)課件第6章 表格_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)實(shí)驗(yàn)課件第6章 表格_第5頁(yè)
已閱讀5頁(yè)，還剩46頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

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

<table><tr><td>…</td>…</tr><tr><td>…</td>…</tr>…</table>6.2.1表格基本標(biāo)記<!--實(shí)例6-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é)英語(yǔ)</td><td>高等數(shù)學(xué)</td><td>數(shù)據(jù)結(jié)構(gòu)實(shí)驗(yàn)</td><td>Web開(kāi)發(fā)</td></tr><tr><!--表格第二行--><td>第34節(jié)</td><td>大學(xué)英語(yǔ)</td><td>高等數(shù)學(xué)</td><td>數(shù)據(jù)結(jié)構(gòu)</td><td>數(shù)據(jù)結(jié)構(gòu)</td><td>Web開(kāi)發(fā)實(shí)驗(yàn)</td></tr></table></body></html>6.2.1表格基本標(biāo)記6.2.2表格標(biāo)題表格標(biāo)題就是對(duì)表格內(nèi)容的簡(jiǎn)單說(shuō)明，用<caption>標(biāo)簽實(shí)現(xiàn)?；菊Z(yǔ)法：<caption>…</caption>

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

<table><tr><th>…</th>…</tr><tr><td>…</td>…</tr>…</table>6.2.3表格表頭<!--程序6-3-->…<tablewidth="600"border="1"><caption>課程表</caption><tr><!--表格表頭--><th>節(jié)次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr>…</table>6.2.3表格表頭6.3表格修飾表格是網(wǎng)頁(yè)布局中的重要元素，它有豐富的屬性，可以對(duì)其進(jìn)行相關(guān)設(shè)置。6.3.1設(shè)置表格的邊框?qū)傩员砀竦倪吙蚰J(rèn)情況下表格邊框?yàn)?，可以通過(guò)給表格添加屬性及屬性值，實(shí)現(xiàn)為表格設(shè)置邊框線以及美化表格的目的，常見(jiàn)屬性如表6-2所示。基本語(yǔ)法：<tableborder=””bordercolor=””><!--程序6-4-->…<tablewidth="600"border="1"bordercolor="#00FF00">…</table>6.3.2設(shè)置表格的寬度和高度表格的寬度和高度默認(rèn)情況下，表格的寬度和高度會(huì)根據(jù)內(nèi)容自動(dòng)調(diào)整?；菊Z(yǔ)法：<tablewidth=””height=””><!--程序6-5->…<tablewidth="600"height="200"border="1">…</table>6.3.2設(shè)置表格的寬度和高度6.3.3設(shè)置表格背景表格背景表格背景默認(rèn)為白色，根據(jù)網(wǎng)頁(yè)設(shè)計(jì)要求，設(shè)置bgcolor屬性，可以設(shè)定表格背景顏色，以增加視覺(jué)效果?；菊Z(yǔ)法：<tablebgcolor=””><!--程序6-7-->…<tablewidth="600"border="1"bgcolor="#f5f5dc">…</table>6.3.4設(shè)置表格的背景圖像表格背景圖像表格背景圖像可以是GIF、JPEG或PNG三種圖像格式?；菊Z(yǔ)法：<tablebackgruond=””><!--程序6-7-->…<tablewidth="600"border="1"background="kechengbiao.gif">…</table>6.3.5設(shè)置邊框樣式邊框的樣式在前面我們使用border屬性時(shí)，每個(gè)單元格之間以及表格本身會(huì)出現(xiàn)邊框，我們可以利用frame屬性控制應(yīng)該顯示哪些表格邊框，利用rules屬性控制應(yīng)該顯示哪些內(nèi)部邊框?；菊Z(yǔ)法：<tableframe=””rules=””><!--程序6-8-->…<tablewidth=”600"border="1"frame="hsides"rules="all">…</table>6.3.5設(shè)置邊框樣式6.3.6設(shè)置表格單元格間距單元格的間距通過(guò)cellspacing屬性可以調(diào)整表格的單元格和單元格之間的間距，使得表格布局不會(huì)顯得過(guò)于緊湊?；菊Z(yǔ)法：<tablecellspacing=""><!--程序6-9-->…<tablewidth="600"border="1"cellspacing="15">…</table>6.3.6設(shè)置表格單元格間距6.3.7設(shè)置表格單元格邊距單元格邊距單元格邊距是指單元格中的內(nèi)容與單元格邊框的距離。基本語(yǔ)法：<tablecellpadding=""><!--程序6-10-->…<tablewidth="600"border="1"cellspacing="15"cellpadding="10">…</table>6.3.7設(shè)置表格單元格邊距6.3.8設(shè)置表格的水平對(duì)齊屬性水平對(duì)齊在水平方向上，可以設(shè)置表格的對(duì)齊方式為：left居左、center居中、right

居右。如果沒(méi)特別進(jìn)行設(shè)置，則默認(rèn)為居左?；菊Z(yǔ)法：<tablealign=””><!--程序6-11-->…<tablewidth="600"border="1"align="center">…</table>6.4設(shè)置表格行的屬性

6.4設(shè)置表格行的屬性<tr>的屬性用于設(shè)定表格中某一行的屬性。6.4.1行內(nèi)容水平對(duì)齊基本語(yǔ)法：<tralign=””>…</tr><!--程序6-12-><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>6.4.1行內(nèi)容水平對(duì)齊<th>星期五</th><tr><tralign="right"><td>第12節(jié)</td><td>體育</td><td>大學(xué)英語(yǔ)</td><td>高等數(shù)學(xué)</td><td>數(shù)據(jù)結(jié)構(gòu)實(shí)驗(yàn)</td><td>Web開(kāi)發(fā)</td></tr><tr><!--表格第二行--><td>第34節(jié)</td><td>大學(xué)英語(yǔ)</td><td>高等數(shù)學(xué)</td><td>數(shù)據(jù)結(jié)構(gòu)</td><td>數(shù)據(jù)結(jié)構(gòu)</td><td>Web開(kāi)發(fā)實(shí)驗(yàn)</td></tr><tr><tdcolspan="6">適用時(shí)間：2020~2021第一學(xué)期203007班</td></tr></table></body></html>6.4.1行內(nèi)容水平對(duì)齊6.4.2行內(nèi)容垂直對(duì)齊基本語(yǔ)法：<trvalign=””>…</tr><!--程序6-13--><html><head><title>設(shè)定表格行內(nèi)容垂直對(duì)齊</title></head><body><tablewidth="600"height="200"border="1"align="center"><caption>課程表</caption><trvalign="top">…<tr>6.4.2行內(nèi)容垂直對(duì)齊<trvalign="bottom">…</tr><tr><!--表格第二行-->…</tr><tr><tdcolspan="6">適用時(shí)間：2020~2021第一學(xué)期203007班</td></tr></table></body></html>6.4.2行內(nèi)容垂直對(duì)齊6.5設(shè)置表格中某一單元格的屬性<td>的屬性用于設(shè)定表格中某一單元格的屬性6.5.1設(shè)置單元格跨行跨行合并單元格的rowspan屬性可實(shí)現(xiàn)單元格的跨行合并（縱向合并）。基本語(yǔ)法：<tdrowspan=””>…</td>6.5.1設(shè)置單元格跨行<!--程序6-14--><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>6.5.1設(shè)置單元格跨行<td>大學(xué)英語(yǔ)</td><td>高等數(shù)學(xué)</td><tdrowspan=“2”valign=“middle”>數(shù)據(jù)結(jié)構(gòu)</td><!--此處定義了一個(gè)單元格占了兩行--><td>Web開(kāi)發(fā)</td></tr><tr><td>第34節(jié)</td><td>大學(xué)英語(yǔ)</td><td>高等數(shù)學(xué)</td><td>數(shù)據(jù)結(jié)構(gòu)</td><!--此處開(kāi)始少了一個(gè)單元格，因?yàn)樯弦恍幸呀?jīng)定義--><td>Web開(kāi)發(fā)實(shí)驗(yàn)</td></tr><tr><tdcolspan="6">適用時(shí)間：2020~2021第一學(xué)期203007班</td></tr></table></body></html>6.5.1設(shè)置單元格跨行6.5.2設(shè)置單元格跨列跨列合并colspan屬性可以進(jìn)行單元格的跨列合并（橫向合并）。基本語(yǔ)法：<tdcolspan="">…</td>6.5.2設(shè)置單元格跨列<!--程序6-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><!---此表格行和上下兩行相比少了一列定義，但最后一個(gè)單元格實(shí)際上占了兩列-->6.5.2設(shè)置單元格跨列<td>第12節(jié)</td><td>體育</td><td>大學(xué)英語(yǔ)</td><td>高等數(shù)學(xué)</td><tdcolspan="2"align="center">數(shù)據(jù)結(jié)構(gòu)</td><!--此處定義了一個(gè)單元格占了兩列--><!--此處開(kāi)始少了一個(gè)單元格，因?yàn)樯弦粏卧褚呀?jīng)定義--></tr><tr><td>第34節(jié)</td><td>大學(xué)英語(yǔ)</td><td>高等數(shù)學(xué)</td><td>數(shù)據(jù)結(jié)構(gòu)</td><td>數(shù)據(jù)結(jié)構(gòu)實(shí)驗(yàn)</td><td>Web開(kāi)發(fā)實(shí)驗(yàn)</td></tr><tr><tdcolspan="6">適用時(shí)間：2020~2021第一學(xué)期203007班</td></tr></table></body></html>6.5.2設(shè)置單元格跨列6.6表格嵌套表格嵌套就是根據(jù)插入元素的需要，在一個(gè)表格的某個(gè)單元格里再插入一個(gè)若干行和列的表格。對(duì)嵌套表格，可以像對(duì)任何其他表格一樣進(jìn)行格式設(shè)置，但是其寬度受它所在單元格的寬度的限制。利用表格的嵌套，一方面可以編輯出復(fù)雜而精美的效果，另一方面可根據(jù)布局需要來(lái)實(shí)現(xiàn)精確的編排。!注意:嵌套層次越多，網(wǎng)頁(yè)的載入速度就會(huì)越慢。6.6表格嵌套

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

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

<td>第34節(jié)</td><td>大學(xué)英語(yǔ)</td><td>高等數(shù)學(xué)</td><td>數(shù)據(jù)結(jié)構(gòu)</td><td>數(shù)據(jù)結(jié)構(gòu)實(shí)驗(yàn)</td><td>Web開(kāi)發(fā)實(shí)驗(yàn)</td></tr></table></td></tr><tr><td>203008班</td><td><!—此處省略了嵌套的課程表，內(nèi)容同上--></td></tr></table></body></html>6.6表格嵌套6.7小實(shí)例一些設(shè)計(jì)人員喜歡使用表格來(lái)進(jìn)行頁(yè)面布局，因?yàn)樗男Ч诓煌臑g覽器中更容易保持一致，雖然目前更流行的是利用“DIV+CSS”技術(shù)進(jìn)行頁(yè)面布局。6.7小實(shí)例<!--程序6-17--><html><head><title>利用表格實(shí)現(xiàn)頁(yè)面布局</title></head><body><tableborder="1"width="650"align="center"><tr><tdwidth="150"height="80">網(wǎng)站標(biāo)

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論