HTML 表單和表格

一、使用表單標籤

　　網站使用 HTML 表單可與用戶進行交互，表單元素是容許用戶在表單中輸入內容，好比：文本框、文本域、單選框、複選框、下拉列表、按鈕等等，表單能夠把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就能夠處理表單傳過來的數據。表單使用表單標籤 <form> 來定義：

<form method="傳送方式" action="表單提交地址" name="表單名稱"></form>

 

　　注意：<from> 是一對閉合標籤，成對出現。method 屬性規定數據傳送的方式（get/post）。action 屬性規定當提交表單時用戶輸入的數據被傳送向何處，好比一個 PHP 頁面(demo.php)。name 屬性可設置表單的名稱。全部的表單控件都必須放在<from></from>標籤之間，不然用戶輸入的信息提交不到服務器上。

　　accept-charset 屬性規定服務器可處理的表單數據字符集。默認值是保留字符串 "UNKNOWN"，表示編碼爲包含 <form> 元素的文檔的編碼。

　　enctype 屬性規定在將表單數據發送到服務器以前如何對其進行編碼。注意：只有 method="post" 時才使用 enctype 屬性。

　　下面是2個新屬性：

　　autocomplete 屬性規定表單是否應該啓用自動完成功能。自動完成容許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基於以前鍵入過的值，應該顯示出在字段中填寫的選項。注意：autocomplete 屬性 "on" 適用於表單，"off" 適用於特定的輸入字段，反之亦然。默認值爲 on 規定啓用自動完成功能。瀏覽器會基於用戶以前鍵入的值自動完成值。off 則規定禁用自動完成功能。用戶必須在每次使用時輸入值到每一個字段中，瀏覽器不會自動完成輸入。

　　novalidate 屬性規定當提交表單時不對錶單數據進行驗證。

　　From 中的 Get 和 Post 方法：

　　(1)、Get 方式將表單中數據的按照 var=value 的形式，添加到 action 所指向的 URL 後面，而且二者使用「?」鏈接，而各個變量之間使用「&」鏈接；而 Post 方式是將表單中的數據放在 form 的數據體中，按照變量和值相對應的方式，傳遞到 action 所指向的 URL。以下 Get 方式傳送：

http://www.abc.com/demo.php?name=小白&password=12345678

 　　(2)、Get 方式是不安全的，由於在傳輸過程，數據被存放在請求的 URL 地址中，這樣容易形成信息泄漏。

　　(3)、Get 方式傳輸的數據量很是小，通常限制在 2KB 左右，可是執行效率卻比 Post 方法好；而 Post 方式傳遞的數據量相對較大，它是等待服務器來讀取數據，不過也有字節限制，這是爲了不對服務器用大量數據進行惡意攻擊，所以建議儘可能使用 Post 方法傳送數據，好比用戶註冊，使用 Get 方法請求數據，好比瀏覽貼子。

 

二、文本框

　　當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框，文本框也能夠轉化爲密碼輸入框。輸入域經過 <input> 標籤完成，該標籤規定了用戶能夠在其中輸入數據的輸入字段。輸入字段可經過多種方式改變，取決於 type 屬性。以下：

1 <form method="post" action="demo.php">
2     <label for="name">用戶名:</label>
3     <input type="text" name="username" id="name" value="小白"><br/>
4     <label for="pass">密　碼:</label>
5     <input type="password" name="password" id="pass" placeholder="請輸入密碼">
6 </form>

　　<input> 標籤用於定義輸入域，而 type 屬性規定了要顯示的輸入域的內容，type="text" 爲默認值，定義一個單行的文本字段輸入，默認顯示寬度爲 20 個字符。 name 屬性爲文本框命名，以備後臺程序調用。type="password" 定義密碼字段，密碼字段字符不會明文顯示，而是以星號或圓點替代。

　　value 屬性可爲文本框設置默認值，通常起到提示的做用，value 屬性對於不一樣 input 類型，用法也不一樣：

