表格製作

1.表格基礎

建立一個簡單的表格至少有三個標籤組成，分別是<table>,<tr>,<td>標籤。

　　table：表格，定義的是整個的表格大結構。

　　tr：table rows，表格的行，定義的是表格由多少行組成。

　　td：table data, 表格資料，也叫表格單元格，定義每一行內部的單元格

三者的關係：table>tr>td. 一個表格中有多少行，每行中有多少個單元格。

① <table>的屬性

<table>標籤可以新增border邊框屬性。 屬性值：數字，表示畫素值。 表格的單元格之間有預設的空隙，會導致雙線邊框。 解決方法：設定標籤樣式屬性style。 屬性值：border-collapse : collapse; 表示邊框塌陷。 ②表頭單元格 • 如果要繪製表頭，使用標籤<th>，table head data，表頭單元格。 • 在表格中繪製的時候，替換的是<td>的位置。 • <th>標籤中自帶預設的css樣式效果，文字顯示粗體居中。 2.合併單元格 常見的表格操作中，有一種叫做合併單元格的，可以通過單元格屬性進行設定。 ① 單元格屬性 • 表格的單元格可以進行合併，通過<th>和<td>的兩個屬性可以進行合併設定。 • rowspan：跨行和並。上下的合併。 • colspan：跨列合併。左右的合併。 • 屬性值：數字，數字是幾表示跨幾行或跨幾列合併。 ② 製作技巧 a.先列出所有行<tr>，以最小單元格為標準。 b.再新增每一行的<td>或<th>單元格。 c.劃分單元格所在行時，頂邊對齊的屬於同一行。 d.將所有行和列寫完後，再檢視哪個單元格有跨行或跨列，屬性值的個數要參考最小 的單元格。 3.表格分割槽 一個完整的表格分為四個大的區域：表格標題，表格頭部，表格頁尾。 ① 分割槽標籤 • <table>內部最直接的子級包含四個分割槽標籤，他們都是雙標籤。 caption：表格的標題，內部書寫標題文字。 thead：table head，表格的頭部。內部巢狀tr>th。 tbody：table body，表格的主體。內部巢狀tr>td。 tfoot：table foot，表格的頁尾。內部巢狀tr>td。 • 四個分割槽可以選擇性的進行組合。 • 注意：不論書寫順序如何顛倒，瀏覽器中的載入順序都是自動按照caption、thead、 tbody、tfoot執行的。 ②製作技巧 a.先書寫大分割槽標籤結構。 b.填充每個分割槽的內部內容 c.如果有合併單元格內容，進行單元格合併。 表單 1.表單的組成 • HTML 表單用於蒐集不同型別的使用者輸入，表單元素就是網頁中提供使用者進行輸入或點選 的小控制元件。 • 在HTML中，一個完整的表單通常由表單域、提示資訊和表單控制元件（也稱為表單元素）3個 部分構成。 2.功能 表單域：相當於一個容器，用來容納所有的表單控制元件和提示資訊，可以通過他定義處理表單資料所用程式的url地址，以及資料提交到伺服器的方法。如果不定義表單域，表單中的資料就無法傳送到後臺伺服器。 提示資訊：一個表單中通常還需要包含一些說明性的文字，提示使用者進行填寫和操作。 表單控制元件：包含了具體的表單功能項，如單行文字輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等。 3.表單域標籤 • HTML表單域使用<form>標籤進行定義。 • <form>標籤是一個功能性標籤，填寫的表單資訊要想正確的提交到後臺伺服器，必須放一個<form>標籤之內。 • <form>標籤為雙標籤，容器級標籤。 4.表單域標籤屬性

<form action="xxx.php" method="post/get" name="message">
     提示資訊及表單控制元件書寫位置 
</form>

表單元素

1.<input>標籤

• <input>標籤是最重要的一個表單元素。 • <input>標籤為單標籤，本身相當於一個特殊的文字。 • <input>標籤需要通過標籤屬性實現各種功能。 <input>標籤常用屬性

①單行文字輸入框：text

<input>標籤的type屬性值為text。 定義提供使用者輸入的單行文字的輸入框，不能輸入多行文字。 常用value屬性定義預設的輸入文字。

<input type="text" value="預設輸入文字" >

②密碼輸入框：password

