您的位置:首页 > Web前端 > HTML

html基础知识(三):表格和表单进阶

2019-06-12 15:29 1116 查看

html基础知识(三):表格和表单进阶

1. 题目:课程表中的表格显示
1.1 课程表代码实现图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课程表</title>
<style>
table{align-content: center;color:rebeccapurple}
/*table tr th{background: blue;}*/
</style>
</head>
<body>
<table align="center" width="500" height="800" border="1" background="img/b.jpg"
cellpadding="0" cellspacing="0">
<!--快速创建表格的
table>tr*5>td*9
-->
<caption><h2>第3周</h2></caption>
<tr>
<th>6月</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
</tr>
<tr>
<td>1</td>
<td rowspan="2" bgcolor="aqua">高职实用英语</td>
<td rowspan="2" bgcolor="#483d8b" >中国现代文学</td>
<td rowspan="2" bgcolor="#ffc0cb">思想道德与法律基础</td>
<td rowspan="2" ></td>
<td rowspan="2" bgcolor="#db7093">基础写作</td>
<td rowspan="10" bgcolor="#fafad2">思想道德与法律基础</td>
<td rowspan="2"></td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" bgcolor="#ffc0cb">思想道德与法律基础</td>
<td rowspan="2" bgcolor="green">普通话训练</td>
<td rowspan="2" bgcolor="aqua">高职实用英语</td>
<td rowspan="2" bgcolor="yellow">文学概论</td>
<td rowspan="2" bgcolor="#db7093">现代汉语</td>
<td rowspan="2"></td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td rowspan="2" bgcolor="yellow">文学概论</td>
<td rowspan="2" bgcolor="#db7093">基础写作</td>
<td rowspan="2" bgcolor="green">普通话训练</td>
<td rowspan="2" bgcolor="#483d8b">中国现代当代文学</td>
<td rowspan="3" bgcolor="orange">专业导论与专业创业</td>
<td rowspan="2"></td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td rowspan="2" bgcolor="#adff2f">体育与健康</td>
<td rowspan="2" bgcolor="#db7093">现代汉语</td>
<td rowspan="2"></td>
<td rowspan="2" bgcolor="#006400">大学生心理健康教育</td>
<td rowspan="2"></td>
</tr>
<tr>
<td>8</td>
<td></td>
</tr>
<tr>
<td>9</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td>10</td>
</tr>
</table>

</body>
</html>

1.2 课程表代码实现图**

2. 题目:项目申请表单**
*2.1 项目申请表单实现代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>项目招标申请表</title>
</head>
<body>
<form>
<table align="center" width="1000" height="800" border="1" bgcolor="#f0fff0"
cellpadding="0" cellspacing="0">
<tr>
<td colspan="15" align="center" style="color: orange"><h2>项目申请表</h2></td>
</tr>
<tr>
<td colspan="5">项目编号<input type="text" name="id1"/></td>
<td colspan="2">申请编号</td>
<td><input type="text" name="id2"/></td>
<td colspan="2">申请人</td>
<td colspan="7"><input type="text" name="name"/></td>
</tr>
<tr>
<td rowspan="9"><h2>项目概况</h2></td>
<td colspan="2">项目名称</td>
<td colspan="13"><input type="text" name="name5" style="width: 500px"/></td>
</tr>
<tr>
<td colspan="2">项目地址</td>
<td colspan="12"><input type="text"  name="address" style="width: 500px"/></td>
</tr>
<tr>
<td colspan="2">项目总投资</td>
<td><input type="text" name="money"/></td>
<td colspan="2">项目来源</td>
<td><input type="text" name="source"/></td>
</tr>
<tr>
<td colspan="2">项目性质</td>
<td colspan="12"><input type="checkbox" name="cha" value="1"/>国有及国有控股%&nbsp;&nbsp;
<input type="checkbox" name="cha" value="2"/>外贸独资&nbsp;&nbsp;
<input type="checkbox" name="cha" value="3"/>个人投资&nbsp;&nbsp;
<input type="checkbox" name="cha" value="4"/>国际组织或者外国政府贷款、资助资金&nbsp;&nbsp;<br/>
<input type="checkbox" name="cha" value="5"/>国家政策融资&nbsp;&nbsp;
<input type="checkbox" name="cha" value="6"/>中外台资&nbsp;&nbsp;
<input type="checkbox" name="cha" value="7"/>其它&nbsp;&nbsp;
</td>
</tr>
<tr>
<td colspan="2" rowspan="3">项目规模</td>
<td colspan="4">标段</td>
<td colspan="4">建筑面积</td>
<td colspan="4">栋号</td>
</tr>
<tr>
<td colspan="4"><input type="text" name="area"/></td>
<td colspan="4"><input type="text" name="area"/></td>
<td colspan="4"><input type="text" name="area"/></td>
</tr>
<tr>
<td colspan="4"><input type="text" name="area"/></td>
<td colspan="4"><input type="text" name="area"/></td>
<td colspan="4"><input type="text" name="area"/></td>
</tr>
<tr>
<td colspan="2">项目类型</td>
<td colspan="12"><input type="checkbox" name="type1" value="1"/>住宅&nbsp;&nbsp;
<input type="checkbox" name="type1" value="2"/>公建&nbsp;&nbsp;
<input type="checkbox" name="type1" value="3"/>厂房&nbsp;&nbsp;
<input type="checkbox" name="type1" value="4"/>市政&nbsp;&nbsp;
<input type="checkbox" name="type1" value="5"/>场站&nbsp;&nbsp;
<input type="checkbox" name="type1" value="6"/>管线&nbsp;&nbsp;
<input type="checkbox" name="type1" value="7"/>道桥&nbsp;&nbsp;
<input type="checkbox" name="type1" value="8"/>绿化&nbsp;&nbsp;
<input type="checkbox" name="type1" value="9"/>其它&nbsp;&nbsp;
</td>
</tr>
<tr>
<td colspan="2">招标类型</td>
<td colspan="12"><input type="checkbox" name="type2" value="1"/>斟察&nbsp;&nbsp;
<input type="checkbox" name="type2" value="2"/>设计&nbsp;&nbsp;
<input type="checkbox" name="type2" value="3"/>施工&nbsp;&nbsp;
<input type="checkbox" name="type2" value="4"/>监理&nbsp;&nbsp;
<input type="checkbox" name="type2" value="5"/>设备&nbsp;&nbsp;
<input type="checkbox" name="type2" value="6"/>项目管理&nbsp;&nbsp;
</td>
</tr>
<tr>
<td rowspan="3">建设单位</td>
<td colspan="2">单位名称</td>
<td colspan="5"><input type="text" name="class1"/></td>
<td colspan="2">经办人</td>
<td colspan="5"><input type="text" name="class2"/></td>
</tr>
<tr>
<td colspan="2">单位地址</td>
<td colspan="12"><input type="text" name="class2" style="width: 800px"/></td>
</tr>
<tr>
<td colspan="2">法定代表</td>
<td colspan="5"><input type="text" name="class3"/></td>
<td colspan="2">授权委托人</td>
<td colspan="5"><input type="text" name="class3"/></td>
</tr>
</table>
</form>
</body>
</html>

2.2 项目申请表单实现图

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: