<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>bootstrap表格的基本操作</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-striped table-bordered table-hover">
<caption class="h3 text-center">学生信息表</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>01</td>
<td>Sam</td>
<td>男</td>
<td>29</td>
</tr>
<tr class="danger">
<td>02</td>
<td>Xiong</td>
<td>男</td>
<td>29</td>
</tr>
<tr class="info">
<td>03</td>
<td>大宝</td>
<td>女</td>
<td>20</td>
</tr>
<tr class="success">
<td>04</td>
<td>二宝</td>
<td>女</td>
<td>18</td>
</tr>
<tr class="warning">
<td>05</td>
<td>三宝</td>
<td>男</td>
<td>16</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>更多的表格操作可看下：https://v3.bootcss.com/css/#tables