　　(1)、對於 "text"、"password"、"hidden" 類型，定義輸入字段的初始（默認）值。

　　(2)、對於 "button"、"submit"、"reset"、類型，定義按鈕上的文本。

　　(3)、對於 "checkbox"、"radio"、"image" 類型，則定義與 input 元素相關的值，當提交表單時該值會發送到表單的 action URL。

　　注意：value 屬性對於 <input type="checkbox"> 和 <input type="radio"> 是必需的，不適用於 <input type="file">。

　　而 placeholder 屬性則可規定輸入字段預期值的簡短的提示信息，好比一個樣本值或者預期格式的短描述，該提示會在用戶輸入值以前顯示在輸入字段中，該值顯示爲虛體，顏色淺，當用戶輸入時自動清除，而用於 <input type="text" value="小白"> 的 value 屬性的默認值顯示爲實體，並且顏色深，在用戶輸入時須要自行清除。placeholder 屬性適用於下面的 input 類型：text、search、url、tel、email 和 password。

　　<label> 標籤則爲 input 元素定義標記，通常爲輸入標題。<label> 標籤不會向用戶呈現任何特殊效果，它的做用是爲鼠標用戶改進了可用性。若是你在該標籤內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該 <label> 標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上（就自動選中和該 <label> 標籤相關連的表單控件上）。for 屬性規定 label 與哪一個表單元素綁定，該屬性的值應當與綁定元素的 id 屬性值相同。以下：

1 <form method="post" action="demo.php">
2     <label for="male">男</label>
3     <input type="radio" id="male" name="gender"><br/>
4     <label for="female">女</label>
5     <input type="radio" id="female" name="gender"><br/>
6     <label for="email">郵箱</label>
7     <input type="email" id="email" placeholder="請輸入郵箱地址">
8 </form>

 

三、文本域

　　文本域是一個多行的文本輸入控件，當用戶須要在表單中輸入大段文字時，須要用到文本輸入域。文本域經過 <textarea> 標籤完成，以下：

1 <form method="post" action="demo.php">
2     <label for="txt">發表意見：</label><br/>
3     <textarea cols="50" rows="10" id="txt">在這裏輸入內容...</textarea>
4 </form>

 

　　注意：<textarea> 標籤是一對閉合標籤，成對出現，在開始標籤和結束標籤之間能夠輸入默認值，cols 和 rows 屬性則定義文本域的行數和列數，更好的辦法是使用 CSS 的 width 和 height 屬性來定義文本與的大小，width 代替 cols，height 代替 rows。

 

四、選擇框

　　選擇框可讓用戶作出選擇，在使用表單設計調查表時，爲了減小用戶的操做，使用選擇框是一個好主意，HTML 中有兩種選擇框，即單選框和複選框，二者的區別是單選框中的選項用戶只能選擇一項，而複選框中用戶能夠任意選擇多項，甚至全選。定義選擇框經過 <input> 標籤完成，不一樣的是輸入類型。

　　(1)、單選框

　　type="radio" 定義了單選框，也叫單選按鈕，容許用戶在必定數量的選擇中選取一個選項。以下：

1 <form method="post" action="demo.php">
2     <label for="love">喜　歡</label>
3     <input type="radio" id="love" name="like" value="喜歡" checked><br/>
4     <label for="noLove">不喜歡</label>
5     <input type="radio" id="noLove" name="like" value="不喜歡"><br/>
6     <label for="casual">無所謂</label>
7     <input type="radio" id="casual" name="like" value="無所謂"><br/>
8 </form>

 

　　(2)、複選框

　　type="checkbox" 定義了複選框，容許用戶能夠選擇多個選項。以下：

 1 <form method="post" action="demo.php">
 2     <label for="tool1">自行車</label>
 3     <input type="checkbox" id="tool1" name="bike" value="自行車"><br/>
 4     <label for="tool2">汽　車</label>
 5     <input type="checkbox" id="tool2" name="car" value="汽車"><br/>
 6     <label for="tool3">飛　機</label>
 7     <input type="checkbox" id="tool3" name="plane" value="飛機" checked><br/>
 8     <label for="tool4">火　箭</label>
 9     <input type="checkbox" id="tool4" name="rocket" value="火箭" checked><br/>
