<!--
表格：<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=)