<input>標籤的type屬性值為password。 定義提供使用者輸入的密碼框。 password 欄位中的字元會被做掩碼處理（顯示為星號或實心圓）。

<input type="password">

③單選框：radio

<input>標籤的type屬性值為radio。 定義提供使用者點選選擇的單選框。 單選框一般都是成組出現，多個單選框組成一組選擇的情況。 同一組單選框之間必須是互斥的關係，通過給同一組單選框都設定相同的name屬性 值實現。

<input type="radio" name="sex" /> 男 
<input type="radio" name="sex" /> 女

④複選框：checkbox

<input>標籤的type屬性值為checkbox。 定義提供使用者點選選擇的多選框。 複選框允許使用者在有限數量的選項中選擇零個或多個選項。 同一組複選框最好也設定相同的name屬性。

<input type="checkbox" name="hobby" /> 唱歌 
<input type="checkbox" name="hobby" /> 程式碼 
<input type="checkbox" name="hobby" /> 運動

注：

單選框和複選框都可以提前設定預設選中項。 <input>標籤有一個checked屬性，如果不設定表示預設沒有選中。 屬性值如果設定為"checked"，表示該項預設被選中。

<input type="radio" name="sex" checked="checked" /> 男
<input type="checkbox" name="hobby" checked="checked" /> 唱歌

⑤ 按鈕

<input>標籤有四種形式的按鈕：

⑥檔案上傳：file

<input>標籤的type屬性值為file。 定義檔案上傳按鈕，可以提供使用者選擇本地檔案進行上傳伺服器。

<input type="file">

使用input的multiple屬性，可以決定是否可以選擇多個檔案。

<input type="file" multiple="multiple" />

2.<textarea>屬性

<textarea>有兩個標籤屬性，可以設定顯示區域大小。 rows：行，屬性值是數字，數字是幾表示文字框顯示的最大行數，如果超過了行數， 會被隱藏並且出現滾動條。 cols：列，屬性值是數字，數字是幾，表示在出現滾動條之後，每一行顯示的最大字 節數（一個漢字按2位元組計算）。

<textarea cols="30" rows="10">預設輸入文字</textarea>

3. 下拉選單

①標籤

下拉選單需要至少兩個標籤完成結構： <select>：選擇，表示定義下拉選單整體結構。 <option>：選項，表示定義下拉選單的每一項。 兩個標籤都是雙標籤，文字級標籤。 關係：select>option，option可以有任意多項。

<select> 
    <option>廣州</option> 
    <option>北京</option> 
    <option>重慶</option> 
    <option>上海</option> 
</select>

②預設選中項

預設情況下，選中的是第一項。 下拉選單可以通過給<option>標籤設定selected屬性，屬性值為selected，更改預設選中項。

<option selected="selected">北京</option>

③ 分組管理

下拉選單中如果選項變得複雜，可以將<option>進行分組管理。 可以使用<optgroup>標籤對選項進行分組，<optgroup>是一個雙標籤。 關係：select>optgroup>option <optgroup>可以設定一個label屬性，表示給這一組選項新增一個分組標籤名，分組標籤<optgroup>是不能被點選選擇的。

<select> 
    <optgroup label="國內"> 
        <option>廣州</option> 
        <option selected="selected">北京</option> 
    </optgroup> 
    <optgroup label="國外"> 
        <option>倫敦</option> 
        <option>巴黎</option> 
    </optgroup> 
</select>    

4. label標籤

所有的表單元素都可以通過繫結其他內容去擴大觸發點選範圍，這時需要使用一個<label>標籤。 <label>標籤的作用是幫表單元素定義標註（標記）。 如果將表單控制元件與提示內容使用<label>進行繫結後，當用戶滑鼠點選<label>內的提示內容時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上。 繫結方法一： a.給表單元素設定id屬性。 b.然後將需要繫結的其他內容用<label>標籤包裹。 c.給<label>標籤設定for屬性，屬性值為繫結的表單元素的id屬性值。

<input type="checkbox" name="hobby" id="sport" /> 
<label for="sport">運動</label>

繫結方法二：

如果繫結內容和表單元素寫在一起，可以化簡繫結寫法。 直接使用<label>標籤將繫結內容與表單元素一起進行巢狀。

<label><input type="radio" name="sex" />男</label>