html---表格和表单的使用
html—表格和表单的使用
1. 表格：
1.1 基本语法：
<table>
<tr>
<td>单元格内容</td>
...
</tr>
<tr>
<td>单元格内容</td>
...
</tr>
....
</table>
1.2 table标记的常见属性：
设置表格的边框：
<table border="边框宽度">
设置表格的宽度和高度：
<table width="表格宽度" height="表格高度">
设置表格的对齐方式：
<table align="表格的对齐方式">
设置表格的边距和间距：
<table cellpadding="边距值" cellspacing="间距值">
设置表格的标题：
<caption align="水平对齐方式" valign="垂直对齐方式">表格标题</caption>
1.3 <tr>标签：
使用<table>可以从总体上设置表格属性，根据网页布局的需要，还可以单独对表格中的某一或某一个单元格进行属性设置。
基本语法：<tr align="水平对齐方式" valign="垂直对齐方式" bgcolor="背景颜色" >
1.4 <td>和<th>标签：
在HTML文档中，单元格可以分为一般单元格<td></td>和标题单元格<th></th>，一般的单元格内容默认是居左并以普通格式显示，而标题单元格的内容是默认居中并且加粗显示的。
<td>和<th>标签常用属性：
align: 设置单元格的水平对齐方式
valign：设置单元格的垂直对齐方式
bgcolor：设置单元格的背景颜色
width：设置单元格的宽度
height：设置单元格的高度
rowspan：设置单元格的跨行操作
colspan：设置单元格的跨列操作
1.5 表格的简单示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table width="100%">
<caption>年终数据报表</caption>
<tr style="background:aqua;">
<th></th><th>1月</th><th>2月</th><th>3月</th><th>小结（RMB）</th>
</tr>
<tr style="background:mediumaquamarine;">
<td>北京</td><td>10</td><td>10</td><td>50</td><td>70</td>
</tr>
<tr style="background:mediumaquamarine;">
<td>上海</td><td>20</td><td>30</td><td>70</td><td>120</td>
</tr>
<tr style="background:mediumaquamarine;">
<td>天津</td><td>30</td><td>40</td><td>80</td><td>150</td>
</tr>
<tr style="background: yellow;">
<td>总计（RMB）</td><td>60</td><td>80</td><td>200</td><td>240</td>
</tr>
</table>
</body>
</html>
结果：
1.6 表格的嵌套示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" style="text-align: center; border-color: red;" width="80%" cellspacing="0">
<tr><td>导航部分</td></tr>
<tr><td>
<table border="2" width="100%" cellspacing="0" bordercolor="green" style="color: green">
<tr><td>拍拍广告</td><td rowspan="2">flash广告</td><td rowspan="2">手机充值专区</td></tr>
<tr><td>买东西、卖东西</td></tr>
</table>
</td></tr>
<tr><td>
<table border="1" width="100%" cellspacing="0" bordercolor="blue" style="color: blue;">
<tr><td>宝贝类目</td><td>热卖品牌</td></tr>
</table>
</td></tr>
<tr><td>
<table border="1" width="100%" cellspacing="0" bordercolor="green" style="color: ;">
<tr><td>数码</td><td>手机</td></tr>
</table>
</td></tr>
<tr><td>热卖单品</td></tr>
<tr><td>社区</td></tr>
<tr><td>版权信息</td></tr>
</table>
</body>
</html>
结果：
2.表单的使用：
2.1 常见的表单属性：
text 单行文本输入<input type="text" name="username" />
password 密码<input type="password" name="password" />
radio 单选<input type="radio" name="sex" value="女" />女<input type="radio" name="sex" value="男" />男
checkbox 多选<input type="checkbox" name="hobby3" value="琴" />琴<input type="checkbox" name="hobby2" value="画" />画<input type="checkbox" name="hobby1" value="书" />书
reset重置表单数据<input type="reset" value="重置" />
file 文件上传<input type="file" name="files" />
submit提交表单数据 <input type="submit" value="提交" />
image 图形提交按钮 <input type="image" src="images/button.gif" />
textarea 文本域标签<textarea name="自我介绍" cols="50" rows="10" readonly="readonly"></textarea>
select 选择列表标签
<select name="mon">
<option value="0" selected="selected" >请选择</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>
</select>
2.2 表单的简单示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="post" enctype="multipart/form-data" width="50%">
<table width="40%">
<tr>
<td>用户名：</td>
<td><input name="username" type="text" size="20" maxlength="10"/></td>
</tr>
<tr>
<td>密 码：</td>
<td><input name="password" type="password" size="20" maxlength="10"/></td>
</tr>
<tr>
<td>再次输入密码：</td>
<td><input name="password" type="password" size="20" maxlength="10"/></td>
</tr>
<tr>
<td>性 别：</td>
<td>
<input name="sex" type="radio" /><img src="img/Male.gif" />男
<input name="sex" type="radio" /><img src="img/Female.gif" />女
</td>
</tr>
<tr>
<td>爱 好：</td>
<td>
<input type="checkbox" name="hobby" />阅读
<input type="checkbox" name="hobby" />看书
<input type="checkbox" name="hobby" />运动
<input type="checkbox" name="hobby" checked="checked" />英语
</td>
</tr>
<tr>
<td>
出生日期：<input name="year" type="text" size="4" />年
</td>
<td>
<select name="mon">
<option value="0" selected="selected" >请选择月份</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>
</select>月
<input type="text" name="riqi" size="4"/>日
</td>
</tr>
<tr>
<td><input type="reset" name="reset" value="重填" /></td>
<td><input type="submit" name="submit" value="同意以下服务条款，并提交注册信息" /></td>
</tr>
<tr>
<td colspan="2">
<img src="img/read.gif" /><b>阅读淘宝网服务协议</b>
</td>
</tr>
<tr>
<td colspan="2" >
<textarea name="自我介绍" cols="50" rows="10" readonly="readonly">阿金卡空气墙几千块框架基本放开几千块拒腐防变全力爆发起来比较起来方便请立即发布垃圾分不清了几分科技部分</textarea>
</td>
</tr>
</tr>
</table>
</form>
</body>
</html>
结果：