第6章表格與表單_第1頁(yè)
第6章表格與表單_第2頁(yè)
第6章表格與表單_第3頁(yè)
第6章表格與表單_第4頁(yè)
第6章表格與表單_第5頁(yè)
已閱讀5頁(yè)，還剩27頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

※掌握創(chuàng)建表格的HTML標(biāo)記；※掌握表格的CSS樣式控制；※掌握創(chuàng)建表單的HTML標(biāo)記；※掌握表單的CSS樣式控制。

第6章表格與表單學(xué)習(xí)目標(biāo)：第6章表格與表單6.1表格案例：學(xué)生信息表制作學(xué)生信息表，瀏覽效果如圖6-1所示。具體要求如下：（1）創(chuàng)建一個(gè)6行7列的表格。（2）設(shè)置表格標(biāo)題——學(xué)生信息表。（3）在表格標(biāo)記中添加相應(yīng)文本內(nèi)容，并用<th>標(biāo)記為表格設(shè)置表頭。（4）通過(guò)CSS整體控制表格邊框樣式。（5）通過(guò)CSS設(shè)置單元格邊框樣式。第6章表格與表單6.2.1表格標(biāo)記例6-1在網(wǎng)頁(yè)上創(chuàng)建如圖6-2所示的簡(jiǎn)單表格。文件名：6-1.html6.2表格相關(guān)知識(shí)第6章表格與表單代碼如下：<body><h2>學(xué)生成績(jī)表</h2><tableborder="1"><tr><th>學(xué)號(hào)</th><th>姓名</th><th>性別</th><th>成績(jī)</th></tr><tr><td>01</td><td>馬麗文</td><td>女</td><td>94</td></tr><tr><td>02</td><td>牛濤</td><td>男</td><td>92</td></tr><tr><td>03</td><td>張軍力</td><td>男</td><td>98</td></tr></table></body>第6章表格與表單創(chuàng)建表格的基本標(biāo)記有：<table></table>：用于定義一個(gè)表格。<tr></tr>：用于定義表格的一行，該標(biāo)記必須包含在<table></table>中，表格有幾行，在<table></table>中就要有幾對(duì)tr></tr>標(biāo)記。<th></th>：用于定義表頭的單元格，該標(biāo)記必須包含在<tr></tr>中，表頭行有幾個(gè)單元格，在<tr></tr>中就要有幾對(duì)<th></th>標(biāo)記。該單元格中的文字自動(dòng)設(shè)為粗體、在單元格中居中對(duì)齊顯示。<td></td>：用于定義表格的普通單元格，該標(biāo)記必須包含在<tr></tr>中，一行有幾個(gè)單元格，在<tr></tr>中就要有幾對(duì)<td></td>標(biāo)記。該單元格中的文字自動(dòng)設(shè)為左對(duì)齊顯示。在例6-1的代碼中，在<table>標(biāo)記中用到了border屬性，其作用是給表格添加邊框，如果卻掉該屬性，則表格默認(rèn)情況下無(wú)邊框。默認(rèn)情況下，表格的寬度和高度靠其自身的內(nèi)容來(lái)支撐。如果要進(jìn)一步設(shè)置表格的外觀樣式，可以設(shè)置表格的相關(guān)屬性來(lái)實(shí)現(xiàn)。

第6章表格與表單6.2.2<table>標(biāo)記的屬性屬性名作用屬性值border設(shè)置表格的邊框像素width設(shè)置表格的寬度像素height設(shè)置表格的高度像素align設(shè)置表格的對(duì)齊方式left｜c(diǎn)enter｜rightbgcolor設(shè)置表格的背景顏色預(yù)定義的顏色值｜#RGB｜rgb()background設(shè)置表格的背景圖像URL地址cellspacing設(shè)置單元格與單元格之間的空白間距默認(rèn)為2像素cellpadding設(shè)置單元格與邊框之間的空白間距默認(rèn)為1像素第6章表格與表單6.2.2<table>標(biāo)記的屬性例6-2網(wǎng)頁(yè)上創(chuàng)建如圖6-3所示的表格。文件名：6-2.html第6章表格與表單修改6-1.html中的代碼如下：<body><h2align="center">學(xué)生成績(jī)表</h2><tableborder="5"align="center"width="400"height="150"="#99FFCC"cellpadding="3"cellspacing="5"bgcolor="#99FFCC"><tr><th>學(xué)號(hào)</th><th>姓名</th><th>性別</th><th>成績(jī)</th></tr><tr><td>01</td><td>馬麗文</td><td>女</td><td>94</td></tr><tr><td>02</td><td>牛濤</td><td>男</td><td>92</td></tr>第6章表格與表單6.2.3<tr>標(biāo)記的屬性屬性名作用屬性值height設(shè)置行的高度像素align設(shè)置一行內(nèi)容的水平對(duì)齊方式left｜c(diǎn)enter｜rightvalign設(shè)置一行內(nèi)容的垂直對(duì)齊方式top｜middle｜bottombgcolor設(shè)置行的背景顏色預(yù)定義的顏色值｜#RGB｜rgb()background設(shè)置行的背景圖像URL地址第6章表格與表單例6-3在網(wǎng)頁(yè)上創(chuàng)建如圖6-4所示的表格。文件名：6-3.html第6章表格與表單代碼如下：<h2align="center">學(xué)生成績(jī)表</h2><tableborder="1"align="center"width="400"cellpadding="0"cellspacing="0">

