Boostrap对HTML的表格的设计和优化

目录

  • 01-Bootstrap的默认表格风格
  • 02-没有边线-边界的表格
  • 03-行与行的背景颜色交替变换(条纹样式)
  • 04-给表格加上边框效果
  • 05-鼠标移到行上时该行的颜色加深
  • 06-把表格的padding值缩减一半,使表格看起来更紧凑
  • 07-为表格的行或单元格设置颜色

01-Bootstrap的默认表格风格

Bootstrap对表格的相关HTML标签进行了覆写和优化，有如下这些与表格相关的标签被覆写和优化了：
<table>：表格容器。
<thead>：表格的表头容器。
<th>：表格表头中的单元格。
<tbody>：表格主体容器。
<tr>：表格的行。
<td>：表格的单元格，在<tbody>内使用。<td>标签来自于英文单词"table data"的缩写。

以上标签的示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>设置表格的默认样式</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2 align="center">商品销售表</h2>
<table class="table"><thead><tr><th>名称</th><th>产地</th><th>价格</th><th>库存</th><th>销量</th></tr></thead><tbody><tr><td>洗衣机</td><td>北京</td><td>6800元</td><td>2600台</td><td>1200台</td> </tr><tr><td>冰箱</td><td>上海</td><td>5990元</td><td>3600台</td><td>800台</td> </tr><tr><td>空调</td><td>广州</td><td>12660元</td><td>4200台</td><td>1200台</td> </tr><tr><td>电视机</td><td>西安</td><td>2688元</td><td>6900台</td><td>500台</td></tr></tbody>
</table>
</body>
</html>

运行结果如下图所示：
在这里插入图片描述

02-没有边线-边界的表格

为<table>标签添加类 table-borderless 可以实现无边界风格的表格。
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>没有边框的表格</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2 align="center">学生成绩表</h2>
<table class="table table-borderless"><thead><tr><th>姓名</th><th>班级</th><th>语文</th><th>数学</th><th>英语</th></tr></thead><tbody><tr><td>张宝</td><td>一班</td><td>89</td><td>96</td><td>69</td></tr><tr><td>李丰</td><td>一班</td><td>93</td><td>94</td><td>98</td></tr>
</table>
</body>
</html>

运行效果如下：
在这里插入图片描述

03-行与行的背景颜色交替变换(条纹样式)

可以用Bootstrap的类table-striped自动为表格的每一行（tr元素）添加条纹样式，使得每一行的背景色交替变化，从而提供更好的可读性。这对于大量数据的表格非常有用，因为它可以帮助用户更容易地区分不同的行。
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>条纹状的表格</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2  align="center">1月份工资表</h2>
<table class="table table-striped"><thead><tr><th>姓名</th><th>部门</th><th>工资</th><th>奖金</th></tr></thead><tbody><tr><td>刘梦</td><td>销售部</td><td>8600元</td><td>800元</td></tr><tr><td>李丽</td><td>销售部</td><td>4500元</td><td>900元</td></tr><tr><td>张龙</td><td>财务部</td><td>6800元</td><td>1200元</td> </tr><tr><td>林笑天</td><td>设计部</td><td>7800元</td><td>600元</td></tr></tbody>
</table>
</body>
</html>

运行效果如下：
在这里插入图片描述
没有条纹样式的效果如下：
在这里插入图片描述

04-给表格加上边框效果

可以利用类table-bordered实现边框效果。
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>表格边框风格</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2  align="center">商品入库表</h2>
<table class="table table-bordered"><thead><tr><th>名称</th><th>入库时间</th><th>产地</th><th>数量</th></tr></thead><tbody><tr><td>洗衣机</td><td>3月18日</td><td>上海</td><td>800台</td></tr><tr><td>冰箱</td><td>2月21日</td><td>北京</td><td>900台</td></tr><tr><td>电视机</td><td>2月11日</td><td>广州</td><td>1200台</td> </tr></tbody>
</table>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述
如果没有加边框，效果如下：
在这里插入图片描述

05-鼠标移到行上时该行的颜色加深

可以利用类table-hover实现边框效果。
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>鼠标指针悬停风格</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2  align="center">商品入库表</h2>
<table class="table table-hover"><thead><tr><th>名称</th><th>入库时间</th><th>产地</th><th>数量</th></tr></thead><tbody><tr><td>洗衣机</td><td>3月18日</td><td>上海</td><td>800台</td></tr><tr><td>冰箱</td><td>2月21日</td><td>北京</td><td>900台</td></tr><tr><td>电视机</td><td>2月11日</td><td>广州</td><td>1200台</td> </tr></tbody>
</table>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

