使用表格市公開課一等獎省賽課獲獎?wù)n件_第1頁
使用表格市公開課一等獎省賽課獲獎?wù)n件_第2頁
使用表格市公開課一等獎省賽課獲獎?wù)n件_第3頁
使用表格市公開課一等獎省賽課獲獎?wù)n件_第4頁
使用表格市公開課一等獎省賽課獲獎?wù)n件_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

網(wǎng)頁設(shè)計(jì)與觀賞

第8章使用表格佳木斯大學(xué)陳春蕾>使用表格第1頁一、創(chuàng)建表格（一）創(chuàng)建一個普通表格應(yīng)包含標(biāo)識標(biāo)識1.<TABLE></TABLE>:定義整個表格，表格全部內(nèi)容都位于該標(biāo)識內(nèi)。2.<CAPTION></CAPTION>:定義表格標(biāo)題，其慣用屬性是align，取值以下：

1）top：在表格上部（默認(rèn)值）

2）bottom：在表格下部

3）left：在表格上部左側(cè)

4）right：在表格上部右側(cè)3.<TR></TR>：定義表格中行，且一對<TR></TR>只能定義一行4.<TH></TH>：定義表格中表頭單元格5.<TD></TD>：定義每行中各個單元格，行中有多少個單元格，就有多少個<TD>

第8章使用表格

創(chuàng)建表格使用表格第2頁（二）合并單元格1.行合并：在<TD>或<TH>內(nèi)使用rowspan屬性（跨越行數(shù)）2.列合并：在<TD>或<TH>內(nèi)使用colspan屬性（跨越列數(shù)）（三）創(chuàng)建表格步驟1.先使用<TABLE>，若需要標(biāo)題，則在<TABLE>后使用<CAPTION>；2.使用<TR>畫第一行；3.使用<TD>或<TH>定義該行上各列單元格；（1）若碰到跨行單元格，則用rowspan屬性，且在首次出現(xiàn)行中使用rowspan（2）若碰到跨列單元格，則用colspan進(jìn)行合并4.重復(fù)步驟2－3，依次畫出每一行，直到表格結(jié)束。創(chuàng)建表格第8章使用表格使用表格第3頁<table>標(biāo)簽屬性有：

width（寬度）height（高度）bgcolor（背景顏色）background（表格背景圖片）border（邊框?qū)挾龋゜ordercolor（邊框顏色）bordercolorlight（邊框明亮部分顏色）bordercolordark（邊框昏暗部分顏色）cellspacing（單元格邊距）cellpadding（單元格填充距）align（對齊方式）使用表格第4頁<TR>標(biāo)簽屬性有：align(水平對齊方式）valign（垂直對齊方式）bgcolor（行背景顏色）bordercolor（邊框顏色）bordercolorlight（邊框明亮部分顏色）bordercolordark（邊框昏暗部分顏色）使用表格第5頁<TD>標(biāo)簽屬性有：Align（水平對齊方式）valign（垂直對齊方式）width（寬度）height（高度）bgcolor（單元格背景色）colspan（跨占列數(shù)，缺省值為1)rowspan（跨占行數(shù)，缺省值為1）使用表格第6頁二、表格對齊1.表格在頁面中對齊：（1）直接在<TABLE>中使用align屬性（2）將<TABLE>放在<DIV

align=“”>與</DIV>之間2.表格內(nèi)容水平對齊：在<TR>、<TH>、<TD>內(nèi)使用align屬性3.表格內(nèi)容垂直對齊：在<TR>、<TH>、<TD>內(nèi)使用valign屬性（取值為top/middle\bottom）創(chuàng)建表格第8章使用表格使用表格第7頁三、使用表格設(shè)計(jì)網(wǎng)頁布局（一）控制表格和單元格大小使用width和height屬性來定義表格或單元格大小，其取值能夠是象素或百分比。例：<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>控制表格和單元格大小</title></head><body><tableborderaligh="center"><trheight="400"><tdwidth="200"> <tdwidth="300"> <tdwidth="200"> <tr><tdcolspan="3"height="100"> </table></body></html>第8章使用表格使用表格第8頁第3章文字與段落（二）設(shè)置表格及單元格背景能夠在<TABLE>、<TR>、<TH>、<TD>等標(biāo)識內(nèi)使用bgcolor或background屬性來定義背景色或背景圖片。（三）使用嵌套表格在給頁面布局時，非常有效一個方法就是將表格嵌套。只要將表格作為一個單元格內(nèi)容，放在<TD>與</TD>之間即可。例：<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>使用嵌套表格</title></head><body><tablealign=centercellspacing=0cellpadding=0width=619><tr><tdalign="left"height=30bgcolor="blue"><p><fontsize=2color=white>  當(dāng)前位置：

<ahref="#"><fontcolor=white>首頁</font></a>>

<ahref="#"><fontcolor=white>新聞</font></a>>

<ahref="#"><fontcolor=white>個人天地</font></a>>使用表格第9頁<tr><tdalign="middle"valign="top"height="345"><br><tablebordercellspacing=0cellpadding=5width=606><tr><tdheight=253width=85bgcolor="99ccff"> <tdvalign="top"height="253"width="495"><br><p>在線聽歌：

<ul><li><ahref="#">一千年以后</a><li><ahref="#">女人花</a><li><ahref="#">只要有你</a>

</ul>

</table>

<palign=center><fontsize=2>|<ahref="#">首頁</a>|<ahref="#">網(wǎng)頁制作</a>|<ahref="#">讀者服務(wù)</a>|<ahref="#">聯(lián)絡(luò)我們</a></font></table></body></html>使用表格第10頁四、表格布局綜合應(yīng)用在很多網(wǎng)頁上，經(jīng)常使用各種細(xì)線進(jìn)行頁面布局，從而使頁面到達(dá)簡練明快、不呆板效果。（一）表格框線效果制作關(guān)鍵點(diǎn)：1.將<table>中bgcolor屬性設(shè)為要顯示線顏色；2.將<table>中cellspacing屬性設(shè)為細(xì)線粗細(xì)（值為1）；3.將單元格或行bgcolor屬性設(shè)為不一樣于表格<table>中bgcolor值（通常為white）第8章使用表格使用表格第11頁例：<html><head><title>表格框線效果</title></head><body><tablealign=centercellspacing=1cellpadding=5bgcolor="pink"><trbgcolor="white"><tdwidth=200align=center><b>我們與時間</b>

<trbgcolor="white"><tdalign=middle>年月日時分秒，<br><br>是我們給時間定義單位，<br><br>也是時間度量我們生命尺度。<br><br>有些人說，時間飛逝，<br><br>錯矣！<br><br>時間永恒，是我們離去！<br><br>

</table></body></html>第8章使用表格使用表格第12頁（二）橫豎分隔線效果制作關(guān)鍵點(diǎn)：1.將<table>中cellspacing=0cellpadding=0；2.將要做為細(xì)線單元格bgcolor屬性設(shè)為細(xì)線顏色；3.將單元格width屬性（豎線）或height（橫線）設(shè)為細(xì)線粗細(xì)，為1（該單元格中不能有任何內(nèi)容）。第8章使用表格使用表格第13頁例：<html><head><title>橫豎分隔線效果</title></head><body><tablealign=centercellspacing=0cellpadding=0><trheight=100><tdwidth=100> <tdwidth=1bgcolor=black><tdwidth=600><h1align=center><fontface=幼圓>良言</font></h1><trheight=1><tdcolspan=3bgcolor=black><trheight=300><tdwidth=100> <tdwidth=1bgcolor=black><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

提交評論