Html Body中table（表格）也是一个重要组成部分，下面列举一个简单的实例：
——————————————简单的table——————————————————
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table width="90%" border="3" cellpadding="2" cellspacing="0" align="center">
<caption>
<h1>维修项目增补单</h1>
<tr align="">
<th>工单号</th>
<th colspan="2">__________</th>
<th>车牌号</th>
<th colspan="2">__________</th>
<th>车型</th>
<th></th>
<th>技师</th>
<th></th>
<th>维修时间</th>
<th colspan="2">___________</th>
</tr>
<tr>
<th>序号</th>
<th colspan="4">维修项目及更换配件</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>工时费</th>
<th>合计</th>
<th colspan="3">故障原因</th>
</tr>
<tr>
<th>1</th>
<td colspan="4"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr>
<th>2</th>
<td colspan="4"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr>
<th>3</th>
<td colspan="4"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr>
<th>4</th>
<td colspan="4"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr>
<th>5</th>
<td colspan="4"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr>
<th>6</th>
<td colspan="4"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr align="left">
<th colspan="5">备件费用小计：</th>
<th colspan="5">工时费用小计：</th>
<th colspan="3">合计：</th>
<tr />
</caption>
</table>
</body>
</html>
效果如下：
！：有一个非常需要注意的地方就是因为html内容为主的原因，当你空单元格位置又是不会像你设置那样完整展开。暂时没有找到解决办法，只能将空单元格中加入字符，使他完整展开。
——————————————————————From表单————————————————————————————
From表单是Html中用户与网站交互的手段。
表单是可以把浏览者输入的数据传送到服务器端的程序(比如ASP,PHP,JSP)的HTML元素,服务器端程序可以处理表单传过来的数据,从而进行一些动作.比如,bbs,blog的登陆系统,购物车系统等.
以下举例：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝注册</title>
</head>
<body>
<table align="center" width="600" border="1" cellpadding="2" cellspacing="0">
<caption>
<h2>用户注册</h2>
</caption>
<form action="http://www.baidu.com" method="POST">
<tr> <!-- 使用输入域定义姓名输入框 -->
<td>姓名：</td>
<td>
<input type="TEXT" name="one" size="15"/>
</td>
</tr>
<tr> <!-- 使用单选按钮域定义性别输入框 -->
<td>密码：</td>
<td>
<input type="PASSWORD" name="one" size="15"/>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" size="1"/>男
<input type="radio" name="sex" size="2"/>女
<input type="radio" name="sex" size="0"/>保密
</td>
</tr>
<tr> <!-- 使用下拉列表域定义学历输入框 -->
<td>学历：</td>
<td>
<select id="" name="edu">
<option>--请选择--</option>
<option value="1">高中</option>
<option value="2">大专</option>
<option value="3">本科</option>
<option value="4">研究生</option>
<option value="5">其他</option>
</select>
</td>
</tr>
<tr> <!-- 使用复选按钮域定义爱好输入框 -->
<td>爱好：</td>
<td>
<input type="checkbox" name="two" value="4"/>跑步
<input type="checkbox" name="two" value="5"/>羽毛球
<input type="checkbox" name="two" value="6"/>篮球
<input type="checkbox" name="two" value="7"/>乒乓球
</td>
</tr>
<tr> <!-- 使用多行文本输入域定义自我描述输入框 -->
<td>自我描述：</td>
<td>
<textarea id="" name="there" rows="10" cols="30"></textarea>
</td>
</tr>
<tr> <!-- 定义提交和重置两个按钮 -->
<td colspan="2" align="center">
<input type="SUBMIT" name="SUBMIT" value="提交"/>
<input type="RESET" name="RESET" value="重置"/>
</td>
</tr>
</form>
</table>
</body>
</html>
效果如下：
因为初步接触，做一下简单的还可以，再难一点就有困难了。
时间： 2024-08-03 07:39:43