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

2023-09-14 14:52:30

目录

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>

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

更多推荐

tauri vue vite elemrntui

tauri+vue+viterust```根据https://www.rust-lang.org/tools/install，安装rust。如果是windows会跳出vs工具的安装器，会自动勾选要安装的，直接点安装即可执行cargo--version检查安装是否完成，可以使用cargo创建一个hello项目验证rust

OpenCV中的HoughLines函数和HoughLinesP函数到底有什么区别？

一、简述基于OpenCV进行直线检测可以使用HoughLines和HoughLinesP函数完成的。这两个函数之间的唯一区别在于，第一个函数使用标准霍夫变换，第二个函数使用概率霍夫变换（因此名称为P）。概率版本之所以如此，是因为它仅分析点的子集并估计这些点都属于同一条线的概率。此实现是标准霍夫变换的优化版本，在这种情况

Go语言实践案例之简单字典

一、程序要实现效果：在命令行调用程序的时候，可以在命令行的后面查询一个单词，然后会输出单词的音标和注释。二、思路分析：定义一个结构体DictRequest，用于表示翻译请求的数据结构。其中包含了TransType（翻译类型）、Source（源语言单词）、UserID（用户ID）等字段。定义一个结构体DictRespon

GO编程实践：如何高效使用变量

GO语言是一种强类型、静态编译的编程语言，它具有简洁的语法和强大的并发支持。在GO语言中，变量的定义和使用是非常重要的基本概念之一。下面是关于如何在GO语言中定义变量的详细说明，使用Markdown格式呈现：GO语言变量定义在GO语言中，变量的定义涉及到两个关键步骤：声明和初始化。首先，我们需要声明变量的类型，然后可以

MyBatis核心配置文件解析: 一步步深入理解mybatis-config.xml

😀前言在进行MyBatis项目开发时，合理和高效的配置是确保项目顺利进行的基础。其中，mybatis-config.xml配置文件扮演着极其重要的角色，它包含了MyBatis运行时的各种必要配置信息，如数据库连接属性、事务管理器配置、别名配置等。.提供了一份详细的mybatis-config.xml配置文件解析，一步

Go语言开发环境搭建指南：快速上手构建高效的Go开发环境

Go官网：https://go.dev/dl/Go语言中文网：https://studygolang.com/dl下载Go的语言包进入官方网站Go官网或Go语言中文网：选择下载对应操作系统的安装包：等待下载完成：安装Go的语言包双击运行上一步下载好的Go语言包，点击【Next】：勾选【Iacceptthetermsin

深入了解接口测试：方法、工具和关键考虑因素（一）

接口测试是软件测试中的一项重要工作，它涉及到系统与系统之间的交互点。接口可以是外部接口，也可以是内部接口，包括上层服务与下层服务接口以及同级接口。在接口测试中，我们需要确保接口能够按照预期的方式进行通信和交互，并且能够正确处理输入和输出数据。什么是接口？接口是具有特定输入和输出的一套逻辑处理单元，它不需要了解内部的实现

蓝牙核心规范（V5.4）10.7-BLE 入门笔记之L2CAP

1.概述ATT属性用于两个设备，一个扮演客户端的角色，另一个扮演服务器的角色。服务器公开一系列称为属性的复合数据项。这些属性由服务器按索引列表组织在称为属性表的列表中。每个属性包含一个句柄、一个通用唯一标识符（UUID）、一个值和一组权限。句柄是一个唯一的索引值，ATT客户端可以使用该值来引用属性表中的特定条目。UUI

四川百幕晟科技：提升店铺质量方法是什么？

抖店是抖音旗下的移动电子商务平台，为商家提供在线销售和促销的机会。在抖店，经验值是商家评价和信誉的重要指标之一。反映了平台上商户的服务质量和用户满意度。那么，如何查看自己在抖店手机上的体验分数呢？1、如何查看抖店手机的体验分？1、打开抖音APP：首先，商户需要打开抖音手机APP，登录抖音账号。2.进入“我的”页面：在抖

李开复：我家的AI是坠吼的

创新工场董事长、鸿海独立董事李开复，近日出席鸿海股东会暨媒体记者会时表示，人工智能（AI）是人类史上即将面临的最伟大技术革命，未来十年的改变将改写人类历史、重构所有产业，其发展大致可分三阶段，并看好鸿海在当中软硬件整合方面的优势，非常有机会成为AI相关领域顶尖领导者。李开复所提到的AI发展三阶段，第一波是纯软件将大数据

SpringMVC之JSON返回&异常处理机制

目录一.JSON1.1.介绍1.2.SpringMVC之JSON数据返回1.2.1.导入依赖1.2.2.配置spring-mvc.xml1.2.3.@ResponseBody注解使用1.2.4.常用注解二.统一异常处理2.1.为什么要全局异常处理2.2.异常处理思路2.2.异常处理方式一2.3.异常处理方式二2.4.异

热文推荐
  1. 生信分析Python实战练习 9 | 视频27

    开源生信Python教程生信专用简明Python文字和视频教程源码在：https://github.com/Tong-Chen/Bioinfo_course_python目录背景介绍编程开篇为什么学习Python如何安装Python如何运行Python命令和脚本使用什么编辑器写Python脚本Python程序事例Pyt

  2. Springboot部署服务器项目上线

    第一步，项目打包，有两种方式第一种、直接在项目根目录打开终端，输入以下语句即可。如下图：mvncleanpackage-DskipTests第二种、在右侧点击Maven选项，选择鼠标左键双击package选项即可。如下图：两种方法的结果，都会得到我们需要jar包，效果如下图：（可选项）如果觉得jar包名太难记，还可以在

  3. “Vue进阶：深入理解插值、指令、过滤器、计算属性和监听器“

    目录引言：Vue的插值Vue的指令Vue的过滤器Vue的计算属性和监听器vue购物车案例总结：引言：Vue.js是一款流行的JavaScript框架，它提供了许多强大的功能来简化前端开发。在本篇博客中，我们将深入探讨Vue的一些高级特性，包括插值、指令、过滤器、计算属性和监听器。通过理解和灵活运用这些功能，我们可以更好

  4. 10个值得关注的学习网站，知乎超30万人收藏，什么资源都可找到！

    hi，大家好我是技术苟，每周准时上线为你带来实用黑科技！由于公众号改版，现在的公众号消息已经不再按照时间顺序排送了。因此小伙伴们就很容易错过精彩内容。喜欢黑科技的小伙伴，可以将黑科技百科公众号设为标星，这样就不会走丢啦~免责声明hello，朋友们，黑科技百科所有资源均为免费分享，绝多部分来源于互联网，所有资源仅提供学习

  5. 线程的方法(未完成)

    线程的方法1.获取当前线程对象:CurrentThread()@Testpublicvoidbb(){Threadthread=Thread.currentThread();System.out.println(thread.getName());//打印main}2.currentThread().setName和c

  6. CPP-Templates-2nd--第 21 章 模板和继承

    目录21.1空基类优化（TheEmptyBaseClassOptimization，EBCO）21.1.1布局原则21.1.2将数据成员实现为基类21.2TheCuriouslyRecurringTemplatePattern(CRTP)21.2.1TheBarton-NackmanTrick21.2.2运算符的实现（

  7. 客户端和服务端信息交互模型

    什么是客户端和服务端？客户端：可以向服务器发请求，并接收返回的内容进行处理服务器端：能够接收客户端请求，并且把相关资源信息返回给客户端的当用户在地址栏中输入网址，到最后看到页面，中间都经历了什么？后面会详细解析每个步骤干的事一、URL地址解析A:URI/URL/URNURI(UniformResourceldentif

  8. 云服务部署：AWS、Azure和GCP比较

    🌷🍁博主猫头虎（🐅🐾）带您GotoNewWorld✨🍁🦄博客首页——🐅🐾猫头虎的博客🎐🐳《面试题大全专栏》🦕文章图文并茂🦖生动形象🐅简单易学！欢迎大家来踩踩~🌺🌊《IDEA开发秘籍专栏》🐾学会IDEA常用操作，工作效率翻倍~💐🌊《100天精通Golang(基础入门篇）》🐅学会Gol

  9. 【腾讯云 Cloud Studio 实战训练营】提升开发效率与协作：探索腾讯云 Cloud Studio 的强大功能与优势

    文章目录一、前言二、认识腾讯云CloudStudio2.1什么是云端开发环境2.2CDE的特点与优点2.2.1提高效率，开发环境一键运行2.2.2提高生产力，可以并行的工作2.2.3开发更加规范2.2.4提供监管，降低资本与资源2.3云端开发环境具备的四大要素2.4腾讯云CloudStudio强大的AI功能2.4.1与