<!--
表格：<table></table>
行：<tr></tr>
單元格：<td></td> 預設左對齊
<th></th>（表頭）預設居中，字型加粗
表格屬性：
邊框 border=數字值
單元格與内容之間的間距 cellpadding="數字"
單元格與單元格之間的間距 cellspacing="數字"
對齊方式：
垂直對齊 valign="" //top middle bottom
水準對齊 align="" //left center right
單元格合并：
行合并 rowspan="合并的行數"
列合并 colspan="合并的列數"
------------------------------------------------------------------------------------
表單:<form>....</form>
表單屬性：<form action="url" method="get>..</form> //method ->post/get
url：跳轉的頁面
問題：post和get的差別？
答：GET一般用于擷取/查詢 資源資訊，而POST一般用于更新 資源資訊。
文本框：<input type="text" name="addr" value=""/>
密碼框：<input type="password" name="psw" value=""/>
按鈕：
普通按鈕：<input type="button" name="psw" value=""/>
送出按鈕：<input type="submit" name="psw" value=""/>
重置按鈕：<input type="reset" name="psw" value=""/>
單選框：（同一組裡面有不同的選項，要求name要一緻，隻能任選一項）
<input type="radio" name="" value="">描述的内容</input>
複選框：（同一組裡面有不同的選項，建議name一緻，可以有多個選項）
<input type="checkbox" name="" value="">描述的内容</input>
下拉框：
<select name="">
<option value=""> 描述資訊</option>
</select>
文本域：
<textarea name="" rows="" cols=""></textarea>
屬性：行：rows 列：cols
表單元素屬性：
disabled：規定禁用該文本區
readonly：規定文本區為隻讀
------------------------------------------------------------------------------------------
文本中加空格
//-->
<html>
<head>
<title>表格與表單</title>
</head>
<body>
<h2>表格</h2>
<hr size="5" color="red"/>
<table width=800 height=400>
<tr >
<td align="center">1,1</td><td align="right">1,2</td> <!--單元格内容的水準排列方式-->
<td>1,3</td><td rowspan="2">1,4</td> <!--合并行單元格-->
</tr>
<tr>
<td valign="bottom">2,1</td><td valign="top">2,2</td> <!--單元格-内容的垂直排列方式-->
<td valign="middle">2,3</td>
</tr>
<tr>
<td>3,1</td><td>3,2</td><td>3,3</td><td>3,4</td>
</tr>
<tr>
<td>4,1</td><td>4,2</td><td>4,3</td><td>4,4</td>
</tr>
<tr>
<td colspan="3">5,1</td> <!--合并列單元格-->
<td>5,4</td>
</tr>
</table>
<h2>表格和表單</h2>
<hr size="5" color="blue"/>
<form action="http://www.baidu.com" method="get">
<table >
<tr>
<td>郵箱号：</td>
<td>
<input type="text" name="text1" value=""></input> <!--文本框-->
<select name="emailAddr"> <!--選擇框-->
<option>@163.com</option><option>@126.com</option><option>@qq.com</option>
</select>
</td>
</tr>
<tr>
<td>密 碼：</td>
<td><input type="password" name="password1" valu=""></input></td> <!--密碼框-->
</tr>
<tr>
<td>性 别：</td>
<td><input type="radio" name="sex" value="F"> 男</input> <!--下拉框-->
<input type="radio" name="sex" value="M"> 女</input></td>
</tr>
<tr>
<td>興趣愛好</td> <!--複選框-->
<td>
<input type="checkbox" name="enjoy" value="">籃球</input>
<input type="checkbox" name="enjoy" value="">足球</input>
<input type="checkbox" name="enjoy" value="">撞球</input>
<input type="checkbox" name="enjoy" value="">羽毛球</input>
<input type="checkbox" name="enjoy" value="">乒乓球</input>
</td>
</tr>
<tr>
<td>地區代碼</td>
<td>
<select name="select1"> <!--下拉框-->
<option value="">請選擇地區</option><option value="350200">廈門</option>
<option value="360600">漳州</option><option value="350500">泉州</option>
</select>
</td>
</tr>
<tr>
<td>回報意見</td> <!--文本域-->
<td><textarea name="textarea1" rows="10" cols="30" >請填寫資訊</textarea></td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" name="submit1"></input> <!--按鈕-->
<input type="reset" name="reset1"></input>
<input type="button" name="button1" value="普通按鈕"></input>
</td>
</tr>
</table>
</form>
</body>
</html>
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)