10     <label for="tool5">毛　線</label>
11     <input type="checkbox" id="tool5" name="wool" value="毛線">
12 </form>

 

　　value 屬性值是必需的，爲提交數據到服務器的值，供後臺程序使用。name 屬性爲輸入控件命名，供後臺程序使用，checked 屬性規定在頁面加載時應該被預先選定的 <input> 元素。該屬性只適用於 <input type="radio"> 和 <input type="checkbox">。checked 屬性用於設置默認選項，即該選項會被默認選中。該屬性也能夠在頁面加載後，經過 JavaScript 代碼進行設置。

　　注意：同一組的單選按鈕，name 屬性取值必定要一致，好比上面例子爲同一個名稱「like」，這樣同一組的單選按鈕才能夠起到單選的做用。同一組的複選框，name 屬性取值能夠一致，這樣方便爲其定義樣式，或者經過 JS 獲取元素。

 

五、下拉列表框

　　下拉列表在網頁中也常會用到，它能夠有效的節省網頁空間。既能夠單選、也能夠多選。下拉列表框經過 <select> 標籤 和 <option> 標籤完成。

　　(1)、下拉列表單選框

 1 <form method="post" action="demo.php">
 2     <label for="like">喜歡：</label>
 3     <select id="like" name="cars">
 4         <option value="奧迪">奧迪</option>
 5         <option value="寶馬">寶馬</option>
 6         <option value="奔馳">奔馳</option>
 7         <option value="賓利">賓利</option>
 8         <option value="路虎">路虎</option>
 9     </select>
10 </form>

 

　　(2)、下拉列表複選框

 1 <form method="post" action="demo.php">
 2     <label for="like">喜歡：</label>
 3     <select id="like" name="cars" multiple>
 4         <option value="奧迪">奧迪</option>
 5         <option value="寶馬">寶馬</option>
 6         <option value="奔馳">奔馳</option>
 7         <option value="賓利">賓利</option>
 8         <option value="路虎" selected>路虎</option>
 9     </select>
10 </form>

 

　　<select> 標籤訂義下拉列表選項，而 <option> 標籤訂義下拉列表中的選項。

　　下拉列表單選框和下拉列表複選框，惟一的不一樣就是複選框使用了 multiple 屬性實現了多選功能，下拉列表能夠進行多選操做就是在 <select> 標籤中設置了 multiple 屬性，該屬性用於規定可同時選擇多個選項，須要注意：下拉列表框根據選項的個數(單選/複選)，會在網頁上呈現不一樣的顯示效果。在不一樣的操做系統，選擇多個選項的方法也不一樣，在 windows 操做系統下，須要按住 Ctrl 鍵來選擇多個選項，而在 Mac 系統下，須要按住 Command 鍵來選擇多個選項。

　　<option> 標籤的 value 屬性值爲向服務器提交的值，selected 屬性則表示該選項被默認選中，即首次在列表中時表現爲選中狀態。該標籤須要與 <select> 標籤配合使用，不然這個標籤是沒有任何意義的。

　　<select> 元素是一種表單控件，可用於在表單中接受用戶輸入。還元素有幾個重要屬性，required 屬性規定用戶在提交表單前必須選擇一個下拉列表中的選項。autofocus 屬性規定在頁面加載時下拉列表自動得到焦點。size 屬性規定下拉列表中可見選項的數目。因爲各屬性之間的差別，須要告訴用戶是否能夠多項選擇，對用戶更友好的方式是使用複選框。

