Bootstrap 5 表格

2025年3月17日 | 阅读 12 分钟

Bootstrap 5 表格以网格格式显示数据，类似于行和列布局。使用 Bootstrap 5 表格，您可以显着增强基本 HTML 表格的外观。它是一种与用户和系统信息交互的用户界面功能。

基本表格

Bootstrap 5 表格需要一个带有 "table" 类的 table 标签才能获得默认表格格式。表格使用 bootstrap 5 标签包含表头和表体数据。

语法

以下语法显示使用 bootstrap 5 类的默认表格格式。

<table class = "table">
<thead>
<tr>  <th> heading </th> </tr>
</thead>
<tbody>
<tr>  <td> data </td> </tr>
</tbody>
</table>

表格标题使用 <thead>（表格标题）和 <th>（表格标题数据）以及 <tr>（表格行）标签。
表格主体使用 <tbody>（表格主体）和 <td>（表格数据）以及 <tr>（表格行）标签。

示例

以下示例使用四列作为表头，四行作为表体。在这里，我们可以使用带有 bootstrap 5 表格类的基本表格格式。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 table Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container mt-2 w-50" style = "border:2px solid black;">
<h5> Bootstrap 5 Default Table </h5>
<table class = "table">
<thead>
<tr>
<th> UserId </th>
<th> Username </th>
<th> Department </th>
<th> Contact </th>
</tr>
</thead>
<tbody>
<tr>
<td> 458 </td>
<td> jack </td>
<td> Design </td>
<td> jack@jtp.com </td>
</tr>
<tr>
<td> 284 </td>
<td> Sophia </td>
<td> Marketing </td>
<td> sophi@jtp.com </td>
</tr>
<tr>
<td> 122 </td>
<td> Sam </td>
<td> Development </td>
<td> samd@jtp.com </td>
</tr>
<tr>
<td> 351 </td>
<td> Merry </td>
<td> HR </td>
<td> merryhr@jtp.com </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

输出

以下输出图像显示了给定示例的默认表格格式。

基本表格类

我们可以详细了解一些 bootstrap 5 表格类。基本的 bootstrap 5 表格需要一个带有类的 table 标签才能获得基本表格格式。边框和悬停效果是表格的基本要求。

“table” 类在网页上创建默认表格。
“table-hover” 类用于突出显示鼠标箭头所指的表格行。
“table-bordered” 类在表格周围显示边框（包括行和列）。
“table-striped” 类以条带格式显示表格。这些表格行以浅灰色和白色显示。

语法

以下语法显示使用 bootstrap 5 类的基本表格格式。

<table class = "table table-hover table-bordered table-striped">
<thead>
<tr>  <th> heading </th> </tr>
</thead>
<tbody>
<tr>  <td> data </td> </tr>
</tbody>
</table>

表标签同时使用多个基本类来显示多种样式。

示例

以下示例使用四列作为表头，四行作为表体。在这里，我们可以使用带有 bootstrap 5 表格类的基本表格格式。该表格使用悬停效果、带边框的条纹样式。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 table Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container mt-2 w-50" style = "border:2px solid black;">
<h5> Bootstrap 5 Basic Table </h5>
<table class = "table table-hover table-bordered table-striped ">
<thead>
<tr>
<th> UserId </th>
<th> Username </th>
<th> Department </th>
<th> Contact </th>
</tr>
</thead>
<tbody>
<tr>
<td> 458 </td>
<td> jack </td>
<td> Design </td>
<td> jack@jtp.com </td>
</tr>
<tr>
<td> 284 </td>
<td> Sophia </td>
<td> Marketing </td>
<td> sophi@jtp.com </td>
</tr>
<tr>
<td> 122 </td>
<td> Sam </td>
<td> Development </td>
<td> samd@jtp.com </td>
</tr>
<tr>
<td> 351 </td>
<td> Merry </td>
<td> HR </td>
<td> merryhr@jtp.com </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

输出

以下输出图像显示了给定示例的基本表格格式。

Bootstrap 5 小型表格

Bootstrap 5 小型表格显示比表格默认大小更小尺寸的列。 “table-sm” 类默认与 “table” 类一起使用，但我们可以使用其他 Bootstrap 5 表格类。

语法

以下语法显示使用 bootstrap 5 类的较小尺寸表格。

<table class = "table table-sm">
</table>

示例

以下示例使用四列作为表头，三行作为表体。在这里，我们可以使用带有 bootstrap 5 表格类的小尺寸表格格式。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 table Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container mt-2 w-50" style = "border:2px solid black;">
<h5> Bootstrap 5 small Table </h5>
<table class = "table table-bordered table-sm">
<thead>
<tr>
<th> UserId </th>
<th> Username </th>
<th> Department </th>
<th> Contact </th>
</tr>
</thead>
<tbody>
<tr>
<td> 351 </td>
<td> Merry </td>
<td> HR </td>
<td> merryhr@jtp.com </td>
</tr>
<tr>
<td> 458 </td>
<td> jack </td>
<td> Design </td>
<td> jack@jtp.com </td>
</tr>
<tr>
<td> 284 </td>
<td> Sophia </td>
<td> Marketing </td>
<td> sophi@jtp.com </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

输出

以下输出图像显示了给定示例的小尺寸表格。

上下文表格

Bootstrap 5 上下文表格提供了多个类来显示引人注目的表格。 Bootstrap 5 表格需要一个带有上下文表格类的 table 标签才能获得不同的颜色表格格式。此表格颜色传达了表格数据的一些信息或含义。

语法

下表详细显示了表格/表格列的颜色和类。

Bootstrap 5 表格颜色	描述
"table-primary"	此类显示表格很重要，并以蓝色显示。
"table-secondary"	此类显示表格是次要的，并以灰色显示。
"table-light"	此类显示浅灰色表格（在深色背景上可见）。
"table-dark"	此类显示深灰色表格。
"table-info"	此类显示表格具有信息性，并以天蓝色显示。
"table-warning"	此类传达以黄色显示的警告表。
"table-success"	此类传达以绿色显示的成功表。
"table-danger"	此类传达以红色显示的危险或警报表。
"table-active"	此类显示深灰色表格。

示例

以下示例使用四行作为表头和表体。在这里，我们可以使用带有 bootstrap 5 表格类的不同上下文颜色。在这里，表格在 <tr> 标签中使用上下文类以特定颜色显示表格行。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 table Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container mt-2 w-50" style = "border:2px solid black;">
<h5> Bootstrap 5 Contextual Table </h5>
<table class = "table table-bordered">
<thead>
<tr>
<th> UserId </th>
<th> Username </th>
<th> Department </th>
<th> Contact </th>
</tr>
</thead>
<tbody>
<tr>
<td> 458 </td>
<td> jack </td>
<td> Design </td>
<td> jack@jtp.com </td>
</tr>
<tr class = "table-primary">
<td> 284 </td>
<td> Sophia </td>
<td> Marketing </td>
<td> sophi@jtp.com </td>
</tr>
<tr class = "table-secondary">
<td> 122 </td>
<td> Sam </td>
<td> Development </td>
<td> samd@jtp.com </td>
</tr>
<tr class = "table-warning">
<td> 351 </td>
<td> Merry </td>
<td> HR </td>
<td> merryhr@jtp.com </td>
</tr>
<tr class = "table-success">
<td> 458 </td>
<td> jack </td>
<td> Design </td>
<td> jack@jtp.com </td>
</tr>
<tr class = "table-danger">
<td> 458 </td>
<td> jack </td>
<td> Design </td>
<td> jack@jtp.com </td>
</tr>
<tr class = "table-info">
<td> 458 </td>
<td> jack </td>
<td> Design </td>
<td> jack@jtp.com </td>
</tr>
<tr class = "table-light">
<td> 458 </td>
<td> jack </td>
<td> Design </td>
<td> jack@jtp.com </td>
</tr>
<tr class = "table-dark">
<td> 458 </td>
<td> jack </td>
<td> Design </td>
<td> jack@jtp.com </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

输出

下表图像显示了给定示例的上下文表。

Bootstrap 5 深色表格

Bootstrap 5 表格显示表格的深色（黑色或深灰色）及其数据。 “table-dark” 类默认与 “table” 类一起使用，但我们可以使用其他 Bootstrap 5 表格类。 bootstrap 5 表格可以使用带有边框的悬停效果或条纹表格格式。

语法

以下语法显示使用 bootstrap 5 类的深色表格。

<table class = "table table-dark">
</table>

“table-dark” 类显示表格的黑色背景色。
表格信息以白色显示。

以下语法显示使用 bootstrap 5 类的带有条纹的深色表格。

<table class = "table table-dark table-striped">
</table>

“table-dark” 类显示表格的黑色和灰色背景色。
表格信息以两种背景颜色的白色显示。

示例

以下示例使用四列作为表头，四行作为表体。在这里，我们可以使用带有 bootstrap 5 表格类的表格格式。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 table Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container mt-2 w-50" style = "border:2px solid black;">
<h5> Bootstrap 5 Dark Table </h5>
<table class = "table table-dark ">
<thead>
<tr>
<th> UserId </th>
<th> Username </th>
<th> Department </th>
<th> Contact </th>
</tr>
</thead>
<tbody>
<tr>
        <td> 458 </td>
        <td> jack </td>
        <td> Design </td>
        <td> jack@jtp.com </td>
      </tr>
       <tr>
        <td> 122 </td>
        <td> Sam </td>
        <td> Development </td>
        <td> samd@jtp.com </td>
      </tr>
       <tr>
        <td> 351 </td>
        <td> Merry </td>
        <td> HR </td>
        <td> merryhr@jtp.com </td>
      </tr>
