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

news2024/11/21 0:31:55

目录

  • 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.coloradmin.cn/o/1010838.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

手机上的动态ip流量是算自己的流量吗？

手机上的动态ip流量是算自己的流量吗？

正抓着手机的小伙伴们&#xff0c;大家好呀&#xff01;我们都知道&#xff0c;在手机上设置动态ip可以帮助我们访问被限制的网站和保护我们的隐私。但是&#xff0c;有一个让人困惑的问题一直困扰着大家&#xff1a;手机上使用动态ip时&#xff0c;这个流量算不算我们自己的流…
阅读更多...
【css案例】

【css案例】

三&#xff0c;案例 1.小米侧边栏 编辑 编辑 2.五彩导航 编辑 编辑 3. 编辑 编辑 4.小米布局编辑 编辑 编辑 5.淘宝焦点图 编辑 ![img](https://img-blog.csdnimg.cn/d067c55c445e4cccb13f23076d6331f8.png编辑 编辑 6.土豆网遮罩 编辑 编辑 7.旋转案例 编辑…
阅读更多...
css自学框架之图片懒加载

css自学框架之图片懒加载

首先解释一下什么叫图片懒加载。图片懒加载是一种在页面加载时&#xff0c;延迟加载图片资源的技术&#xff0c;也就是说图片资源在需要的时候才会加载&#xff0c;就是在屏幕显示范围内加载图片&#xff0c;屏幕显示范围外图片不加载。 一、关键函数 用到的关键函数&#xf…
阅读更多...
Pinctrl子系统_02_使用Pinctrl要掌握的重要概念

Pinctrl子系统_02_使用Pinctrl要掌握的重要概念

本节说明使用Pinctrl子系统时&#xff0c;要掌握的重要概念。 上节我们说到&#xff0c;我们通过Pinctrl子系统来控制设备的引脚&#xff0c;但实际上&#xff0c;大多数芯片都没有一个单独的Pinctrl。引脚的复用、配置等操作&#xff0c;实际上是在GPIO子系统内部实现的。 但…
阅读更多...
Centos nginx配置文档

Centos nginx配置文档

1、安装nginx： yum install nginx 2、Nginx常用命令 查看版本：nginx -v 启动：nginx -c /etc/nginx/nginx.conf 重新加载配置：nginx -s reload 停止：nginx -s stop 3、Nginx反向代理配置 nginx配置详解 1、Nginx配置图 详情可以查看：http://nginx.org/ru/docs/example…
阅读更多...
ES6 什么是模板字符串?

ES6 什么是模板字符串?

模板字符串是一种在编程中用于创建字符串的特殊语法形式&#xff0c;通常用于动态生成包含变量或表达式的文本。它们在许多编程语言中都有类似的实现&#xff0c;但语法可能会有所不同。 在JavaScript中&#xff0c;模板字符串是由反引号 (backtick) 包围的字符串&#xff0c…
阅读更多...
Python 环境搭建,集成开发环境IDE: PyCharm

Python 环境搭建,集成开发环境IDE: PyCharm

Python 环境搭建,集成开发环境IDE: PyCharm 一、Python 环境搭建二、Python下载三、Python安装四、环境变量配置五、Python 环境变量六、运行Python1、交互式解释器&#xff1a;2、命令行脚本3、集成开发环境&#xff08;IDE&#xff1a;Integrated Development Environment&am…
阅读更多...
day13面向对象进阶

day13面向对象进阶

面向对象进阶部分学习方法&#xff1a; 特点&#xff1a; ​ 逻辑性没有那么强&#xff0c;但是概念会比较多。 ​ 记忆部分重要的概念&#xff0c;理解课堂上讲解的需要大家掌握的概念&#xff0c;多多练习代码。 day13 今日内容 复习回顾static关键字继承 教学目标 能…
阅读更多...
《中国数字经济发展指数报告（2023年）》发布

《中国数字经济发展指数报告（2023年）》发布

导读 国家统计局《数字经济及其核心产业统计分类(2021)》首次对数字经济及其核心产业统计分类做出详细说明。然而&#xff0c;由于数字经济内涵外延的不断丰富&#xff0c;区域数字经济发展的量化评估仍在持续发展的过程中&#xff0c;以量化模型方式能够更加客观全面反映新时…
阅读更多...
9.14 C++作业

9.14 C++作业

仿照vector手动实现自己的myVector&#xff0c;最主要实现二倍扩容功能 #include <iostream>using namespace std;template <typename T> class Myvector {T *data; //存储数据的数组int len; //当前数组的长度int mycapa; //容纳数据的总容量public://…
阅读更多...
MyVector 的实现