　　若是有不少的選項組合，就可使用 <optgroup> 標籤可以很簡單的將相關選項組合在一塊兒。該標籤常常用於把相關的選項組合在一塊兒。以下：

 1 <form method="post" action="demo.php">
 2     <label for="like">喜歡：</label>
 3     <select>
 4         <optgroup label="國產">
 5             <option value="奇瑞">奇瑞</option>
 6             <option value="大衆">大衆</option>
 7             <option value="現代">現代</option>
 8             <option value="哈弗">哈弗</option>
 9             <option value="比亞迪">比亞迪</option>
10         </optgroup>
11         <optgroup label="進口">
12             <option value="蘭博基尼">蘭博基尼</option>
13             <option value="雷克薩斯">雷克薩斯</option>
14             <option value="凱迪拉克">凱迪拉克</option>
15             <option value="瑪莎拉蒂">瑪莎拉蒂</option>
16             <option value="英菲尼迪">英菲尼迪</option>
17         </optgroup>
18     </select>
19 </form>

 

　　<optgroup> 標籤一個重要屬性 label 用於爲選項組規定描述。

 

六、按鈕

　　在表單中有兩種按鈕可使用，分別爲：提交按鈕和重置按鈕。還有一種按鈕叫作點擊按鈕。

　　(1)、點擊按鈕

　　type="button" 定義一個可點擊的按鈕，在用戶點擊按鈕時啓動一段 JavaScript。

1 <input type="button" value="按鈕" onclick="show()">
2 <script>
3 function show(){
4     alert("Hello world!");
5 }
6 </script>

 

　　(2)、提交按鈕

　　當用戶須要提交表單信息到服務器時，須要用到提交按鈕。type="submit" 用於定義提交按鈕。

1 <form method="post" action="demo.php">
2     <label for="urse">用戶名：</label>
3     <input type="text" id="urse" name="ursename" placeholder="郵箱/手機號/用戶名"/><br/>
4     <label for="password">密　碼：</label>
5     <input type="password" id="password" name="pass" placeholder="請輸入密碼" /><br/>
6     <input type="submit" value="提交信息">
7 </form>

 

　　button 和 submit 都是定義一個按鈕，不一樣的是 button 只是一個普通的按鈕，主要用於綁定事件，若是不給其綁定事件，那麼點擊按鈕不會有任何反應。而 submit 則是提交按鈕，主要用於提交表單，傳送數據，若是給 submit 綁定事件，那麼點擊按鈕觸發事件的同時，也會提交表單。

　　(3)、重置按鈕

　　當用戶須要重置表單信息到初始時的狀態時，好比用戶輸入信息後，發現輸入錯誤，那麼可使用重置按鈕使輸入框恢復到初始狀態。只須要把 type 設置爲 "reset" 就能夠。

1 <form method="post" action="demo.php">
2     <label for="urse">用戶名：</label>
3     <input type="text" id="urse" name="ursename" placeholder="郵箱/手機號/用戶名"/><br/>
4     <label for="password">密　碼：</label>
5     <input type="password" id="password" name="pass" placeholder="請輸入密碼" /><br/>
6     <input type="submit" value="提交信息">
7     <input type="reset" value="重置信息">
8 </form>

　　type="reset" 用於定義一個重置按鈕，須要謹慎使用該按鈕，當用戶點擊重置按鈕後，全部表單值都會恢復到默認值，這對於用戶來講，若是不慎點擊了重置按鈕將是一件十分使人惱火的事。

　　在 HTML 中還有一種建立按鈕的方法就是使用 <button> 標籤。該元素與使用 <input> 元素建立的按鈕之間的不一樣之處就在於：使用 button 元素建立的按鈕，在該元素內部能夠放入內容，好比文本或圖像，也就是該元素可使用多媒體內容，<button> 與 </button> 標籤之間的全部內容都是按鈕的內容。該元素也能夠定義點擊按鈕、提交按鈕和重置按鈕。可是他的缺點就是：不一樣的瀏覽器對 <button> 元素的 type 屬性使用不一樣的默認值，所以要始終爲 <button> 元素規定 type 屬性，不一樣瀏覽器可能會提交不一樣的按鈕值，也就是瀏覽器獲得的 value 值不一樣，存在兼容性問題。因此要使用 <input> 元素在 HTML 表單中建立按鈕。

 