<trheight="50"bgcolor="#CCCCCC"><th>學(xué)號(hào)</th><th>姓名</th><th>性別</th><th>成績(jī)</th></tr><tralign="center"><td>01</td><td>馬麗文</td><td>女</td><td>94</td></tr>……第6章表格與表單6.2.4<th>和<td>標(biāo)記的屬性屬性名作用屬性值width設(shè)置單元格的寬度像素height設(shè)置單元格的高度像素align設(shè)置單元格內(nèi)容的水平對(duì)齊方式left｜c(diǎn)enter｜rightvalign設(shè)置單元格內(nèi)容的垂直對(duì)齊方式top｜middle｜bottombgcolor設(shè)置單元格的背景顏色預(yù)定義的顏色值｜#RGB｜rgb()background設(shè)置單元格的背景圖像URL地址colspan

設(shè)置單元格合并的列數(shù)正整數(shù)rowspan設(shè)置單元格合并的行數(shù)正整數(shù)第6章表格與表單例6-4在網(wǎng)頁(yè)上創(chuàng)建如圖6-5所示的表格。文件名：6-4.html第6章表格與表單代碼如下：<h2align="center">學(xué)生情況表</h2><tableborder="1"align="center"width="400"cellpadding="0"cellspacing="0"><trheight="50"bgcolor="#CCCCCC"><thcolspan="3">基本信息</th>

<thcolspan="3">成績(jī)信息</th></tr>……注意：在<th>標(biāo)記中使用colspan屬性實(shí)現(xiàn)單元格的合并，使用bgcolor設(shè)置了兩個(gè)單元格的背景顏色為紅色。第6章表格與表單6.2.5使用CSS設(shè)置表格樣式例6-5將例6-4創(chuàng)建的表格使用CSS屬性設(shè)置表格的樣式。效果如圖6-6所示。文件名：6-5.html，代碼如下：第6章表格與表單…<body><h2>學(xué)生情況表</h2><table><trclass="firstLine"><thcolspan="3">基本信息</th><thcolspan="3">成績(jī)信息</th></tr><tr><th>學(xué)號(hào)</th><th>姓名</th><th>性別</th><th>數(shù)學(xué)</th><th>語(yǔ)文</th><th>英語(yǔ)</th></tr>…1.搭建表格結(jié)構(gòu)：2.設(shè)置CSS樣式：<styletype="text/css">h2{text-align:center;}table{width:400px;height:200px;border:1pxsolid#000;border-collapse:collapse;margin:0auto;}th,td{border:1pxsolid#000;}.firstLine{ background:#dedede; height:50px;}.redTd{

background:#f00;}</style>第6章表格與表單6.3表格案例實(shí)現(xiàn)第6章表格與表單1.搭建表格結(jié)構(gòu)<h3>學(xué)生信息表</h3><tableclass="gridtable"><tr><th>學(xué)號(hào)</th><th>姓名</th><th>性別</th><th>家庭住址</th><th>聯(lián)系電話</th><th>QQ</th><th>電子郵箱</th></tr><tr><td>2016020101</td><td>王紅俠</td><td>女</td><td>山東濟(jì)寧市</td><td>lt;/td><td>642076813</td><td>whongx@126.com</td></tr>……2.設(shè)置CSS樣式<styletype="text/css">h3{ text-align:center;}table.gridtable{ font-family:verdana,arial,sans-serif; font-size:12px; color:#333; border:1px#666solid; border-collapse:collapse; margin:0auto;}table.gridtableth{ border:1pxsolid#666; padding:8px; background-color:#dedede;}table.gridtabletd{ border:1pxsolid#666; padding:8px; background-color:#fff;}</style>第6章表格與表單6.4表單案例：用戶注冊(cè)表第6章表格與表單6.5表單相關(guān)知識(shí)6.5.1認(rèn)識(shí)表單表單是用于實(shí)現(xiàn)瀏覽者與網(wǎng)頁(yè)制作者之間信息交互的一種網(wǎng)頁(yè)對(duì)象。圖6-10所示是用戶登錄信息表單。表單是允許瀏覽者進(jìn)行輸入的區(qū)域，可以使用表單從客戶端收集信息。瀏覽者在表單中輸入信息，然后將這些信息提交給網(wǎng)站服務(wù)器，服務(wù)器中的應(yīng)用程序會(huì)對(duì)這些信息進(jìn)行處理，進(jìn)行響應(yīng)，這樣就完成了瀏覽者和網(wǎng)站服務(wù)器之間的交互。第6章表格與表單6.5.2表單標(biāo)記表單的基本語(yǔ)法及格式為：<formname="表單名稱(chēng)"action="URL地址"method="提交方式">…</form><form>標(biāo)記主要處理表單結(jié)果的處理和傳送，常用屬性的含義如下：name屬性：給定表單名稱(chēng)，以區(qū)分同一個(gè)頁(yè)面中的多個(gè)表單。action屬性：指定處理表單信息的服務(wù)器端應(yīng)用程序。method屬性：用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。其中，get為默認(rèn)值，這種方式提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差，且有數(shù)據(jù)量的限制。而post方式的保密性好，并且無(wú)數(shù)據(jù)量的限制，使用method="post"可以大量的提交數(shù)據(jù)。注意：<form>標(biāo)記的屬性并不會(huì)直接影響表單的顯示效果。要想讓一個(gè)表單有意義，就必須在<form>與</form>之間添加相應(yīng)的表單控件。第6章表格與表單6.5.3表單控件

1.input控件Input控件用于定義文本框、單選按鈕、復(fù)選框、提交按鈕、重置按鈕等。其基本語(yǔ)法格式如下：<inputtype=“控件類(lèi)型”/>說(shuō)明：<input/>標(biāo)記為單標(biāo)記，type屬性取值如表6-4所示。屬性屬性值作用typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域第6章表格與表單6.5.3表單控件

2.textarea控件當(dāng)定義input控件的type屬性值為text時(shí)，可以創(chuàng)建一個(gè)單行文本輸入框。如果需要輸入大量信息，字?jǐn)?shù)沒(méi)有限制時(shí)，就需要使用<textarea></textarea>標(biāo)記。例如，在用戶信息注冊(cè)表單中，輸入個(gè)人簡(jiǎn)歷時(shí)的控件就是textarea控件。其基本語(yǔ)法格式如下：<textareacols="每行中的字符數(shù)"rows="顯示的行數(shù)">

