WEB前端网页设计-Bootstrap5 表格

已于 2023-05-01 22:09:14 修改
阅读量2k 收藏 5
点赞数 2
分类专栏： WEB-HTML/CSS 文章标签： html javascript css
于 2023-04-30 17:03:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57099902/article/details/130449748
版权

目录

Bootstrap5 基础表格

条纹表格

带边框表格

鼠标悬停状态表格

黑色背景表格

黑色条纹表格

鼠标悬停效果 - 黑色背景表格

无边框表格

指定意义的颜色类

表头颜色

较小的表格

响应式表格

Bootstrap5 基础表格

Bootstrap5 通过 .table 类来设置基础表格的样式，实例如下:

<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

条纹表格

通过添加 .table-striped 类，您将在 <tbody> 内的行上看到条纹，如下面的实例所示：

<table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

带边框表格

.table-bordered 类可以为表格添加边框

<table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

鼠标悬停状态表格

.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）：

<table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

黑色背景表格

.table-dark 类可以为表格添加黑色背景：

<table class="table table-dark">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

黑色条纹表格

联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格：

<table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

鼠标悬停效果 - 黑色背景表格

联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果：

<table class="table table-dark table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

无边框表格

.table-borderless 类可以设置一个无边框的表格：

<table class="table table-borderless">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>

指定意义的颜色类

通过指定意义的颜色类可以为表格的行或者单元格设置颜色：

<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="table-primary">
        <td>Primary</td>
        <td>Joe</td>
        <td>joe@example.com</td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="table-info">
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class="table-active">
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td>
        <td>Secondson</td>
        <td>sec@example.com</td>
      </tr>
      <tr class="table-light">
        <td>Light</td>
        <td>Angie</td>
        <td>angie@example.com</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dark</td>
        <td>Bo</td>
        <td>bo@example.com</td>
      </tr>
    </tbody>
</table>

下表列出了表格颜色类的说明:

类名描述
.table-primary蓝色: 指定这是一个重要的操作
.table-success绿色: 指定这是一个允许执行的操作
.table-danger红色: 指定这是可以危险的操作
.table-info浅蓝色: 表示内容已变更
.table-warning橘色: 表示需要注意的操作
.table-active灰色: 用于鼠标悬停效果
.table-secondary灰色: 表示内容不怎么重要
.table-light浅灰色，可以是表格行的背景
.table-dark深灰色，可以是表格行的背景

表头颜色

我们也可以设置表头的颜色，例如 .table-dark 类用于给表头添加黑色背景， .table-light 类用于给表头添加灰色背景:

<table class="table">
    <thead class="table-dark">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  <table class="table">
    <thead class="table-light">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

较小的表格

.table-sm 类用于通过减少内边距来设置较小的表格:

<table class="table table-bordered table-sm">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

响应式表格

.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）:

<div class="table-responsive">
<table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
        <th>Sex</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
    </tbody>
</table>
</div>

你可以通过以下类设定在指定屏幕宽度下显示滚动条：

