使用webstorm製作網頁檔案的時候，難免會遇到製作表格的情況，而且關鍵的佈局方式一般都是使用表格完成的。

1.製作表格我們需要使用標籤table在html中輸入table標籤，然後設定行和列，，tr代表行,td代表列，然後在行和列中輸入相關的內容。

2.預覽網頁我們發現，網頁顯示格式看起來不像是表格，因為沒有框線，這時候我們需要給table標籤設定邊框，border，如圖所示，在table標籤中，定義border的值，這樣再預覽網頁我們就可以看到表格樣式。

3.圖中的表格表頭和文字內容顯示格式一致，我們可以使用th標籤代替td標籤作為表格的表頭，系統自動將表頭內部的文字內容加粗居中顯示，這樣表頭格式就被著重定義出來。

4.可以使用caption標籤給表格新增標題，caption是table標籤的子標籤需要寫在table標籤內部，將需要定義的標題文字輸入到caption中。

5.兩行數值一樣的話可以設定為rowspan值，如圖所示，兩行資料一致，直接設定rowspan值為2，下一行的這個數值就不必單獨定義了，如果是三行數值一致，那麼可以直接設定為3.

6.將多列相同資料一起顯示可以使用colspan來進行設定，如圖所示，第三列所有的內容都全部顯示一致，我們可以設定像表格中的合併效果然後一起顯示，這樣就不必每一列都輸入內容。

2、 <tr> <td> <h4>確認密碼：＜/h4> </td> <td> <input type="text" name="" />* </td> <td> <h4>性別：＜/h4> </td> <td> <select name=""> <option value="男＂>男＜/option> <option value="女＂>女＜/option> </select> </td> </tr> <tr> <td> <h4>證件型別：＜/h4> </td> <td> <select> <option value="身份證＂>身份證＜/option> <option value="戶口本＂>戶口本＜/option> <option value="軍官證＂>軍官證＜/option> </select> </td> <td> <h4>出生日期：＜/h4> </td> <td> <input type="text" />(格式：2000-08-08) </td> </tr> <tr> <td> <h4>證件號碼：＜/h4> </td> <td> <input type="text" name="" />* </td> <td> <h4>國家：＜/h4> </td> <td> <input type="text" name="" />* </td> </tr>。

3、 <tr> <td> <h4>聯絡號碼：＜/h4> </td> <td> <input type="text" name="" />* </td> <td> <h4>城市：＜/h4> </td> <td> <input type="text" name="" />* </td> </tr> <tr> <td > <h4>手機號碼：＜/h4> </td> <td colspan="3"> <input type="text" name="" />* (建議填寫以便短息通知） </td> </tr> <tr> <td> <h4>Email：＜/h4> </td> <td> <input type="email" name="" />* </td> <td> <h4>郵編：＜/h4> </td> <td> <input type="text" name="" />* </td> </tr> <tr> <td > <h4>聯絡地址：＜/h4> </td> <td colspan="3"> <textarea name=""></textarea> </td> </tr> <tr> <td></td> <td> <input type="reset" value="重置＂/> </td> <td> <input type="submit" value="提交＂/> </td> <td></td> </tr> </table> </form> </body></html>。

4、表單相關HTML標籤＜form action="" method="post" name="form1"></form>表單標籤 <input type="text" name="text" /> 單行文字輸入框＜input type="hidden" name="hidden" /> 隱藏域＜input type="password" name="password" /> 密碼輸入框＜input type="checkbox" name="checkbox" value="checkbox" /> 複選框＜input type="radio" name="radiobutton" value="radiobutton" /> 單選按鈕＜input type="file" name="file" />檔案域＜input type="submit" name="Submit" value="提交＂/> 提交按鈕＜input type="reset" name="Submit2" value="重置＂/> 重置按鈕＜input type="button" name="button" />建立一個可單擊的按鈕，一般用於JS的執行。

5、下列為HTML5新增input型別＜input type="email" name="email" /> email輸入框＜input type="url" name="url" /> url地址輸入框＜input type="number" name="number" min="0" max="20" step="4"/>數字輸入框，其中0為輸入的最小值，20為最大值，輸入的數字為setp的倍數＜input type="range" name="range" min="0" max="20" step="4"/>建立滑塊輸入數字＜input type="date" name="date" />日期建立，選取日、月、年（火狐、IE不支援）<input type="search" name="search" />建立搜尋內容輸入框，結合程式實現搜尋功能＜input type="tel" name="tel" />建立電話號碼輸入框如在蘋果手機上的瀏覽器中，將顯示出撥號盤。

6、＜input type="color" name="color" />建立顏色選擇框＜input>新增加pattern屬性，用於限制text,search,url,tel,email,password的輸入值和位數例如：<input type="text" pattern="{6}" /><input>新增加required屬性，用於限制text,search,url,tel,email,password,number,checkbox,radio,file的值不能為空例如：<input type="text" required="required" /><textarea name="textarea"></textarea> 多行文字框＜select name="select">下拉列表＜option value="合肥＂>合肥＜/option></select>下面兩行是單選按鈕組＜input type="radio" name="RadioGroup1" value="單選＂/>單選＜input type="radio" name="RadioGroup1" value="單選＂/>單選。