文本內(nèi)容</textarea>第6章表格與表單6.5.3表單控件

3.select控件select控件提供下拉列表選項(xiàng)，供用戶進(jìn)行選擇。下拉框通過(guò)select標(biāo)記和option標(biāo)記來(lái)定義。例如，在用戶信息注冊(cè)表單中，職業(yè)的選擇項(xiàng)就使用下拉列表實(shí)現(xiàn)。其基本語(yǔ)法格式如下：<select><option>選項(xiàng)1</option><option>選項(xiàng)2</option><option>選項(xiàng)3</option>...</select>第6章表格與表單6.5.4使用CSS設(shè)置表單樣式

例6-6創(chuàng)建一個(gè)用戶登錄表單，并使用CSS對(duì)表單樣式進(jìn)行設(shè)置，其效果如下圖所示。文件名：6-6.html。第6章表格與表單<formaction="#"method="post"><tableclass="content"><tr><tdclass="left">用戶名：</td><td><inputtype="text"value=""class="num"/></td></tr><tr><tdclass="left">密碼：</td><td><inputtype="password"class="pas"/></td></tr><tr><td> </td><tdclass="btn"><inputtype="button"value=""/></td></tr></table></form>1.創(chuàng)建表單，用表格進(jìn)行布局

第6章表格與表單<styletype="text/css">body{ font-size:12px; font-family:"宋體";}body,table,form,input{/*重置瀏覽器的默認(rèn)樣式*/ padding:0; margin:0; border:0;}.content{/*表格的樣式*/ width:300px; height:150px; padding-top:20px; margin:50pxauto;/*表格在瀏覽器中居中*/ background:#DCF5FA;}.left{/*左側(cè)單元格的樣式*/ width:90px; text-align:right;}.num,.pas{/*對(duì)文本框設(shè)置相同的寬、高、邊框和內(nèi)邊距*/ width:152px; height:18px; border:1pxsolid#38a1bf; padding:2px2px2px22px;}2.設(shè)置CSS樣式

.num{/*定義第一個(gè)文本框的背景和文本顏色*/background:url(images/1.jpg)no-repeat5pxcenter#fff;color:#999;}.pas{/*定義第二個(gè)文本框的背景*/background:url(images/2.jpg)no-repeat5pxcenter#fff;}.btninput{/*定義按鈕的樣式*/ width:87px; height:24px; background:url(images/3.jpg)no-repeat;}</style>第6章表格與表單在使用CSS控制表單樣式時(shí)，注意以下幾個(gè)問(wèn)題。（1）由于form是塊元素，重置瀏覽器的默認(rèn)樣式時(shí)，需要清除其內(nèi)邊距padding和外邊距margin。（2）input控件默認(rèn)有邊框效果，當(dāng)使用<input/>標(biāo)記定義各種按鈕時(shí)，通常需要清除其邊框。（3）通常情況下需要對(duì)文本框和密碼框設(shè)置2到3像素的內(nèi)邊距，以使用戶輸入的內(nèi)容不會(huì)緊貼輸入框。第6章表格與表單6.6表單案例實(shí)現(xiàn)第6章表格與表單新建一個(gè)網(wǎng)頁(yè)文件，文件名稱(chēng)為：reg.html。雙擊文件reg.html，打開(kāi)該文件，添加頁(yè)面結(jié)構(gòu)代碼，然后設(shè)置CSS

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 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ì)用戶上傳內(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)論