</pre><pre name="code" class="html">
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" href="css/table.css" rel="stylesheet">
<!--<style>
.table{
border-collapse: collapse;
width: 80%;
}
tr{
height: 50px;
}
</style>-->
</head>
<body>
<form action="" method="post">
<table border="1" align="center" bordercolor="#ccc">
<tr align="center">
<td colspan="3" >
员工信息
</td>
</tr>
<tr >
<td align="center" width="20%" >
工号：
</td>
<td width="50%" align="left" >
<input name="staffNo" class="input">
</td>
<td width="30%" rowspan="5">
<img width="100%" height="300px" src="images/1.jpg">
</td>
</tr>
<tr >
<td>
姓名：
</td>
<td align="left" >
<input name="staffName" class="input">
</td>
</tr>
<tr >
<td>
性别：
</td>
<td align="left">
<input type="radio" name="Sex" value="Man" checked>男
<input type="radio" name="Sex" value="Woman">女
</td>
</tr>
<tr >
<td >
照片：
</td>
<td align="left" >
<input type="file" name="staffPic">
</td>
</tr>
<tr >
<td>
职位：
</td>
<td align="left">
<select name="pos">
<option value="1001">
医生
</option>
<option value="1002">
护士
</option>
</select>
</td>
</tr>
<tr >
<td>
密码：
</td>
<td colspan="2" align="left">
<input type="password" name="password" class="input">
</td>
</tr>
<tr class="tr">
<td>
简介：
</td>
<td colspan="2" align="left">
<textarea cols="80" rows="8"></textarea>
</td>
</tr>
<tr >
<td colspan="3">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
table{
border-collapse: collapse;
width: 60%;
margin-top:8em;
text-align:center;
}
tr{
height: 50px;
}
.tr{
height:100px;
}
.input{
width:200px;
height:22px;
}
select{
width:80px;
height:22px;
}
textarea{
text-indent:2em;
}
head lang="en">
<meta charset="UTF-8">
此处的额lang="en"表示lang表示当前文档显示的语言为英语
编码格式 为 utf-8
<link type="text/css" href="css/table.css" rel="stylesheet">
链接CSS文件夹中的CSS文件。。用于修饰html
table{
border-collapse: collapse;
//合并表格边框 本例演示是否把表格边框显示为一条单独的边框，还是像标准的 HTML 中那样分开显示。
width: 80%;
}在css文件中的table.css中
<body>
<table border="1" align="center">
</body>
所以Table下面的都会被修饰。
align="center"表示居中。。
<tr >
<td colspan="3" >
Hello World
</td>
</tr>
表示该行的3列合并为一列，将余下的两列原先的位置删掉。完成合并，colspan为列合并
<tr >
<td >
Hello World
</td>
<td >
Hello World
</td>
<td width="20%" rowspan="5">
<img width="100%" height="200px" src="images/1.jpg">
</td>
</tr>
<td width="20%" rowspan="5">表示从该行的第三列开始往下在数五行。接下来的五行的第三列都合并到一起，同事该下面的五行的第三列删掉
<img width="100%" height="300px" src="images/1.jpg">
设置图片的高和宽，高为300px,宽为该列宽的100%，同时在应用images下的名字为1.jpg的图片，首先，1.jpg的图片应该先保存在、images下面才可以
在下边加入
<body>
<form action="" method="post">
在Javascript 中，页面上的每一对
标记都解析为一个对象，即form 对象。
可以通过document.forms 获取以源顺序排列的文档中所有form 对象的集合。
如果一个表单对象定义如下：
<</SPAN>form name="frm1" method="post" action="login.aspx">
获得该表单对象的方法：
i> document.forms["frm1"]; // 根据name属性值
ii> document.forms[0]; // 根据索引号
iii> document.frm1; // 直接根据name值获得对象
176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