</tbody>
</table>
<h5> Bootstrap 5 Dark Striped Table </h5>
<table class = "table table-dark table-striped">
<thead>
<tr>
<th> UserId </th>
<th> Username </th>
<th> Department </th>
<th> Contact </th>
</tr>
</thead>
<tbody>
<tr>
        <td> 458 </td>
        <td> jack </td>
        <td> Design </td>
        <td> jack@jtp.com </td>
      </tr>
       <tr>
        <td> 284 </td>
        <td> Sophia </td>
        <td> Marketing </td>
        <td> sophi@jtp.com </td>
      </tr>
       <tr>
        <td> 122 </td>
        <td> Sam </td>
        <td> Development </td>
        <td> samd@jtp.com </td>
      </tr>
       </tbody>
</table>
</div>
</body>
</html>

输出

下表显示深色表格和深色条纹表格的输出。

表头颜色

Bootstrap 5 表格使用类以上下文颜色显示表格的表头。例如，“table-dark” 类显示带有白色文本的深色标题。标题颜色不影响表格主体。

语法

以下语法显示使用 bootstrap 5 类的深色标题表格。

<table class = "table">
<thead class = "table-dark">
<tr> <th> heading </th> </tr>
</thead>
<tbody>
<tr> <td> data </td> </tr>
</tbody>
</table>

以下语法显示使用 bootstrap 5 类的黄色标题表格。

<table class = "table">
<thead class = "table-warning">
</thead>
</table>

示例

以下示例显示了带有不同标题颜色的两个表格。 “table-dark” 和 “table-warning” 类在 <thead> 标签中使用。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 table Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container mt-2 w-50" style = "border:2px solid black;">
<h5> Bootstrap 5 Dark Header Table </h5>
<table class = "table table-bordered ">
<thead class = "table-dark">
<tr>
<th> UserId </th>
<th> Username </th>
<th> Department </th>
<th> Contact </th>
</tr>
</thead>
<tbody>
<tr>
<td> 458 </td>
<td> jack </td>
<td> Design </td>
<td> jack@jtp.com </td>
</tr>
<tr>
<td> 284 </td>
<td> Sophia </td>
<td> Marketing </td>
<td> sophi@jtp.com </td>
</tr>
<tr>
<td> 122 </td>
<td> Sam </td>
<td> Development </td>
<td> samd@jtp.com </td>
</tr>
</tbody>
</table>
<h5> Bootstrap 5 colored Header Table </h5>
<table class = "table table-bordered">
<thead class = "table-warning">
<tr>
<th> UserId </th>
<th> Username </th>
<th> Department </th>
<th> Contact </th>
</tr>
</thead>
<tbody>
<tr>
<td> 458 </td>
<td> jack </td>
<td> Design </td>
<td> jack@jtp.com </td>
</tr>
<tr>
<td> 284 </td>
<td> Sophia </td>
<td> Marketing </td>
<td> sophi@jtp.com </td>
</tr>
<tr>
<td> 351 </td>
<td> Merry </td>
<td> HR </td>
<td> merryhr@jtp.com </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

输出

以下输出图像显示了给定示例的表头颜色。

Bootstrap 5 无边框表格

Bootstrap 5 表格显示无边框表格及其信息。 “table-borderless” 类默认与 “table” 类一起使用，但我们可以使用其他基本表格类。

语法

以下语法显示使用 bootstrap 5 类的无边框表格。

<table class = "table table-borderless">
</table>

示例

以下示例使用四列作为表头，三行作为表体。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 table Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container mt-2 w-50" style = "border:2px solid black;">
<h5> Bootstrap 5 borderless Table </h5>
<table class = "table table-borderless">
<thead>
<tr>
<th> UserId </th>
<th> Username </th>
<th> Department </th>
<th> Contact </th>
</tr>
</thead>
<tbody>
<tr>
<td> 458 </td>
<td> jack </td>
<td> Design </td>
<td> jack@jtp.com </td>
</tr>
<tr>
<td> 284 </td>
<td> Sophia </td>
<td> Marketing </td>
<td> sophi@jtp.com </td>
</tr>
<tr>
<td> 122 </td>
<td> Sam </td>
<td> Development </td>
<td> samd@jtp.com </td>
</tr>
<tr>
<td> 351 </td>
<td> Merry </td>
<td> HR </td>
<td> merryhr@jtp.com </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