类名屏幕宽度
.table-responsive-sm< 576px
.table-responsive-md< 768px
.table-responsive-lg< 992px
.table-responsive-xl< 1200px
.table-responsive-xxl< 1400px
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
你可知这世上再难遇我
关注
专栏目录
Bootstrap-表格模板（动态满屏）【筛选+分页+排序】
12-26
用Bootstrap的css样式以及JS、jQuery制作的动态更新表格模板，具有筛选、分页、排序等功能，全屏页面。表格制作精美，数据显示清晰合理，可直接应用于前端的开发。
漂亮的表格 HTML表格
07-01
漂亮的表格html,鼠标移动到表格上会自动通过CSS效果选中一行以及一列。
前端开发表单及表格介绍
2301_78154597的博客
09-23 539
初学复习阶段表格、列表、表单的使用
基于bootstrap的漂亮表格.rar
07-27
一套基于bootstrap的漂亮表格，支持响应式布局，包含动态效果的图表，供大家研究学习
bootstrap中六种表格样式
weixin_34337381的博客
11-29 1597
表格表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。同样的，如果你对CSS预处理器熟悉，你可以使用Bootstrap提供的预处理版本： LESS版本，对...
Bootstrap—轻松制作漂亮表格（table）
热门推荐
生如夏花 炫至茶靡
12-12 3万+
学习了runoob.com网站中的bootstrap内容之后，参照其中的内容自己一下总结，以便帮助在这方面有疑惑的朋友，也有助于自己更好的消化所学的内容。 我们应该庆幸自己活在这样一个互联网时代，开放、共享。很多之前我们费尽心思去实现的效果已经有前辈为我们总结出来并做成很好的框架，共享出来让我们使用，使得我们轻松就能实现很漂亮的效果。 下面就使用一个实例来讲一下如何使用Bootstrap现成的
Boostrap表格
abc1498880402的博客
12-04 617
表格 基本实例 为任意 &lt;table&gt; 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。 Optional table caption. # First Name ...
入门2.HTML表格
qq_44682019的博客
09-26 404
HTML表格 主要内容： 了解表格应用场景 表格基本结构 如何操作表格 表格属性 表格跨行跨列 案例：表格网页布局 数据的展示 HTML表格 <table border="1">表格 <caption></caption>表格标题，居中显示 <thead> <tr>行 <th>表格头，内容居中，加粗显示</th> </tr> </thead> <tbody> <tr
WEB前端框架应用（Bootstrap）课程设计
03-07
在本“WEB前端框架应用（Bootstrap）课程设计”中，我们将深入探讨如何使用Bootstrap这一流行的前端框架来构建高效、响应式且美观的网页。Bootstrap是由Twitter开发并开源的一款框架，它为开发者提供了丰富的预设...
前端项目-twitter-bootstrap.zip
09-02
Twitter Bootstrap，简称Bootstrap，是Web开发者们广泛使用的前端框架，尤其因其响应式设计和移动优先的理念而深受喜爱。它提供了一系列预先设计和编码的组件，大大简化了网页开发过程，使得开发者能够快速构建美观...
前端项目-jasny-bootstrap.zip
09-03
总之，Jasny Bootstrap 是一个强大的工具，它扩展了Bootstrap的功能，使得前端开发者在构建现代Web应用时拥有更多选择。无论是初创项目还是现有项目的优化，都可以考虑利用Jasny Bootstrap来提升用户体验和设计质量...
教大家轻松制作Bootstrap漂亮表格（table）
11-27
学习了runoob.com网站中的bootstrap内容之后，参照其中的内容自己做一下总结，以便帮助在这方面有疑惑的朋友，也有助于自己更好的消化所学的内容。 我们应该庆幸自己活在这样一个互联网时代，开放、共享。很多之前我们费尽心思去实现的效果已经有前辈为我们总结出来并做成很好的框架，共享出来让我们使用，使得我们轻松就能实现很漂亮的效果。 下面就使用一个实例来讲一下如何使用Bootstrap现成的css样式直接加在我们的table表格上，我们只需要写很少的代码就能轻松制作漂亮表格。 比如我们要制作一个像下面这个表格： 有了Bootstrap，只需写好html内容结构，加上Bootstra
网页设计表单
12-29
网页设计 课后小作业 表单的制作 很简单
前端开源库-doxdox-plugin-bootstrap
08-30
5. **组件集成**：可以方便地集成Bootstrap的按钮、表格、卡片等组件，提升文档的交互性和用户体验。 在实际应用中，开发者可以通过以下步骤使用doxdox-plugin-bootstrap： 1. **安装**：首先需要在项目中安装...
web-app-bootstrap
02-12
5. **响应式设计**: "web-app-bootstrap"利用Bootstrap的响应式栅格系统，确保应用在不同设备上（如手机、平板、桌面）都能有良好的显示效果。这涉及到流式布局、媒体查询和适应不同屏幕尺寸的组件。 6. **模块化...
bootstrap--表格（table的各种样式）
ShowTime_Shawn的博客
10-17 1万+
  目录 bootstrap--表格（table的各种样式） Bootstrap 表格类样式 ☑  .table：基础表格，为任意 &lt;table&gt; 添加基本样式 (只有横向分隔线) ☑  .table-striped：斑马线表格 ☑  .table-bordered：带边框的表格 ☑  .table-hover：鼠标悬停高亮的表格 ☑  .table-condensed...
WEB前端网页设计-Bootstrap 表格
君逍遥o
03-15 648
WEB前端网页设计-Bootstrap 表格
前端必知必会-Bootstrap 5 模板
最新发布
qq_24018193的博客
10-24 445
本文介绍了Bootstrap 5 模板的使用，如有问题欢迎私信和评论。
网页制作如何设置表格背景
10-13
在网页制作中，如果你想设置表格的背景，可以使用HTML和CSS来实现。下面是一些基本的步骤： 1. **HTML**: 创建一个表格 `<table>`，并在其内部定义 `<tr>` 行和 `<td>` 单元格。 ```html <table class="custom-table"> <tr> <td>单元格1</td> <td>单元格2</td> </tr> <!-- 更多行... --> </table> ``` 2. **CSS**: 在外部样式表（`.css` 文件）或`<style>` 标签中，针对 `.custom-table` 类设置背景颜色、图片或者其他效果。 ```css .custom-table { background-color: /* 背景颜色 */; background-image: url(「你的图片URL」); /* 如果你想使用背景图 */ background-repeat: no-repeat; /* 控制图片是否平铺 */ background-position: center; /* 图片居中对齐 */ border-collapse: collapse; /* 避免边框重叠 */ } /* 如果你想要单元格有不同的背景，可以选择特定的 td 元素 */ .custom-table td { background-color: /* 单元格背景色 */; } ``` 记得将上述代码中的 `background-color` 和 `background-image` 替换成你需要的实际颜色和图片地址。 如果你想要背景是渐变或者复杂的图案，可以使用 CSS 的 `linear-gradient()` 或 `radial-gradient()` 函数来创建。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你可知这世上再难遇我

君不见黄河之水天上来

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值