第六章表格與表單表格的創(chuàng)建表單相關標記表格樣式的控制表單樣式的控制6.1表格標記6.2CSS控制表格樣式6.3認識表單6.4創(chuàng)建表單6.5表單控件6.6CSS控制表單樣式6.7階段案例-制作注冊界面6.1表格標記6.1.1創(chuàng)建表格在HTML網(wǎng)頁中，要想創(chuàng)建表格，就需要使用表格相關的標記。創(chuàng)建表格的基本語法格式如下：<table><tr> <td>單元格內(nèi)的文字</td> ...</tr>...</table>6.1表格標記6.1.1創(chuàng)建表格在上面的語法中包含三對HTML標記，分別為<table></table>、<tr></tr>、<td></td>，他們是創(chuàng)建表格的基本標記，缺一不可，下面對他們進行具體地解釋。<table></table>：用于定義一個表格。<tr></tr>：用于定義表格中的一行，必須嵌套在<table></table>標記中，在<table></table>中包含幾對<tr></tr>，就有幾行表格。<td></td>：用于定義表格中的單元格，必須嵌套在<tr></tr>標記中，一對<tr></tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個單元格）。6.1表格標記6.1.1創(chuàng)建表格注意:學習表格的核心是學習<td></td>標記，他就像一個容器，可以容納所有的元素，<td></td>中甚至可以嵌套表格<table></table>。但是<tr></tr>中只能嵌套<td></td>，直接在<tr></tr>標記中輸入文字的做法是不被允許的。6.1表格標記6.1.2<table>標記的屬性<table>標記的屬性如下表所示。屬性名含義常用屬性值border設置表格的邊框（默認border="0"無邊框）

像素值cellspacing設置單元格與單元格邊框之間的空白間距像素值（默認為2像素）cellpadding設置單元格內(nèi)容與單元格邊框之間的空白間距像素值（默認為1像素）width設置表格的寬度像素值height設置表格的高度像素值align設置表格在網(wǎng)頁中的水平對齊方式left、center、rightbgcolor設置表格的背景顏色預定義的顏色值、十六進制#RGB、rgb(r,g,b)background設置表格的背景圖像url地址6.1表格標記6.1.2<table>標記的屬性1、border屬性在<table>標記中，border屬性用于設置表格的邊框，默認為0。代碼如下：2、cellspacing屬性cellspacing屬性用于設置單元格與單元格邊框之間的空白間距，默認為2px。代碼如下：<tableborder=“20”cellspacing=“20”>

<tableborder=“20”>

6.1表格標記6.1.2<table>標記的屬性3、cellpadding屬性cellpadding屬性用于設置單元格內(nèi)容與單元格邊框之間的空白間距，默認為1px。代碼如下：注意:cellpadding類似于盒子模型的內(nèi)邊距padding，指的是單元格內(nèi)部的距離，cellspacing則指的是外部單元格與單元格之間的距離?？梢越Y合盒子模型的內(nèi)外邊距理解cellpadding與cellspacing的不同。<tableborder=“20”cellspacing=“20”cellpadding=“20”>

6.1表格標記6.1.2<table>標記的屬性4、width與height屬性默認情況下，表格的寬度和高度靠其自身的內(nèi)容來支撐。要想更改表格的尺寸，就需對其應用寬度屬性width或高度屬性height。注意:當為表格標記<table>同時設置width、height和cellpadding屬性時，cellpadding的顯示效果將不太容易觀察，所以一般在未給表格設置寬高的情況下測試cellpadding屬性。6.1表格標記6.1.2<table>標記的屬性5、align屬性align屬性用于定義元素的水平對齊方式，其可選屬性值為left、center、right。值得一提的是，當對<table>標記應用align屬性時，控制的為表格的水平對齊方式，單元格中的內(nèi)容不受影響。6、bgcolor屬性在<table>標記中，bgcolor屬性用于設置表格的背景顏色。7、background屬性在<table>標記中，background屬性用于設置表格的背景圖像。6.1表格標記6.1.3<tr>標記的屬性制作網(wǎng)頁時，有時需要表格中的某一行特殊顯示，這時就可以為行標記<tr>定義屬性。屬性名含義常用屬性值height設置行高度

