<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery3.3.1.js"></script>
<script src="bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css"/>
<style>
h1 {
text-align: center;
}
tr,th {
text-align: center; height: 30px;line-height: 30px;
}
img {
width: 30px;
}
ul {
width: 500px;
margin: 0 auto;
list-style: none;
}
li {
width: 50px;
float: left;
}
</style>
</head>
<body>
<div id="container">
<table class="table table-bordered table-hover">
<h1>学生信息表 <small><a href="#">添加</a></small></h1>
<thead>
<tr >
<th colspan="2">信息</th>
<th colspan="3">科目</th>
<th colspan="2" rowspan="2" style="line-height: 60px;">操作</th>
</tr>
<tr>
<th>ID</th>
<th>姓名</th>
<th >语文</th>
<th>数学</th>
<th>外语</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td><img src="p1.png" />张三</td>
<td>75</td>
<td>66</td>
<td>65</td>
<td><a href="#">查询</a></td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>02</td>
<td><img src="p1.png" />李四</td>
<td>75</td>
<td>66</td>
<td>65</td>
<td><a href="#">查询</a></td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>03</td>
<td><img src="p1.png" />王五</td>
<td>75</td>
<td>66</td>
<td>65</td>
<td><a href="#">查询</a></td>
<td><a href="#">修改</a></td>
</tr>
</tbody>
</table>
<div id="app">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">...</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
