更新時間：2021-11-18 文章分類：網頁技術課堂
近期收到某學校的同學求助，HTML網頁設計課程作業給了一張圖片，讓按照圖片樣式做一個表單。剛上大一只學了簡單的表格（table）布局還沒學CSS，使用dreamweaver制作插入表單，把表單都添加好后發現無法讓表單居中，怎樣使用表格布局實現表單Form居中對齊效果呢？
使用dreamweaver制作插入表單，把表單都添加好后發現無法讓表單居中，一直縮在左上角，看起來很難看，如下圖：
然后使用<center>標簽，實現了整體居中，但是看起來更難看了，如下圖：
由于沒有學過CSS，所以我們建議使用表格布局進行設置美化，在我們的修改美化下，最終效果如下：
以下為實例代碼，提交按鈕和性別圖片替換為自己的路徑即可。需要同學的直接復制即可使用。
網頁定做咨詢 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<center>
<form action="" method="get">
<table border="0" cellspacing="" cellpadding="">
<tr>
<td align="right"><label for="firstname">名字:</label></td>
<td><input type="text" name="firstname" id="firstname" required="required" value="" /></td>
</tr>
<tr>
<td align="right"><label for="lastname">姓氏:</label></td>
<td><input type="text" name="lastname" id="lastname" required="required" value="" /></td>
</tr>
<tr>
<td align="right"><label for="login name">登錄名:</label></td>
<td><input type="text" name="login name" required="required" pattern="^\w{4,8}$" id="login name" value="" />
（可包含a-z、0-9和下劃線）</td>
</tr>
<tr>
<td align="right"><label for="password">密碼:</label></td>
<td><input type="password" name="password" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password" value="" />
（至少包含6個字符）</td>
</tr>
<tr>
<td align="right"><label for="password2">再次輸入密碼:</label></td>
<td><input type="password" name="password2" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password2" value="" /></td>
</tr>
<tr>
<td align="right"><label for="myEmail">電子郵箱:</label></td>
<td><input type="email" name="myEmail" id="myEmail" value="" />
（必須包含@字符）</td>
</tr>
<tr>
<td align="right"><label>性別:</label></td>
<td><input type="radio" name="sex" id="" value="male" />
男<img src="./img/Male.gif" >
<input type="radio" name="sex" id="" value="female" />
女<img src="./img/Female.gif" ></td>
</tr>
<tr>
<td align="right"><label>頭像:</label></td>
<td><input type="file" name="myFile" /></td>
</tr>
<tr>
<td align="right"><label>愛好:</label></td>
<td><input type="checkbox" name="hobby" id="" value="運動" />
運動
<input type="checkbox" name="hobby" id="" value="聊天" />
聊天
<input type="checkbox" name="hobby" id="" value="玩游戲" />
玩游戲 </td>
</tr>
<tr>
<td align="right"><label>出生日期:</label></td>
<td><input type="text" size="1" name="year"placeholder="yyyy" id="" value="" />
年
<select name="month">
<option value ="0">[選擇月份]</option>
<option value ="1">1月</option>
<option value ="2">2月</option>
<option value ="3">3月</option>
<option value ="4">4月</option>
<option value ="5">5月</option>
<option value ="6">6月</option>
<option value ="7">7月</option>
<option value ="8">8月</option>
<option value ="9">9月</option>
<option value ="10">10月</option>
<option value ="11">11月</option>
<option value ="12">12月</option>
</select>
<input type="text" size="1" name="day" placeholder="dd"/>
日 </td>
</tr>
</table>
<input type="image" src="img/submit.gif" value="提交" />
<input type="image" src="img/reset.gif" onclick="reset();return false;" value="重填" />
</form>
</center>
</body>
</html>
