解释 Bootstrap 中的基本表格
bootstrapweb developmentfront end technology更新于 2026/1/25 2:22:17
通常，表格是一种结构化的数据表示形式，由行和列组成。表格常用于各种环境，例如数据库系统、电子表格和 HTML 网站。
在 HTML 中，如果我们创建一个基本表格，它只会显示其中的记录，没有任何边框或单元格分隔线。而在 Bootstrap 中，基本表格具有浅填充和水平分隔线。Bootstrap 提供了一系列 CSS 类，用于创建视觉上吸引人的网站。
在本文中，我们将讨论所有可用于在 Bootstrap 中创建和设置表格样式的不同类，并附上合适的示例。
Bootstrap 基本表格
我们可以使用".table"类创建一个基本的 Bootstrap 表格。它只有浅填充和水平分隔线。
示例
在下面的示例中，我们使用 table 标签内的".table"类创建一个基本的 Bootstrap 表格。
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Basic Table</h2>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr>
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr>
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
输出
执行上述查询后，输出将显示一个基本的 Bootstrap 表格 -
条纹行
使用".table-striped"类，我们可以在表格中添加斑马条纹。
示例
在下面的示例中，我们使用".table-striped"类在表格的行中添加斑马条纹。
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Striped Table</h2>
<table class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr>
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr>
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
输出
执行给定查询后，输出显示如下 -
带边框的表格
".table-bordered"类可用于为整个表格和单元格添加边框 -
示例
这里，我们使用".table-bordered"类为表格和单元格的所有边添加边框 -
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Bordered Table</h2>
<table class="w3-table-all notranslate">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr>
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr>
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
输出
上述查询的输出如下所示 -
悬停表格行
".table-hover"类用于在表格行上添加悬停效果。每当鼠标悬停在表格行上时，都会添加灰色背景色。
示例
在下面的示例中，我们在表格行上使用".table-hover"类。因此，每当鼠标悬停在表格行上时，都会添加灰色背景。
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Bordered Table</h2>
<table class="table table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr>
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr>
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
输出
如果我们编译并运行查询，结果将如下所示:
精简表格
".table-condensed"类会将单元格内边距减半，使表格更加紧凑。
示例
这里，我们在 table 标签中使用了".table-condensed"类。
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Condensed Table</h2>
<table class="table table-condensed">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr>
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr>
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
上下文类
在 Bootstrap 中，上下文类用于为表格行或表格数据添加颜色。以下是可用的上下文类 -
.active - 为表格行或单元格添加悬停颜色(灰色)。
.success - 此颜色表示成功或积极的操作。
.info - 此颜色表示中性的信息性更改或操作。
.warning - 此颜色表示警告。
.danger - 此颜色表示危险或潜在的负面操作。
示例
在下面的示例中，我们在表格行上使用所有上述上下文类 -
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Contextual Classes</h2>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr class="danger">
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr class="info">
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>14523</td>
</tr>
<tr class="warning">
<td>James</td>
<td>Anderson</td>
<td>51</td>
<td>53124</td>
</tr>
<tr class="active">
<td>Stuart</td>
<td>Broad</td>
<td>42</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
输出
让我们编译并运行查询，以产生以下结果 -
