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

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

    目录

    01-Bootstrap的默认表格风格

    Bootstrap对表格的相关HTML标签进行了覆写和优化，有如下这些与表格相关的标签被覆写和优化了：

    ：表格容器。
    ：表格的表头容器。
    ：表格主体容器。
    ：表格的行。
    内使用。
    ：表格表头中的单元格。
    ：表格的单元格，在
    标签来自于英文单词"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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

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

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

    为

    标签添加类 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>89td><td>96td><td>69td>tr>
    <tr>
        <td>李丰td><td>一班td><td>93td><td>94td><td>98td>tr>
table>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

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

    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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    运行效果如下图所示：
    在这里插入图片描述
    不缩减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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

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

  • 相关阅读:
    有更新：2023华为HCIA+HCIP最全Datacom题库解析（附全套文档赠送）
    Java应用工程结构
    CVL网卡的ADQ特性在SPDK的NVMF测试中的应用实例（二）
    HTML详细基础（三）表单控件
    学习c#的第二十二天
    linux驱动开发.之spi测试工具spidev_test源码（一）
    【高并发】从源码角度深度解析线程池是如何实现优雅退出的
    TS 基础
    网络通信设备之交换网络技术详解一
    [PAT练级笔记] 31 Basic Level 1031 查验身份证
  • 原文地址：https://blog.csdn.net/wenhao_ir/article/details/132796188