七、input 元素屬性和其餘輸入類型

　　除了前邊提到的一些屬性外，input 元素還有一些重要屬性，以及 HTML5 新增長的屬性。

　　readonly 屬性規定輸入字段是隻讀的。該屬性是一個布爾值。只讀字段是不能修改的。不過，用戶仍然可使用 tab 鍵切換到該字段，還能夠選中或拷貝其文本。readonly 屬性能夠防止用戶對值進行修改，直到知足某些條件爲止，好比選中了一個複選框。而後，須要使用 JavaScript 消除 readonly 值，將輸入字段切換到可編輯狀態。

　　size 屬性規定以字符數計的 <input> 元素的可見寬度。size 屬性適用於下面的 input 類型：text、search、tel、url、email 和 password。如需規定 <input> 元素中容許的最大字符數，須要使用 maxlength 屬性。

　　如下是 HTML5 中的新屬性：

　　autocomplete="on|off" 屬性規定輸入字段是否應該啓用自動完成功能。默認值爲 on，規定用戶啓用自動完成功能，off 則表示禁用。注意：autocomplete 屬性適用於下面的 <input> 類型：text、search、url、tel、email、password、date pickers(日期選擇器)、range 和 color。

　　multiple 屬性規定容許用戶輸入到 <input> 元素的多個值。該值是一個布爾值，注意：multiple 屬性適用於如下 input 類型：email 和 file。

　　pattern 屬性規定用於驗證 <input> 元素的值的正則表達式。可使用使用全局的 title 屬性來描述模式以幫助用戶。pattern 屬性適用於下面的 input 類型：text、search、url、tel、email 和 password。

　　required 屬性規定必需在提交表單以前填寫輸入字段。該屬性是一個布爾值，required 屬性適用於下面的 input 類型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

 

　　下面是 input 元素的其餘輸入類型：

　　(1)、圖像做爲按鈕

　　type="image" 用於定義圖像做爲提交按鈕，以下：

<input type="image" src="imges/submit.gif" alt="Submit" width="48" height="48">

　　上面代碼中的 3 個屬性都只針對 type="image"，src 屬性規定顯示爲提交按鈕的圖像的 URL。alt 屬性定義圖像輸入的替代文本。width 和 height 規定 <input>元素的寬度/高度。

 

　　(2)、隱藏字段

　　type="hidden" 用於定義隱藏字段，隱藏字段對於用戶是不可見的。隱藏字段經常存儲默認值，或者由 JavaScript 改變它們的值。

1 <form method="post" action="demo.php">
2     姓名: <input type="text" name="user"><br/>
3     <input type="hidden" name="country" value="China">
4     <input type="submit" value="提交">
5 </form>

 

　　(3)、選擇文件

　　type="file" 用於定義文件選擇字段和 "瀏覽..." 按鈕，供文件上傳。

1 <form method="post" action="demo.php">
2     選擇一個文件: <input type="file" name="img" accept="image/*,audio/*,video/*"><br/>
3     <input type="submit" value="提交">
4 </form>

　　accept 屬性僅適用於 <input type="file">。該屬性規定了可經過文件上傳提交的服務器接受的文件類型。如須要多個文件類型，每一個值可使用逗號分隔。注意：不要將該屬性做爲驗證工具，應該在服務器上對文件上傳進行驗證。

 

如下都是 input 元素在 HTML5 中的新類型：

　　(4)、Email

　　type="email" 用於定義郵箱地址的字段，當提交表單時會自動對 email 字段的值進行驗證。

Email: <input type="email" name="usre">

 

　　(5)、電話號碼

　　type="tel" 用於定義用於輸入電話號碼的字段。

電話號碼: <input type="tel" name="mobile">

 

　　(6)、拾色器

　　type="color" 用於定義從拾色器中選取顏色。