06-把表格的padding值缩减一半,使表格看起来更紧凑

利用类table-sm可把表格的padding值缩减一半,使表格看起来更紧凑
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>紧凑风格</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2  align="center">商品入库表</h2>
<table class="table table-sm"><thead><tr><th>名称</th><th>入库时间</th><th>产地</th><th>数量</th></tr></thead><tbody><tr><td>洗衣机</td><td>3月18日</td><td>上海</td><td>800台</td></tr><tr><td>冰箱</td><td>2月21日</td><td>北京</td><td>900台</td></tr><tr><td>电视机</td><td>2月11日</td><td>广州</td><td>1200台</td> </tr></tbody>
</table>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述
不缩减padding的效果如下：
在这里插入图片描述

07-为表格的行或单元格设置颜色

可以用下面这些类实现为行或单元格设置颜色：

  1. table-primary: 用于突出显示表格中的主要数据，通常使用主题中的主要颜色。

  2. table-secondary: 用于突出显示表格中的次要数据，通常使用主题中的次要颜色。

  3. table-success: 用于突出显示表格中的成功或正面信息，通常使用绿色。

  4. table-danger: 用于突出显示表格中的危险或错误信息，通常使用红色。

  5. table-warning: 用于突出显示表格中的警告或注意信息，通常使用黄色。

  6. table-info: 用于突出显示表格中的一般信息，通常使用蓝色或淡蓝色。

  7. table-light: 用于创建具有浅色背景的表格。

  8. table-dark: 用于创建具有深色背景的表格。

示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>设置表格背景的颜色</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">以下为设置表格行的背景色</h2>
<table class="table"><tbody><tr class="table-primary"><td>1. `table-primary`: 用于突出显示表格中的主要数据，通常使用主题中的主要颜色。</td></tr><tr class="table-secondary"><td>2. `table-secondary`: 用于突出显示表格中的次要数据，通常使用主题中的次要颜色。</td></tr><tr class="table-success"><td>3. `table-success`: 用于突出显示表格中的成功或正面信息，通常使用绿色。</td></tr><tr class="table-danger"><td>4. `table-danger`: 用于突出显示表格中的危险或错误信息，通常使用红色。</td></tr>	<tr class="table-warning"><td>5. `table-warning`: 用于突出显示表格中的警告或注意信息，通常使用黄色。</td></tr><tr class="table-info"><td>6. `table-info`: 用于突出显示表格中的一般信息，通常使用蓝色或淡蓝色。</td></tr><tr class="table-light"><td>7. `table-light`: 用于创建具有浅色背景的表格。</td></tr><tr class="table-dark"><td>8. `table-dark`: 用于创建具有深色背景的表格。</td></tr></tbody>
</table><h3 align="center">以下为设置表格的单元格的背景色</h2>
<table class="table"><tbody><tr><td class="table-primary">1-`table-primary`</td><td class="table-secondary">2-`table-secondary`</td><td class="table-success">3-`table-success`</td><td class="table-danger">4-`table-danger`</td><td class="table-warning">5-`table-warning`</td><td class="table-info">6-`table-info`</td><td class="table-light">7-`table-light`</td><td class="table-dark">8-`table-dark`</td></tr></tbody>
</table></body>
</html>

运行效果如下图所示：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/111481.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【OpenSSL】VC编译OpenSSL

【OpenSSL】VC编译OpenSSL

VC编译OpenSSL 编译工具准备编译OpenSSL建立Hello World工程创建VS工程 编译工具准备 安装好Visual Studio。安装Perl, 主要是用来生成nmake的。准备好汇编语言编译工具nasm,并添加到path路径。下载好Open SSL源代码。 编译OpenSSL 安装Perl,并加入到path路径&#xff0c;检验…
阅读更多...
相机HAL

相机HAL

相机HAL 1、概览实现 HAL2、相机 HAL2.1 AIDL 相机 HAL2.2 相机 HAL3 功能2.3 Camera HAL1 概览 相机 HAL 相机 实现 HAL android12-release 1、概览实现 HAL HAL 位于 相机驱动程序 和 更高级别的 Android 框架 之间&#xff0c;它定义您必须实现的接口&#xff0c;以便应用…
阅读更多...
ESP-IDF学习——1.环境安装与hello-world

ESP-IDF学习——1.环境安装与hello-world