像素值

align設置一行內(nèi)容的水平對齊方式left、center、rightvalign設置一行內(nèi)容的垂直對齊方式top、middle、bottombgcolor設置行背景顏色預定義的顏色值、十六進制#RGB、rgb(r,g,b)background設置行背景圖像url地址6.1表格標記6.1.3<tr>標記的屬性值得一提的是，學習<tr>的屬性時需要注意以下幾點：<tr>標記無寬度屬性width，其寬度取決于表格標記<table>。可以對<tr>標記應用valign屬性，用于設置一行內(nèi)容的垂直對齊方式。雖然可以對<tr>標記應用background屬性，但是在<tr>標記中此屬性兼容問題嚴重。6.1表格標記6.1.4<td>標記的屬性在網(wǎng)頁制作過程中，有時僅僅需要對某一個單元格進行控制，這時就可以為單元格標記<td>定義屬性，其常用屬性如下表所示。屬性名含義常用屬性值width設置單元格的寬度像素值

height設置單元格的高度像素值align設置單元格內(nèi)容的水平對齊方式left、center、rightvalign設置單元格內(nèi)容的垂直對齊方式top、middle、bottombgcolor設置單元格的背景顏色預定義的顏色值、十六進制#RGB、rgb(r,g,b)background設置單元格的背景圖像url地址colspan設置單元格橫跨的列數(shù)（用于合并水平方向的單元格）正整數(shù)rowspan設置單元格豎跨的行數(shù)（用于合并豎直方向的單元格）正整數(shù)6.1表格標記6.1.4<td>標記的屬性注意:1、在<td>標記的屬性中，重點掌握colspan和rolspan，其他的屬性了解即可，不建議使用，均可用CSS樣式屬性替代。2、當對某一個<td>標記應用width屬性設置寬度時，該列中的所有單元格均會以設置的寬度顯示。3、當對某一個<td>標記應用height屬性設置高度時，該行中的所有單元格均會以設置的高度顯示。6.1表格標記6.1.5<th>標記及其屬性表頭一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設置了表頭的表格。設置表頭非常簡單，只需用表頭標記<th></th>替代相應的單元格標記<td></td>即可。6.1表格標記6.1.6表格的結構在使用表格進行布局時，可以將表格劃分為頭部、主體和頁腳，具體如下所示：<thead></thead>：用于定義表格的頭部，必須位于<table></table>標記中，一般包含網(wǎng)頁的logo和導航等頭部信息。<tfoot></tfoot>：用于定義表格的頁腳，位于<table></table>標記中<thead></thead>標記之后，一般包含網(wǎng)頁底部的企業(yè)信息等。<tbody></tbody>：用于定義表格的主體，位于<table></table>標記中<tfoot></tfoot>標記之后，一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容。6.2CSS控制表格樣式6.2.1CSS控制表格邊框而使用CSS邊框樣式屬性border可以輕松地控制表格的邊框。注意:1、border-collapse屬性的屬性值除了collapse（合并）之外，還可以為separate（分離），默認為separate。2、當表格的border-collapse屬性設置為collapse時，HTML中設置的cellspacing屬性值無效。3、行標記<tr>無border樣式屬性，本書不再做具體的演示，初學者可以自己測試加深理解。6.2CSS控制表格樣式6.2.2CSS控制單元格邊距使用<table>標記的屬性美化表格時，可以通過cellpadding和cellspacing分別控制單元格內(nèi)容與邊框之間的距離以及相鄰單元格邊框之間的距離。注意:行標記<tr>無內(nèi)邊距屬性padding和外邊距屬性margin，本書不再做具體的演示，初學者可以自己測試加深理解。6.2CSS控制表格樣式6.2.3CSS控制單元格的寬高單元格的寬度和高度，有著和其他元素不同的特性，主要表現(xiàn)在單元格之間的互相影響上。對同一行中的單元格定義不同的高度，或?qū)ν涣兄械膯卧穸x不同的寬度時，最終的寬度或高度將取其中的較大者。6.3認識表單在HTML中，一個完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個部分構成，如下圖所示，即為一個簡單的HTML表單界面及其構成。6.3認識表單對于表單構成中的表單控件、提示信息和表單域，初學者可能比較難理解，對他們的具體解釋如下：表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。提示信息：一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。表單域：他相當于一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺服務器。6.3認識表單在表單的3部分構成中，表單控件是表單的核心，常用的表單控件如下表所示。表單控件描述<input/>表單輸入控件（可定義多種表單項）<textarea></textarea>定義多行文本框<select></select>定義一個下拉列表（必須包含列表項）6.4創(chuàng)建表單在HTML中，<form></form>標記被用于定義表單域，即創(chuàng)建一個表單，以實現(xiàn)用戶信息的收集和傳遞，<form></form>中的所有內(nèi)容都會被提交給服務器。創(chuàng)建表單的基本語法格式如下：在上面的語法中，<form>與</form>之間的表單控件是由用戶自定義的，action、method和name為表單標記<form>的常用屬性。Action在表單收集到信息后，需要將信息傳遞給服務器進行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的服務器程序的url地址。<formaction="url地址"method="提交方式"name="表單名稱">