選擇你喜歡的顏色: <input type="color" name="likecol">

 

　　(7)、搜索字段

　　type="search" 定義用於輸入搜索字符串的文本字段，好比站內搜索。

查查看: <input type="search" name="lookup">

　　目前，瀏覽器對於該類型的支持不是很好。

 

　　(8)、URL

　　type="url" 定義用於輸入 URL 的字段。

添加你的主頁: <input type="url" name="homepage">

 

　　(9)、數字字段

　　type="number" 定義用於輸入數字的字段，能夠設置可接受數字的限制。

數量 ( 1 到 5 之間): <input type="number" name="num" min="1" max="5">

　　min 和 max 屬性可用於規定 <input> 元素的最小/最大值。value 屬性可規定默認值。step 屬性可規定 <input> 元素的合法數字間隔。實例：若是 step="3"，則合法數字應該是 -三、0、三、6，以此類推。該屬性能夠與 min 和 max 屬性配合使用，以建立合法值的範圍。

 

　　type="range" 定義用於精確值不重要的輸入數字的控件，好比 Slider.js，一個輕量級圖片播放控件。也能夠設置可接受數字的限制。用來規定限制的屬性同 number 類型相同。

 

　　(10)、日期

　　type="time" 定義用於輸入時間的控件（不帶時區）。

　　type="date"  定義 date 控件。

　　type="datetime" 定義 date 和 time 控件（帶有時區）。

　　type="datetime-local" 定義 date 和 time 控件（不帶時區）。

　　type="month" 定義 month 和 year 控件（不帶時區）。

　　type="week" 定義 week 和 year 控件（不帶時區）。

 

八、其餘表單標籤

　　(1)、表單邊框

　　<fieldset> 標籤定義圍繞表單中元素的邊框。<legend>標籤用於定義 fieldset 元素的標題。

1 <form method="post" action="demo.php">
2     <fieldset>
3         <legend>我的信息:</legend>
4         姓名: <input type="text"><br/>
5         籍貫: <input type="text"><br/>
6         郵箱: <input type="email"><br/>
7         家庭住址: <input type="text">
8     </fieldset>
9 </form>

 

在 HTML5 中還增長了3個新標籤：

　　(2)、<datalist>

　　<datalist> 標籤規定了 input 元素可能的選項列表。以下：

 1 <form method="post" action="demo.php">
 2     <input list="browser" name="explorer" autofocus>
 3     <datalist id="browser">
 4         <option value="IE">
 5         <option value="Firefox">
 6         <option value="Chrome">
 7         <option value="Safari">
 8         <option value="Opera">
 9     </datalist>
10     <input type="submit">
11 </form>

 

　　<datalist> 標籤被用來爲 <input> 元素提供"自動完成"的特性。用戶能看到一個下拉列表，裏邊的選項是預先定義好的，將做爲用戶的輸入數據。注意：必需使用 <input> 元素的 list 屬性來綁定 <datalist> 元素。該屬性引用 <datalist> 元素，其中包含 <input> 元素的預約義選項，該屬性值爲綁定到 <input> 元素的 datalist 的 id。

　　autofocus 屬性用於規定當頁面加載時 <input> 元素應該自動得到焦點。

 

　　(3)、<output>

　　<output> 標籤做爲計算結果輸出顯示，好比執行腳本的輸出。以下：

1 <form method="post" action="demo.php" oninput="sum.value=parseInt(x.value)+parseInt(y.value)">
2     0<input type="range" id="x" value="50">100
3     +<input type="number" id="y" value="50">=
4     <output name="sum" for="x y"></output>
5 </form>

 

　　該標籤有一個重要屬性 for 規定一個或多個元素的 id 列表，以空格分隔，用於描述計算中使用的元素與計算結果之間的關係。name 屬性定義對象的惟一名稱，在表單提交時使用。

 

　　(4)、<keygen>

