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

下載本文檔

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

文檔簡介

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

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

6.2.2表格標題<!--程序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表格標題6.2.3表格表頭表頭指表格的第一行，文字樣式為居中、加粗，通過<th>標簽實現(xiàn)?；菊Z法：

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

居右。如果沒特別進行設置，則默認為居左。基本語法：<tablealign=””><!--程序6-11-->…<tablewidth="600"border="1"align="center">…</table>6.4設置表格行的屬性

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

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

溫馨提示

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

評論

0/150

提交評論