如何在 Bootstrap 中更改表格行或单个单元格的背景颜色？

在本文中，我们将讨论设置表格行的背景颜色以及如何使用 Bootstrap 为单个单元格设置背景颜色。 Bootstrap 提供了一系列可用于对表格应用各种样式的类，例如更改标题外观、剥离行、添加或删除边框、使行可悬停等。Bootstrap 还提供了使表格具有响应性的类。

创建表格的目的是以简单紧凑的结构格式显示复杂和大尺寸的数据，提供信息内容，同时一目了然。这将节省阅读和分析非结构化大数据的时间。 Bootstrap 有助于以标准方式创建和装饰内容。我们将使用引导程序内置类来创建表结构。可以使用以下语法创建一个简单的 HTML 表格：

句法：

 Table Contents... 在我们继续我们的主要讨论之前，使用 HTML 创建表格的知识将帮助您更好地理解这篇文章。请参考 Bootstrap 4 | bootstrap 中许多其他表格案例的表格。 Bootstrap CDN 链接：让我们通过一个示例来了解如何设置和添加 Bootstrap CDN 链接以应用引导程序预定义类来创建表。




例子：
HTML



  
    
    
    Geeks For Geeks
    
    
  
  
  
    Tables
    Change color of tables
    









      
        
          
          
          
        
      
      
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
      
    Sl No.CountryCapital1IndiaNew Delhi2CanadaOttawa3BangladeshDhaka4AustraliaCanberra
  

---

输出：

我们在代码中添加了引导 CDN 链接，以制作标准且结构良好的内容表。使用预定义的类，我们可以更改表格单元格和表格行的颜色。为了更改表格行的颜色，我们需要在 标签中指定所需的类 & 以更改表格行的颜色，然后在 标签中指定所需的类。让我们一一学习课程。

预定义类：为了改变一行或整个表格的颜色，我们将使用以下任何一个类。

1. table-active：该类适用于灰色的表格行或单元格的悬停颜色。
2. table-default：该类用于在选择默认行时将颜色更改为白色。
3. table-primary：该类表示重要的动作。
4. table-secondary：此类表示不太重要的活动。
5. table-success：此类表示积极或成功的操作。
6. table-danger：此类表示潜在的负面或危险操作。
7. table-warning：此类表示可能需要注意的警告。
8. table-info：此类表示中性的信息更改或操作。
9. table-light：该类应用于表格行背景或浅灰色表格。
10. table-dark：此类应用于深灰色表格。

示例：在本例中，我们使用了所有预定义的类来更改行的颜色。

HTML

  
    
    
    
    
    
  
  
  
    
Tables
    
Different colour of table rows
  
    
      
        
        
      
      
        
          
          
        
        
          
          
        
        
          
          
        
        
          
          
        
        
          
          
        
        
          
          
        
        
          
          
        
        
          
          
        
        
          
          
        
        
          
          
        
      
    
Sl No.
Class
1
table-active
2
table-default
3
table-primary
4
table-secondary
5
table-success
6
table-danger
7
table-warning
8
table-info
9
table-light
10
table-dark
  

输出：

要更改任何特定单元格的颜色，您可以使用以下任一类：

1. bg-primary：用于表示积极或成功的行动。
2. bg-success：用于表示成功或积极的行动。
3. bg-warning：用于表示可能需要注意的警告
4. bg-danger：适用于表示潜在的负面或危险动作
5. bg-info：适用于指示中性的信息更改或操作。

例子：

HTML

  
    
    
    
    
    
  
  
  
    
Tables
    
Change color of single cells
    
      
        
        
      
      
        
          
          
        
        
          
          
        
        
          
          
        
        
          
          
        
        
          
          
        
      
    
Sl No.
Class
1
bg-primary
2
bg-success
3
bg-warning
4
bg-danger
5
bg-info
  

输出：

为了更改特定表格单元格的颜色，我们需要在特定单元格的 标记内指定它。下面的示例说明了为特定单元格声明。

例子：

HTML

  
    
    
    
    
  
  
  
    
Tables
    
Change color of tables
    
      
        
          
          
          
        
      
      
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
      
    
Sl No.
Country
Capital
1
India
New Delhi
2
Canada
Ottawa
3
Bangladesh
Dhaka
4
Australia
Canberra
  

输出：

自定义颜色