ESP-IDF学习——1.环境安装与hello-world 0.前言一、环境搭建1.官方IDE工具2.vscode图形化配置 二、示例工程三、自定义工程四、点灯五、总结 0.前言 最近在学习freertos&#xff0c;但由于买的书还没到&#xff0c;所以先捣鼓捣鼓ESP-IDF&#xff0c;因为这个比Arduino更接近底…
阅读更多...
Bash脚本学习：AWK, SED

Bash脚本学习：AWK, SED

1. AWK AWK 是一种编程语言&#xff0c;设计用于处理文件或数据流中基于文本的数据&#xff0c;或者使用 shell 管道。 可以将 awk 与 shell 脚本结合使用或直接在 shell 提示符下使用。 以上展示使用AWK分别打印第一个位置变量和第二个位置变量。 建立一个文档 csvtest.cs…
阅读更多...
什么是无人机全自动飞行系统？概念、构成、作用深度解析

什么是无人机全自动飞行系统？概念、构成、作用深度解析

无人机的工业化应用深入催生出新的痛点&#xff0c;无人机应用飞手培养难、成本高、技术参差不齐&#xff0c;以及应急响应和采集作业价值等没有得到充分释放&#xff0c;由此无人机自动飞行系统、无人机自动机场横空出世&#xff0c;因其无人化、自动化、无人机值守的应用特性…
阅读更多...
设计模式之十：状态模式

设计模式之十：状态模式

状态模式通过改变对象内部的状态来帮助对象控制自己的行为。 这是一张状态图&#xff0c;其中每个圆圈都是一个状态。 最简单&#xff0c;第一反应的实现就是使用一个变量来控制状态值&#xff0c;并在方法内书写条件代码来处理不同情况。 package headfirst.designpatterns.…
阅读更多...
Springboot 实践（18）Nacos配置中心参数自动刷新测试

Springboot 实践（18）Nacos配置中心参数自动刷新测试

前文讲解了Nacos 2.2.3配置中心的服务端的下载安装&#xff0c;和springboot整合nacos的客户端。Springboot整合nacos关键在于使用的jar版本要匹配&#xff0c;文中使用版本如下&#xff1a; ☆ springboot版本: 2.1.5.RELEASE ☆ spring cloud版本 Greenwich.RELEASE ☆ sp…
阅读更多...
72、Spring Data JPA 的 Specification 动态查询

72、Spring Data JPA 的 Specification 动态查询

Specification&#xff1a;规范、规格 ★ Specification查询 它也是Spring Data提供的查询——是对JPA本身 Criteria 动态查询 的包装。▲ 为何要有动态查询 页面上常常会让用户添加不同的查询条件&#xff0c;程序就需要根据用户输入的条件&#xff0c;动态地组合不同的查询…
阅读更多...
ConfigMaps-2

ConfigMaps-2

文章目录 主要内容一.Volume 挂载 ConfigMap1.创建一个Pod&#xff0c;起挂载的内容&#xff0c;将来自下面的configmap&#xff1a;代码如下&#xff08;示例&#xff09;: 2.解释 二.环境变量 ConfigMap1.创建一个名为 mysqlpass 且包含 passwordABCabc123 的 configmap&…
阅读更多...
操作系统期末复习笔记

操作系统期末复习笔记

文章目录 操作系统第1章 计算机系统概述1 指令执行的基本指令周期2 中断分类与中断处理过程2.1 中断的定义2.2 中断分类2.3 中断的意义2.4 无中断2.5 有中断2.6 中断和指令周期2.7 中断处理的过程 3 处理多中断的两种方法3.1 顺序中断处理&#xff08;禁止中断&#xff09;3.2 …
阅读更多...
【ICASSP 2023】ST-MVDNET++论文阅读分析与总结

【ICASSP 2023】ST-MVDNET++论文阅读分析与总结

主要是数据增强的提点方式。并不能带来idea启发&#xff0c;但对模型性能有帮助 Challenge&#xff1a; 少有作品应用一些全局数据增强&#xff0c;利用ST-MVDNet自训练的师生框架&#xff0c;集成了更常见的数据增强&#xff0c;如全局旋转、平移、缩放和翻转。 Contributi…
阅读更多...
STM32 ~ GPIO不同模式之间的区别与实现原理

STM32 ~ GPIO不同模式之间的区别与实现原理

GPIO全称General Purpose Input Output &#xff0c;即通用输入/输出。其实GPIO的本质就是芯片的一个引脚&#xff0c;通常在ARM中所有的I/O都是通用的。不过&#xff0c;由于每个开发板上都会设计不同的外围电路&#xff0c;这就造成了GPIO的功能可能有所不同。大部分GPIO都是…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023