　　<keygen> 規定用於表單的密鑰對生成器字段。當提交表單時，私鑰存儲在本地，公鑰發送到服務器。以下：

1 <form method="post" action="demo.php">
2     用戶名: <input type="text" name="usre"><br/>
3     加　密: <keygen name="security" keytype="rsa">
4     <input type="submit">
5 </form>

 

　　該標籤有一個重要屬性 keytype 用於定義密鑰的安全算法，該屬性規定應該使用哪一種密鑰生成算法，安全算法有3種：rsa爲默認，規定 RSA 安全算法，RSA 密鑰強度可由用戶選擇。dsa 規定 DSA 安全算法，DSA 密鑰長度可由用戶選擇。ec 規定 EC 安全算法，EC 密鑰強度可由用戶選擇。注意：不一樣的瀏覽器對密鑰生成算法的支持會有所變化。

 

九、HTML 表格

　　建立表格的四個元素：table、tr、th、td

　　<table>…</table>：整個表格以 <table> 標記開始，以 </table> 標記結束。

　　<tr>…</tr>：表格的一行，因此有幾對 tr 表格就有幾行。

　　<th>…</th>：表格的頭部的一個單元格，表格表頭。

　　<td>…</td>：表格的一個單元格，一行中包含幾對 <td>...</td>，說明一行中就有幾列。表格中列的個數，取決於一行中數據單元格的個數。

　　基本語法：

 1 <table border="1">
 2     <tr>
 3         <th>姓名</th>
 4         <th>性別</th>
 5         <th>工號</th>
 6     </tr>
 7     <tr>
 8         <td>小白</td>
 9         <td>男</td>
10         <td>123</td>
11     </tr>
12     <tr>
13         <td>初夏</td>
14         <td>女</td>
15         <td>321</td>
16     </tr>
17 </table>

 

　　此外，還有幾個至關重要的表格標籤，用於優化和組合表格元素：caption、thead、tbody、tfoot

　　<caption>…</caption>：定義表格的標題，該標籤必須放置在 <table> 元素以後，做爲第一個子元素，而且一個表格只能定義一個標題。一般這個標題居中於表格之上，能夠經過 CSS 屬性 "text-align" 和 "caption-side" 來設置標題的對齊方式和顯示位置。

　　<thead>…</thead>：用於組合 HTML 表格的表頭內容。該元素必須做爲 <table> 元素的子元素，而且出如今 <caption>、<colgroup> 元素以後，<tbody>、 <tfoot> 和 <tr> 元素以前。

　　<tbody>…</tbody>：用於組合 HTML 表格的主體內容。當表格內容很是多時，表格會下載一點顯示一點，但若是加上 <tbody> 標籤後，這個表格就要等表格內容所有下載完纔會顯示。該元素必須做爲 <table> 元素的子元素，出如今 <caption>、<colgroup> 和 <thead> 元素以後。

　　<tfoot>…</tfoot>：用於組合 HTML 表格的頁腳內容。該元素必須做爲 <table> 元素的子元素，出如今 <caption>、<colgroup> 和 <thead> 元素以後，<tbody> 和 <tr> 元素以前。

　　注意：<thead>、<tbody>、<tfoot> 元素應該結合起來使用，用來規定表格的各個部分。經過使用這些元素，使瀏覽器有能力支持獨立於表格表頭和表格頁腳的表格主體滾動。當包含多個頁面的長表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。在使用這3個元素時，在內部必須包含一個或者多個 <tr> 標籤。

