[代码实例][HTML][Bootstrap]表格样式

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Bootstrap Demo 36</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

	<script type="text/javascript" src="Js/jquery-3.5.1.min.js"></script>

	<%-- css:Bootstrap --%>
	<link rel="stylesheet" href="Lib/bootstrap-4.5.2/css/bootstrap.min.css" />
</head>
<body class="container">
	<h2>求职者信息表1</h2>
	<table class="table table-borderless">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>学历</th>
				<th>专业</th>
				<th>电话</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>刘语熙</td>
				<td>男</td>
				<td>22</td>
				<td>本科</td>
				<td>现代通信技术</td>
				<td>13112345678</td>
			</tr>
			<tr>
				<td>周欣</td>
				<td>女</td>
				<td>21</td>
				<td>本科</td>
				<td>电子工程</td>
				<td>13312345678</td>
			</tr>
			<tr>
				<td>方兴旺</td>
				<td>男</td>
				<td>23</td>
				<td>本科</td>
				<td>土木工程</td>
				<td>18912345678</td>
			</tr>
			<tr>
				<td>林欢欢</td>
				<td>女</td>
				<td>22</td>
				<td>研究生</td>
				<td>国际经济贸易</td>
				<td>15112345678</td>
			</tr>
		</tbody>
	</table>

	<h2>求职者信息表2</h2>
	<table class="table table-striped">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>学历</th>
				<th>专业</th>
				<th>电话</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>刘语熙</td>
				<td>男</td>
				<td>22</td>
				<td>本科</td>
				<td>现代通信技术</td>
				<td>13112345678</td>
			</tr>
			<tr>
				<td>周欣</td>
				<td>女</td>
				<td>21</td>
				<td>本科</td>
				<td>电子工程</td>
				<td>13312345678</td>
			</tr>
			<tr>
				<td>方兴旺</td>
				<td>男</td>
				<td>23</td>
				<td>本科</td>
				<td>土木工程</td>
				<td>18912345678</td>
			</tr>
			<tr>
				<td>林欢欢</td>
				<td>女</td>
				<td>22</td>
				<td>研究生</td>
				<td>国际经济贸易</td>
				<td>15112345678</td>
			</tr>
		</tbody>
	</table>

	<h2>求职者信息表3</h2>
	<table class="table table-striped table-bordered">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>学历</th>
				<th>专业</th>
				<th>电话</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>刘语熙</td>
				<td>男</td>
				<td>22</td>
				<td>本科</td>
				<td>现代通信技术</td>
				<td>13112345678</td>
			</tr>
			<tr>
				<td>周欣</td>
				<td>女</td>
				<td>21</td>
				<td>本科</td>
				<td>电子工程</td>
				<td>13312345678</td>
			</tr>
			<tr>
				<td>方兴旺</td>
				<td>男</td>
				<td>23</td>
				<td>本科</td>
				<td>土木工程</td>
				<td>18912345678</td>
			</tr>
			<tr>
				<td>林欢欢</td>
				<td>女</td>
				<td>22</td>
				<td>研究生</td>
				<td>国际经济贸易</td>
				<td>15112345678</td>
			</tr>
		</tbody>
	</table>

	<h2>求职者信息表4</h2>
	<table class="table table-hover">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>学历</th>
				<th>专业</th>
				<th>电话</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>刘语熙</td>
				<td>男</td>
				<td>22</td>
				<td>本科</td>
				<td>现代通信技术</td>
				<td>13112345678</td>
			</tr>
			<tr>
				<td>周欣</td>
				<td>女</td>
				<td>21</td>
				<td>本科</td>
				<td>电子工程</td>
				<td>13312345678</td>
			</tr>
			<tr>
				<td>方兴旺</td>
				<td>男</td>
				<td>23</td>
				<td>本科</td>
				<td>土木工程</td>
				<td>18912345678</td>
			</tr>
			<tr>
				<td>林欢欢</td>
				<td>女</td>
				<td>22</td>
				<td>研究生</td>
				<td>国际经济贸易</td>
				<td>15112345678</td>
			</tr>
		</tbody>
	</table>

	<h2>求职者信息表5</h2>
	<table class="table table-sm">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>学历</th>
				<th>专业</th>
				<th>电话</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>刘语熙</td>
				<td>男</td>
				<td>22</td>
				<td>本科</td>
				<td>现代通信技术</td>
				<td>13112345678</td>
			</tr>
			<tr>
				<td>周欣</td>
				<td>女</td>
				<td>21</td>
				<td>本科</td>
				<td>电子工程</td>
				<td>13312345678</td>
			</tr>
			<tr>
				<td>方兴旺</td>
				<td>男</td>
				<td>23</td>
				<td>本科</td>
				<td>土木工程</td>
				<td>18912345678</td>
			</tr>
			<tr>
				<td>林欢欢</td>
				<td>女</td>
				<td>22</td>
				<td>研究生</td>
				<td>国际经济贸易</td>
				<td>15112345678</td>
			</tr>
		</tbody>
	</table>

	<h2>求职者信息表6</h2>
	<table class="table table-striped table-dark">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>学历</th>
				<th>专业</th>
				<th>电话</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>刘语熙</td>
				<td>男</td>
				<td>22</td>
				<td>本科</td>
				<td>现代通信技术</td>
				<td>13112345678</td>
			</tr>
			<tr>
				<td>周欣</td>
				<td>女</td>
				<td>21</td>
				<td>本科</td>
				<td>电子工程</td>
				<td>13312345678</td>
			</tr>
			<tr>
				<td>方兴旺</td>
				<td>男</td>
				<td>23</td>
				<td>本科</td>
				<td>土木工程</td>
				<td>18912345678</td>
			</tr>
			<tr>
				<td>林欢欢</td>
				<td>女</td>
				<td>22</td>
				<td>研究生</td>
				<td>国际经济贸易</td>
				<td>15112345678</td>
			</tr>
		</tbody>
	</table>

	<h2>求职者信息表7</h2>
	<table class="table table-primary">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>学历</th>
				<th>专业</th>
				<th>电话</th>
			</tr>
		</thead>
		<tbody>
			<tr class="table-warning">
				<td>刘语熙</td>
				<td>男</td>
				<td>22</td>
				<td>本科</td>
				<td>现代通信技术</td>
				<td>13112345678</td>
			</tr>
			<tr class="table-danger">
				<td>周欣</td>
				<td>女</td>
				<td>21</td>
				<td>本科</td>
				<td>电子工程</td>
				<td>13312345678</td>
			</tr>
			<tr class="table-light">
				<td>方兴旺</td>
				<td>男</td>
				<td>23</td>
				<td>本科</td>
				<td>土木工程</td>
				<td>18912345678</td>
			</tr>
			<tr class="table-info">
				<td>林欢欢</td>
				<td>女</td>
				<td>22</td>
				<td>研究生</td>
				<td>国际经济贸易</td>
				<td>15112345678</td>
			</tr>
		</tbody>
	</table>

	<script type="text/javascript" src="Js/popper.min.js"></script>
	<script type="text/javascript" src="Lib/bootstrap-4.5.2/js/bootstrap.min.js"></script>

</body>
</html>