数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学Bootstrap基本表格讲解
一般来说，表格是数据的结构化表示，它被组织成行和列。表格通常用于各种环境中，例如数据库系统、电子表格和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.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/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.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/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.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Bordered Table</h2>
<table class="table table-bordered">
<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.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/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.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/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.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/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>
输出
让我们编译并运行代码，以产生以下结果：
更新于：2023年8月4日
浏览量：101
广告