　　帶有標題的表格：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表格</title>
 6 <style>
 7 caption{
 8     font-size:20px;
 9     font-weight:bold;
10     margin-bottom:10px;
11 }
12 table,th,td{
13     border:2px solid black;
14     padding:5px;
15 }
16 .tab{
17     width:40%;
18     border-collapse:collapse;
19 }
20 .tab th{
21     background:yellow;
22 }
23 .tab td{
24     text-align:center;
25     background:lightgreen;
26 }
27 </style>
28 </head>
29 <body>
30 <table border="1" class="tab">
31     <caption>商品列表</caption>
32     <thead>
33         <tr>
34             <th>商品名稱</th>
35             <th>價格（元）</th>
36             <th>生產日期</th>
37         </tr>
38     </thead>
39     <tbody>
40         <tr>
41             <td>洗衣機</td>
42             <td>1999.00</td>
43             <td>2016-2-1</td>
44         </tr>
45         <tr>
46             <td>電視機</td>
47             <td>3999.00</td>
48             <td>2016-2-2</td>
49         </tr>
50         <tr>
51             <td>電冰箱</td>
52             <td>2999.00</td>
53             <td>2016-2-8</td>
54         </tr>
55     </tbody>
56 </table>
57 </body>
58 </html>

 

　　CSS 的 border-collapse 屬性是表格屬性, 能夠設置表格的邊框是否合併爲一條，仍是像在標準的 HTML 中那樣分開顯示。默認值爲 separate 邊框分開，不會忽略 border-spacing 和 empty-cells 屬性。collapse 邊框合併，若是相鄰，則共用一個邊框，會忽略 border-spacing 和 empty-cells 屬性。border-spacing 屬性設置相鄰單元格的邊框間的距離，僅用於"邊框分開"樣式。用於規定相鄰單元的邊框之間的距離，不容許負值，若是設置1個參數，定義的是水平和垂直間距。若是是2個參數，那麼第一個設置水平間距，而第二個設置垂直間距。empty-cells 屬性設置是否顯示錶格中的空單元格，僅用於"邊框分開"樣式。默認值爲 show 表示空單元格顯示邊框。hide 爲不在空單元格周圍顯示邊框。

 

　　表格表頭豎直顯示：

 1 <table border="1">
 2     <caption>商品列表</caption>
 3         <tr>
 4             <th>商品名稱</th>
 5             <td>洗衣機</td>
 6             <td>電視機</td>
 7             <td>電冰箱</td>
 8         </tr>
 9         <tr>
10             <th>價格（元）</th>
11             <td>1999.00</td>
12             <td>3999.00</td>
13             <td>2999.00</td>
14         </tr>
15         <tr>
16             <th>生產日期</th>
17             <td>2016-2-2</td>
18             <td>2016-2-8</td>
19             <td>2010-2-10</td>
20         </tr>
21 </table>

 

　　<th> 和 <td> 元素有2個重要屬性 rowspan 和 colspan，rowspan 用於設置單元格可橫跨的行數。colspan 用於設置單元格可橫跨的列數。

　　跨行跨列的表格：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表格</title>
 6 <style>
 7 caption{
 8     font-size:20px;
 9     font-weight:bold;
10     margin-bottom:10px;
11 }
12 table,th,td{
13     border:2px solid black;
14     padding:10px;
15 }
16 .tab{
17     width:40%;
18     border-collapse:collapse;
19 }
20 .tab th{
21     background:yellow;
22 }
23 .tab td{
24     text-align:center;
25     background:lightgreen;
26 }
27 </style>
28 </head>
29 <body>
30 <table border="1" class="tab">
31     <caption>促銷信息</caption>
32     <thead>
33         <tr>
34             <td colspan="3" style="text-align:left;font-weight:bold;">新華書店</td>
35         </tr>
36         <tr>
37             <th>類　目</th>
38             <th>書　名</th>
39             <th>價　格（元）</th>
40         </tr>
41     </thead>
42     <tbody>
43         <tr>
44             <td rowspan="3">圖書</td>
45             <td>HTML5 基礎</td>
46             <td>29.00</td>
47 
48         </tr>
49         <tr>
50             <td>CSS3 精通</td>
51             <td rowspan="2">52.00</td>
52         </tr>
53         <tr>
54             <td>JS 精華</td>
55         </tr>
56         <tr>
57             <td>數碼</td>
58             <td colspan="2">一概半價</td>
59         </tr>
60     </tbody>
61 </table>
62 </body>
63 </html>