MyVector 的实现

myVector #include <iostream> #include <vector>int size20;using namespace std;template <typename type> class myvector {int size;type value;type *arr;public://无参构造myvector(){};//有参构造myvector(int s,type v):size(s),value(v){arrnew in…
阅读更多...
uni-app：通过三目运算动态增加样式效果

uni-app：通过三目运算动态增加样式效果

效果 代码 第一条&#xff1a;当变量line的值等于abc时&#xff0c;class就等于yes,反之class等于no&#xff08;显然等于abc&#xff0c;执行yes,前景色为红色&#xff09; 第一条&#xff1a;当变量line1的值等于abc时&#xff0c;class就等于yes,反之class等于no&#xff…
阅读更多...
Hyper-V 安装 CentOS (二)

Hyper-V 安装 CentOS (二)

总目录 https://preparedata.blog.csdn.net/article/details/132877836 文章目录 总目录一、Hyper-V 创建centos的虚拟机实例二、虚拟机安装Centos ISO镜像三、重启后&#xff0c;进入系统 一、Hyper-V 创建centos的虚拟机实例 网络连接先不选择&#xff0c;后面文章专门配置网…
阅读更多...
界面控件DevExpress WinForms HTML-CSS模板：预设计UI模板加速.NET应用开发

界面控件DevExpress WinForms HTML-CSS模板：预设计UI模板加速.NET应用开发

在过去的一年里&#xff0c;DevExpress官方引入了两个强大的功能来加速/简化.NET桌面应用的开发&#xff0c;当一起使用时&#xff0c;您可以创建优雅/个性化的用户界面&#xff0c;减少重复的代码&#xff0c;从而节省更多的项目时间。 DevExpress WinForms有180组件和UI库&am…
阅读更多...
Spark集成hudi创建表报错

Spark集成hudi创建表报错

环境描述： hudi版本：0.13.1 spark版本：3.3.2 Hive版本：3.1.3 Hadoop版本：3.3.4 问题1： 描述：按照官方文档运行spark-sql创建spark的hudi表报错 建表语句： CREATE TABLE stg.spark_mor_test_01 (uuid string,name string,age int,ts …
阅读更多...
数据结构-leetcode-移除元素

数据结构-leetcode-移除元素

int removeElement(int* nums, int numsSize, int val){int start0;int end0;int flag0;for(int i 0;i<numsSize;i){if(nums[end]val){end;flag;}else if(nums[end]!val){nums[start]nums[end];end;start;}}return numsSize-flag; } 注&#xff1a;时间复杂度为O(N)&#xf…
阅读更多...
pnpm基础教程

pnpm基础教程

一、概述 1、更小 使用 npm 时&#xff0c;依赖每次被不同的项目使用&#xff0c;都会重复安装一次。 而在使用 pnpm 时&#xff0c;依赖会被存储在内容可寻址的存储中。 2、更快 依赖解析。 仓库中没有的依赖都被识别并获取到仓库。目录结构计算。 node_modules 目录结构是…
阅读更多...
自动化测试(五)：自动化测试框架的搭建和基于yaml热加载的测试用例的设计

自动化测试(五)：自动化测试框架的搭建和基于yaml热加载的测试用例的设计

该部分是对自动化测试专栏前四篇的一个补充&#xff0c;本次参考以下文章实现一个完整的谷歌翻译接口自动化测试:   [1]【python小脚本】Yaml配置文件动态加载   [2]【python做接口测试的学习记录day8——pytest自动化测试框架之热加载和断言封装】 目标&#xff1a;框架封…
阅读更多...
ARM架构-伪指令、伪操作、ATPCS协议

ARM架构-伪指令、伪操作、ATPCS协议

汇编中的符号&#xff1a; 1.指令&#xff1a;能够编译生成一条32位的机器码且能被CPU识别和执行 2.伪指令&#xff1a;本身不是指令&#xff0c;编译器可以将其替换成若千条指令 3.伪操作:不会生成代码&#xff0c;只是在编译阶段告诉编译器怎么编译&#xff08;例如&#x…
阅读更多...
如何利用软文推广进行SEO优化（打造优质软文，提升网站排名）

如何利用软文推广进行SEO优化（打造优质软文，提升网站排名）

在当今的互联网时代&#xff0c;SEO优化成为了网站推广的关键。而软文推广作为一种有效的推广方式&#xff0c;其优点不仅仅局限于SEO&#xff0c;还可以带来更多的曝光和用户流量。本文将深入探讨如何做好软文推广&#xff0c;从而提升网站排名和流量。 了解目标受众群体 内容…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023