一下为HTML中的表格相关的作业
一、登陆界面
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆</title>
</head>
<body style="text-align: center;">
<div style="background-color: gainsboro;">
<form action="login.jsp" method="post">
<table style="text-align: center;background-color: white;" align="center" border="0" >
<tr>
<td colspan="2">
<h2>登陆系统</h2>
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" size="20" value="账号"/>
</td>
</tr>
<tr>
<td colspan="2">
<br /><input type="password" size="20" value="密码" placeholder="密码"/>
</td>
</tr>
<tr>
<td>
<br /><input type="text" size="10" value="验证码"/>
</td>
<td>
<br /><span style="font-size: small;">7236//</span>
</td>
</tr>
<tr>
<td colspan="2">
<br /><input type="image" src="img/QQ截图20200909171533.png"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
因为写的过程中全程是使用HTML做的，没有使用css所以界面做出来有些难看
效果截图：
二、医院管理系统的挂号管理
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div align="center">
<div align="right" style="background-color: darkblue;width: 80%;">
<table>
<tr>
<td><span style="color: white;">老胡，欢迎你 【退出】</span></td>
</tr>
</table>
</div>
<div align="left" style="background-color: mediumblue;width: 80%;">
<table>
<tr>
<td><span style="background-color:gainsboro;">医院管理系统</span></td>
<td></td>
</tr>
</table>
</div>
<div style="background-color: gainsboro; width: 80%;" >
<table align="left" width="100%" style="background-color: gainsboro;">
<tr>
<td><span style="background-color: white;">挂号管理</span></td>
</tr>
</table>
</div>
<div>
<form action="login.jsp" method="post">
<table border="1" width="80%">
<tr>
<td>病历号：</td>
<td>
<input type="text" />
</td>
<td>主治医生:</td>
<td>
<input type="text" />
</td>
<td>科室:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>挂号时间：</td>
<td colspan="5">
<input type="text" />至<input type="text" />
<input type="image" src="img/QQ截图20200909181703.png"/>
<input type="image" src="img/QQ截图20200909181714.png"/>
</td>
</tr>
</table>
</form>
</div>
<div>
<table border="1" width="80%">
<tr>
<th><input type="checkbox" /></th>
<th>门诊编号</th>
<th>主治医生</th>
<th>挂号时间</th>
<th>挂号科室</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1103</td>
<td>程俊</td>
<td>2015-09-09 12：12：12</td>
<td>血液科</td>
<td>已挂号</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 退号</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1104</td>
<td>王博</td>
<td>2015-12-09 12：12：12</td>
<td>骨科</td>
<td>已询医</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 退号</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1105</td>
<td>沈青川</td>
<td>2015-02-04 15：11：12</td>
<td>外科</td>
<td>已询医</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 退号</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1106</td>
<td>欧阳雨露</td>
<td>2014-09-05 12：12：12</td>
<td>急诊科</td>
<td>已出院</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 退号</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1107</td>
<td>艾小天</td>
<td>2014-02-09 12：12：11</td>
<td>妇科</td>
<td>已退号</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 退号</span>
</td>
</tr>
<tr>
<td colspan="4">
<input type="image" src="img/QQ截图20200909181733.png" />
<input type="image" src="img/QQ截图20200909181744.png" />
<input type="image" src="img/QQ截图20200909181755.png" />
<input type="image" src="img/QQ截图20200909181805.png" />
</td>
<td colspan="3" align="right">
<span style="color: deepskyblue;">第一页 上一页
<span style="color: red;">1</span> 2 3 4 5 下一页
最后一页 </span>
<span>共 <span style="color: red;">32</span>条记录
<span style="color: red;">1/33 </span>页</span>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
效果截图，因为有些部分还没有学习，首先做了一个简单的界面出来：
三、门诊医生管理
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div align="center">
<div align="right" style="background-color: darkblue;width: 80%;">
<table>
<tr>
<td><span style="color: white;">老胡，欢迎你 【退出】</span></td>
</tr>
</table>
</div>
<div align="left" style="background-color: mediumblue;width: 80%;">
<table>
<tr>
<td><span style="background-color:gainsboro;">医院管理系统</span></td>
<td></td>
</tr>
</table>
</div>
<div style="background-color: gainsboro;width: 80%;">
<table align="left" style="background: gainsboro;">
<tr>
<td><span>挂号管理</span></td>
<td><span style="background-color: white;">门诊医生管理</span></td>
</tr>
</table>
</div>
<div>
<form action="login.jsp" method="post">
<table border="1" width="80%">
<tr>
<td>医生编号：</td>
<td>
<input type="text" />
</td>
<td>医生姓名:</td>
<td>
<input type="text" />
</td>
<td>科室:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="image" src="img/QQ截图20200909181703.png"/>
<input type="image" src="img/QQ截图20200909181714.png"/>
</td>
</tr>
</table>
</form>
</div>
<div>
<table border="1" width="80%">
<tr>
<th><input type="checkbox" /></th>
<th>医生编号</th>
<th>医生姓名</th>
<th>入院时间</th>
<th>所属科室</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1103</td>
<td>程俊</td>
<td>2015-09-09 12：12：12</td>
<td>血液科</td>
<td>
<span style="color: deepskyblue;">详情>>>更改</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1104</td>
<td>王博</td>
<td>2015-12-09 12：12：12</td>
<td>骨科</td>
<td>
<span style="color: deepskyblue;">详情>>>更改</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1105</td>
<td>沈青川</td>
<td>2015-02-04 15：11：12</td>
<td>外科</td>>
<td>
<span style="color: deepskyblue;">详情>>>更改</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1106</td>
<td>欧阳雨露</td>
<td>2014-09-05 12：12：12</td>
<td>急诊科</td>
<td>
<span style="color: deepskyblue;">详情>>>更改</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1107</td>
<td>艾小天</td>
<td>2014-02-09 12：12：11</td>
<td>妇科</td>
<td>
<span style="color: deepskyblue;">详情>>>更改</span>
</td>
</tr>
<tr>
<td colspan="4">
<input type="image" src="img/QQ截图20200910143212.png" />
<input type="image" src="img/QQ截图20200909181755.png" />
</td>
<td colspan="2" align="right">
<span style="color: deepskyblue;">第一页 上一页
<span style="color: red;">1</span> 2 3 4 5 下一页
最后一页 </span>
<span>共 <span style="color: red;">32</span>条记录
<span style="color: red;">1/33 </span>页</span>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
效果截图：
四、药品管理
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div align="center">
<div align="right" style="background-color: darkblue;width: 80%;">
<table>
<tr>
<td><span style="color: white;">老胡，欢迎你 【退出】</span></td>
</tr>
</table>
</div>
<div align="left" style="background-color: mediumblue;width: 80%;">
<table>
<tr>
<td><span style="background-color:gainsboro;">医院管理系统</span></td>
<td></td>
</tr>
</table>
</div>
<div style="background-color: gainsboro; width: 80%;" >
<table align="left" style="background-color: gainsboro;">
<tr>
<td>挂号管理</td>
<td>门诊医生管理</td>
<td><span style="background-color: white;">药品管理</span></td>
</tr>
</table>
</div>
<div>
<form action="login.jsp" method="post">
<table border="1" width="80%">
<tr>
<td>商品名称：</td>
<td>
<input type="text" />
</td>
<td>药品类型:</td>
<td>
<select name="type" size="1">
<option value="0" selected="selected">中药</option>
<option value="1">西药</option>
<option value="2">处方药</option>
</select>
</td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="image" src="img/QQ截图20200909181703.png"/>
<input type="image" src="img/QQ截图20200909181714.png"/>
</td>
</tr>
</table>
</form>
</div>
<div>
<table border="1" width="80%">
<tr>
<th><input type="checkbox" /></th>
<th>药品编号</th>
<th>药品名称</th>
<th>药品类型</th>
<th>简单描述</th>
<th>状态</th>
<th>剩余量</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>J1121</td>
<td>感冒药</td>
<td>处方</td>
<td>用于普通感冒</td>
<td>销售中</td>
<td>1000袋</td>
<td>
<span style="color: deepskyblue;">更改>>>详情</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>J1121</td>
<td>感冒药</td>
<td>处方</td>
<td>用于普通感冒</td>
<td>销售中</td>
<td>1000袋</td>
<td>
<span style="color: deepskyblue;">更改>>>详情</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>J1121</td>
<td>感冒药</td>
<td>处方</td>
<td>用于普通感冒</td>
<td>销售中</td>
<td>1000袋</td>
<td>
<span style="color: deepskyblue;">更改>>>详情</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>J1121</td>
<td>感冒药</td>
<td>处方</td>
<td>用于普通感冒</td>
<td>销售中</td>
<td>1000袋</td>
<td>
<span style="color: deepskyblue;">更改>>>详情</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>J1121</td>
<td>感冒药</td>
<td>处方</td>
<td>用于普通感冒</td>
<td>销售中</td>
<td>1000袋</td>
<td>
<span style="color: deepskyblue;">更改>>>详情</span>
</td>
</tr>
<tr>
<td colspan="6">
<input type="image" src="img/QQ截图20200910144130.png" />
<input type="image" src="img/QQ截图20200909181744.png" />
<input type="image" src="img/QQ截图20200910144140.png" />
</td>
<td colspan="3" align="right">
<span style="color: deepskyblue;">第一页 上一页
<span style="color: red;">1</span> 2 3 4 5 下一页
最后一页 </span>
<span>共 <span style="color: red;">32</span>条记录
<span style="color: red;">1/33 </span>页</span>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
效果截图：
五、挂号管理
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div align="center">
<div align="right" style="background-color: darkblue;width: 80%;">
<table>
<tr>
<td><span style="color: white;">老胡，欢迎你 【退出】</span></td>
</tr>
</table>
</div>
<div align="left" style="background-color: mediumblue;width: 80%;">
<table>
<tr>
<td><span style="background-color:gainsboro;">医院管理系统</span></td>
<td></td>
</tr>
</table>
</div>
<div style="background-color: gainsboro;width: 80%;">
<table align="left" style="background-color: gainsboro;">
<tr>
<td><span style="background-color: white;">挂号管理</span></td>
<td>门诊医生管理</td>
<td>药品管理</td>
</tr>
</table>
</div>
<div>
<form action="login.jsp" method="post" >
<table border="1" width="80%">
<tr>
<td>姓名</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>证件类型</td>
<td colspan="3">
<select name="card" size="1">
<option value="0" selected="selected">身份证</option>
<option value="1">护照</option>
<option value="2">港澳居民来往内地通行证</option>
<option value="3">台湾居民来往内地通行证</option>
<option value="4">军人证</option>
<option value="5">港澳台居民居住证</option>
<option value="6">其他</option>
</select>
</td>
</tr>
<tr>
<td>证件号</td>
<td colspan="3"><input type="text" /></td>
</tr>
<tr>
<td>社保号</td>
<td colspan="3"><input type="text" /></td>
</tr>
<tr>
<td>挂号费</td>
<td colspan="3"><input type="text" />元</td>
</tr>
<tr>
<td>联系电话</td>
<td colspan="3"><input type="text" /></td>
</tr>
<tr>
<td>是否自费</td>
<td colspan="3">
<input type="radio" name="check" checked="checked"/>否
<input type="radio" name="check" />是
</td>
</tr>
<tr>
<td>性别</td>
<td colspan="3">
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex" />女
</td>
</tr>
<tr>
<td>年龄</td>
<td colspan="3"><input type="text" /></td>
</tr>
<tr>
<td>职业</td>
<td colspan="3"><input type="text" /></td>
</tr>
<tr>
<td>初复诊</td>
<td colspan="3">
<input type="radio" name="select" checked="checked"/>初诊
<input type="radio" name="select" />复诊
</td>
</tr>
<tr>
<td>所挂科室</td>
<td colspan="3">
<select name="kind" size="1">
<option value="0" selected="selected">急诊科</option>
<option value="1">骨科</option>
<option value="2">血液科</option>
<option value="3">外科</option>
<option value="4">妇科</option>
</select>
</td>
</tr>
<tr>
<td>指定医生</td>
<td colspan="3">
<select name="name" size="1">
<option value="0" selected="selected">程俊</option>
<option value="1">王博</option>
<option value="1">沈青川</option>
<option value="1">欧阳雨露</option>
<option value="1">艾小天</option>
</select>
</td>
</tr>
<tr>
<td>备注</td>
<td colspan="3">
<textarea cols="15" rows="3"></textarea>
</td>
</tr>
<tr align="center">
<td colspan="4">
<input type="image" src="img/QQ截图20200909180455.png"/>
<input type="image" src="img/QQ截图20200909180509.png"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
效果截图：
六、门诊医生管理
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div align="center">
<div align="right" style="background-color: darkblue;width: 80%;">
<table>
<tr>
<td><span style="color: white;">老胡，欢迎你 【退出】</span></td>
</tr>
</table>
</div>
<div align="left" style="background-color: mediumblue;width: 80%;">
<table>
<tr>
<td><span style="background-color:gainsboro;">医院管理系统</span></td>
<td></td>
</tr>
</table>
</div>
<div style="background-color: gainsboro;width: 80%;">
<table align="left" style="background-color: gainsboro;">
<tr>
<td>挂号管理</td>
<td><span style="background-color: white;">门诊医生管理</span></td>
<td>药品管理</td>
</tr>
</table>
</div>
<div>
<form action="login.jsp" method="post" >
<table border="1" width="80%">
<tr>
<td>姓名</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>证件类型</td>
<td colspan="3">
<select name="card" size="1">
<option value="0" selected="selected">身份证</option>
<option value="1">护照</option>
<option value="2">港澳居民来往内地通行证</option>
<option value="3">台湾居民来往内地通行证</option>
<option value="4">军人证</option>
<option value="5">港澳台居民居住证</option>
<option value="6">其他</option>
</select>
</td>
</tr>
<tr>
<td>证件号</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>手机</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>座机</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex" />女
</td>
</tr>
<tr>
<td>出生年月</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>年龄</td>
<td>28岁</td>
</tr>
<tr>
<td>电子邮箱</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>所属科室</td>
<td>
<select name="kind" size="1">
<option value="0" selected="selected">急诊科</option>
<option value="1">骨科</option>
<option value="2">血液科</option>
<option value="3">外科</option>
<option value="4">妇科</option>
</select>
</td>
</tr>
<tr>
<td>学历</td>
<td>
<select name="study" size="1">
<option value="0" selected="selected">本科</option>
<option value="1">小学</option>
<option value="2">初中</option>
<option value="3">高中</option>
<option value="4">中专</option>
<option value="5">专科</option>
<option value="6">硕士</option>
<option value="7">博士</option>
</select>
</td>
</tr>
<tr>
<td>备注</td>
<td>
<textarea cols="15" rows="3"></textarea>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="image" src="img/QQ截图20200909180455.png"/>
<input type="image" src="img/QQ截图20200909180509.png"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
效果截图：
七、药品管理
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div align="center">
<div align="right" style="background-color: darkblue;width: 80%;">
<table>
<tr>
<td><span style="color: white;">老胡，欢迎你 【退出】</span></td>
</tr>
</table>
</div>
<div align="left" style="background-color: mediumblue;width: 80%;">
<table>
<tr>
<td><span style="background-color:gainsboro;">医院管理系统</span></td>
<td></td>
</tr>
</table>
</div>
<div style="background-color: gainsboro;width: 80%;">
<table align="left" style="background-color: gainsboro;">
<tr>
<td>挂号管理</td>
<td>门诊医生管理</td>
<td><span style="background-color: white;">药品管理</span></td>
</tr>
</table>
</div>
<div>
<form action="login.jsp" method="post" >
<table border="1" width="80%">
<tr>
<td>药品编号</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>图片</td>
<td>
<input type="file" name="files"/>
</td>
</tr>
<tr>
<td>进价</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>售价</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>药品名称</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>商品类型</td>
<td>
<input type="radio" name="type" checked="checked"/>处方药
<input type="radio" name="type" />中药
<input type="radio" name="type" />西药
</td>
</tr>
<tr>
<td>简单描述</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>生产日期</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>过期日期</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>保质期</td>
<td>30天</td>
</tr>
<tr>
<td>详细描述</td>
<td>
<textarea cols="15" rows="3"></textarea>
</td>
</tr>
<tr>
<td>生产厂商</td>
<td>
<textarea cols="15" rows="3"></textarea>
</td>
</tr>
<tr>
<td>服药说明</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>总的进货量</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>剩余</td>
<td>300</td>
</tr>
<tr>
<td>备注</td>
<td>
<textarea cols="15" rows="3"></textarea>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="image" src="img/QQ截图20200909180455.png"/>
<input type="image" src="img/QQ截图20200909180509.png"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
效果截图：
本次的作业我是用的只有html没有使用css美化页面，所以效果看起来很差，很简陋，如果有错误请大家指正。
839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
