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

说明：本内容对应教材第4.5节。

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-为表格的行或单元格设置颜色

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

table-primary: 用于突出显示表格中的主要数据，通常使用主题中的主要颜色。
table-secondary: 用于突出显示表格中的次要数据，通常使用主题中的次要颜色。
table-success: 用于突出显示表格中的成功或正面信息，通常使用绿色。
table-danger: 用于突出显示表格中的危险或错误信息，通常使用红色。
table-warning: 用于突出显示表格中的警告或注意信息，通常使用黄色。
table-info: 用于突出显示表格中的一般信息，通常使用蓝色或淡蓝色。
table-light: 用于创建具有浅色背景的表格。
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>

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

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

目录

01-Bootstrap的默认表格风格

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

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

04-给表格加上边框效果

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

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

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

JSON parse: Cannot deserialize value of type ‘XXX‘ from Array value (token `JsonToken.START_ARRRAY`)

json-editor-vue3 (Json字段编辑器 )

使用nvm管理(切换)node版本

nvm安装和使用保姆级教程（详细）

下载模块包及安装环境node，npm，vue，2024年前端大厂面试分享

Npm 工具完全删除 - 安装 npm多版本管理工具 nvm

火爆全网的 Evil.js 源码解读

npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

npm异常:Could not resolve dependency:npm WARN peer eslint@“＞=1.6.0 ＜7.0.0“ from [email protected].的解决

vue-component组件

前端哥

人大金仓数据库KingbaseES中JSON_SET函数的使用介绍

记录 spring boot 无法获取 post json 数据

利用Jackson封装常用的JsonUtil工具类

JSON parse: Cannot deserialize value of type ‘XXX‘ from Array value (token `JsonToken.START_ARRRAY`)

JSON三种数据解析方法

json-editor-vue3 (Json字段编辑器 )

JSON parse error: Cannot deserialize value of type `java.lang.String` from Object value (token `Json

【百度云盘项目实践(1)】：探索JSON与Bundle库的结合应用

使用nvm管理(切换)node版本

nvm安装和使用保姆级教程（详细）

1
VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000

2
轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000

3
HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000

4
UE4.27支持HTML5

2024-05-07 13:05:261000

5
前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000

6
js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000

7
jQuery事件处理

2024-03-12 01:03:321000

8
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000

9
ECharts 饼状图颜色设置

2024-02-16 14:02:001000

10
echarts实现动态渲染多柱图

2024-02-12 14:02:341000