各種表單控件</form>6.4創(chuàng)建表單methodmethod屬性用于設置表單數(shù)據(jù)的提交方式，其取值為get或post。namename屬性用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單。注意:<form>標記的屬性并不會直接影響表單的顯示效果。要想讓一個表單有意義，就必須在<form>與</form>之間添加相應的表單控件。6.5表單控件6.5.1input控件input控件的基本語法格式如下：在上面的語法中，<input/>標記為單標記，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，<input/>標記還可以定義很多其他的屬性，其常用屬性如下表所示。<inputtype=“控件類型”>6.5表單控件6.5.1input控件屬性屬性值描述typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域name由用戶自定義控件的名稱value由用戶自定義input控件中的默認文本值size正整數(shù)input控件在頁面中的顯示寬度readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認被選中的項maxlength正整數(shù)控件允許輸入的最多字符數(shù)6.5表單控件6.5.2textarea控件如果需要輸入大量的信息，就需要用到<textarea></textarea>標記。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語法格式如下：<textareacols="每行中的字符數(shù)"rows="顯示的行數(shù)">

文本內(nèi)容</textarea>6.5表單控件6.5.2textarea控件在上面的語法格式中，cols和rows為<textarea>標記的必須屬性，其中cols用來定義多行文本輸入框每行中的字符數(shù)，rows用來定義多行文本輸入框顯示的行數(shù)，他們的取值均為正整數(shù)。注意:各瀏覽器對cols和rows屬性的理解不同，當對textarea控件應用cols和rows屬性時，多行文本輸入框在各瀏覽器中的顯示效果可能會有差異。所以在實際工作中，更常用的方法是使用CSS的width和height屬性來定義多行文本輸入框的寬高。6.5表單控件6.5.3select控件下圖為一個下拉菜單，當點擊下拉符號“

”時，會出現(xiàn)一個選擇列表。在HTML中，要想制作如下圖所示的下拉菜單，就需要使用select控件。6.5表單控件6.5.3select控件使用select控件定義下拉菜單的基本語法格式如下：在上面的語法中，<select></select>標記用于在表單中添加一個下拉菜單，<option></option>用于定義下拉菜單中的具體選項，每對<select></select>中至少應包含一對<option></option>。<select><option>選項1</option><option>選項2</option><option>選項3</option>...</se