day09-表格表單及統籌
阿新 • • 發佈：2021-01-04
文章目錄
回顧表單
表單的組成： 表單域： <form name=“” method=“” action=“ "></form> 表單控制元件 ： <input type="text" value=""/> 文字 <input type="password" value=""/> 密碼 <input type="button" value=""/> 空按鈕 <input type="submit" value=""/> 提交 <input type="reset" value=""/> 重置 <input type="checkbox" checked="checked" disabled="disabled"/> 複選按鈕 <input type="radio" name="rel"/> 單選按鈕
html基礎
表單
隱藏
<input type="hidden" name"">```
## 表單----內聯可置換元素
表單----內聯可置換元素
表單域下拉列表（選單） 語法： <select > <option>下拉選項1</option> <option>下拉選項2</option> </select> 表單多行文字域定義： 語法： <textarea name="" cols="" rows="" > </textarea> 說明： 多行文字。rows屬性和cols屬性用來設定文字輸入視窗的高度和寬度，單位是字元。 阻止瀏覽器對視窗的拖動設定:{resize:none;}（css屬性）
高階表單應用
表單欄位集
語法：<fieldset></fieldset>
說明：
相當於一個方框，在欄位集中可以包含文字和其他元素。該元素用於對錶單中的元素進行分組並在文件中區別標出文字。fieldset元素可以巢狀，在其內部可以在設定多個fieldset物件。disabled定義空間禁制可用；
欄位集標題
語法：<legend align="left/right/center"></legend> 說明： legend元素可以在fieldset物件繪製的方框內插入一個標題。legend元素必須是fieldset內的第一個元素
提示資訊標籤
語法：<label for="繫結的id名字"></label>
說明:
label元素用來定義標籤，為頁面上的其他元素指定提示資訊。要將label元素繫結到其他的控制元件上，可以將label元素的for屬性設定為與該控制元件的id屬性值相同。
上傳檔案框
語法：<input type="file"/>
說明：type屬性值新增的型別有：file檔案型別，可進行檔案的選擇
新增表格應用
表格的基本結構：
<table>
<tr>
<td></td>
</tr>
</table>
1、cellspacing="單元格與單元格之間的間距"
2、cellpadding=“單元格與內容之間的距離"
3、align="表格水平對齊方式" 取值：left、right、center、 valign=“垂直對齊” top\bottom\middle
4、合併單元格屬性：(td) 合併列： colspan=“所要合併的單元格的列數" 合併行： rowspan=“所要合併單元格的行數”
高階表格應用
單元格間距
語法:border-spacing:value
說明：
單元格間距(該屬性必須給table新增)
表示單元格邊框之間的距離
不可取負值
合併相鄰單元格表框
語法：border-collapse:separate/collapse;
說明：
作用：合併相鄰單元格邊框 (該屬性必須給table新增)
separate(邊框分開)預設值；
collapse(邊框合併)
無內容時單元格的設定
語法：empty-cells:show/hide;
說明：定義當單元格無內容時，是否顯示該單元格的邊框區域； show：顯示 ；hide：隱藏；
顯示單元格行和列的演算法（加快執行的速度）
語法：table-layout:auto/fixed
說明：
自動錶格佈局：列的寬度是由列單元格中沒有折行的最寬的內容設定的。
缺點：較慢（因為它需要在確定最終的佈局前訪問表格中的所有內容）。
優點：靈活 固定表格佈局 優點：加快執行的速度,允許瀏覽器更快的對錶格進行佈局。 缺點:不太靈活
表格列標題
語法：<th></th>列標題
說明：
th標記表示表格內的表頭單元格,是單元格標題；
caption標記表示表格的名稱，也叫表格標題。
設定表格標題的位置
caption-side:top/right/bottom/left
說明：
定義表格的caption物件放於表格的哪個位置，與caption物件一起使用；
top為預設值；
left,right位置只有火狐識別，
top,bottom IE6以上版本支援，IE6以下版本不支援其它屬性值，只識別top;
資料行分組
<thead></thead>表頭
<tbody></tbody>表體
<tfoot></tfoot>表尾
說明：一個Table中，只能包含一個thead,一個tfoot,但可包含多個tbody
thead 元素應該與 tbody 和 tfoot 元素結合起來使用。 tbody 元素用於對 HTML 表格中的主體內容進行分組， tfoot 元素用於對 HTML 表格中的表注（頁尾）內容進行分組。 如果要使用 thead、tfoot 以及 tbody 元素，就必須使用全部的元素。
提示：在預設情況下這些元素不會影響到表格的佈局。不過，可以使用 CSS 使這些元素改變表格的外觀。 詳細描述： thead、tfoot 以及 tbody 元素使我們有能力對錶格中的行進行分組。當建立某個表格時，也許希望擁有一個標題行，一些帶有資料的行，以及位於底部的一個總計行。
資料列分組
<colgroup span="value"></colgroup>雙標籤
<col span="value" />單標籤
說明：
1）col和colgroup元素會根據從左到右的順序依次對資料表格進行分組。
2）span屬性顯示指定相鄰幾列組成一組，span屬性值預設為1，預設時僅定義一列為一組。
Firefox、Chrome 以及 Safari 僅支援 colgroup 元素的 span 和 width 屬性
3）可以通過給table新增rules="groups"屬性來給分組列新增組的分割線。