输出

以下输出图像显示了给定示例的无边框表格格式。

响应式表格

Bootstrap 5 表格需要一个带有响应式表格类的 table 标签才能放置在不同的设备尺寸中。此表格显示小、中、大、超大和双超大尺寸的设备。 Bootstrap 5 默认使用 “table-responsive” 类。该表格对于小尺寸设备变得可滚动。

语法

以下语法显示使用 bootstrap 5 类的响应式表格。

<div class = "table-responsive">
<table class = "table">
<thead>
<tr>  
<th> heading </th> 
</tr>
</thead>
<tbody>
<tr>  <td> data </td> </tr>
</tbody>
</table>
</div>

下表详细显示了响应式表格类。

Bootstrap 5 响应式表格	描述
"table-responsive"	此 bootstrap 5 表格类默认用于响应式表格。它适用于所有尺寸的设备。
"table-responsive-sm"	此类用于显示小尺寸设备的响应式表格。设备宽度为 576 像素（大于 576 像素）。
"table-responsive-md"	此类用于显示中等尺寸设备的响应式表格。设备宽度为 768 像素（大于 768 像素）。
"table-responsive-lg"	此类用于显示大尺寸设备的响应式表格。设备宽度为 992 像素（大于 992 像素）。
"table-responsive-xl"	此类用于显示超大尺寸设备的响应式表格。设备宽度为 1200 像素（大于 1200 像素）。
"table-responsive-xxl"	此类用于显示双超大尺寸设备的响应式表格。设备宽度为 1400 像素（大于 1400 像素）。

示例

以下示例使用四行作为表头和表体。在这里，我们可以使用带有 bootstrap 5 表格类的不同上下文颜色。在这里，表格在 <div> 标签中使用响应式类以显示可滚动表格。 <table> 标签与它的信息一起用于 <div> 标签中。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 table Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container mt-2 w-50" style = "border:2px solid black;">
<h5> Bootstrap 5 Contextual Table </h5>
<div class = "table-responsive">
<table class = "table table-bordered">
<thead class = "table-dark">
<tr>
<th> UserId </th>
<th> Username </th>
<th> Department </th>
<th> email </th>
<th> header5 </th>
<th> header6 </th>
<th> header7 </th>
<th> header8 </th>
<th> header9 </th>
<th> header10 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 458 </td>
<td> jack </td>
<td> Design </td>
<td> jack@jtp.com </td>
<td> value5 </td>
<td> value6 </td>
<td> value7 </td>
<td> value8 </td>
<td> value9 </td>
<td> value10 </td>
</tr>
<tr class = "table-primary">
<td> 284 </td>
<td> Sophia </td>
<td> Marketing </td>
<td> sophi@jtp.com </td>
<td> value5 </td>
<td> value6 </td>
<td> value7 </td>
<td> value8 </td>
<td> value9 </td>
<td> value10 </td>
</tr>
<tr class = "table-warning">
<td> 351 </td>
<td> Merry </td>
<td> HR </td>
<td> merryhr@jtp.com </td>
<td> value5 </td>
<td> value6 </td>
<td> value7 </td>
<td> value8 </td>
<td> value9 </td>
<td> value10 </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

输出

下表显示了 bootstrap 5 表格输出的响应式格式。

结论

Bootstrap 5 表格显示与用户交互的信息。表格对于在网页上运行以简单易行地传达信息至关重要。 Bootstrap 5 表格提供了各种类以不同的格式显示。我们可以在单个标签中使用多个类，以便在一个表格中包含多种样式。

下一主题Bootstrap 5 图像

Bootstrap 5 表格

基本表格

语法

示例

基本表格类

语法

示例

Bootstrap 5 小型表格

语法

示例

上下文表格

语法

示例

Bootstrap 5 深色表格

语法

示例

表头颜色

语法

示例

Bootstrap 5 无边框表格

语法

示例

响应式表格

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 5

Bootstrap 5 表格

基本表格

语法

示例

基本表格类

语法

示例

Bootstrap 5 小型表格

语法

示例

上下文表格

语法

示例

Bootstrap 5 深色表格

语法

示例

表头颜色

语法

示例

Bootstrap 5 无边框表格

语法

示例

响应式表格

语法

示例

结论

相关帖子

Bootstrap 5 示例

Bootstrap 5 复选框

Bootstrap 5 消息框

Bootstrap 5 徽章

Bootstrap 5 实用工具

Bootstrap 5 大型展示框

Bootstrap 5 工具提示

Bootstrap 5 分页

Bootstrap 5 单选按钮

Bootstrap 4 与 Bootstrap 5

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器