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

原文:https://www . geeksforgeeks . org/如何更改引导中表格行或单个单元格的背景颜色/

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

创建表格的目的是以简单紧凑的结构化格式显示复杂的大数据，该格式在浏览时提供信息内容。这将节省读取和分析非结构化大数据的时间。引导有助于以标准方式创建和修饰内容。我们将使用引导内置类来创建表结构。可以使用以下语法创建一个简单的 HTML 表:

语法:

Table Contents...


在我们继续我们的主要讨论之前，使用 HTML 创建表格的知识将帮助您更好地理解文章。关于 Bootstrap 中表格的许多其他情况，请参考 Bootstrap 4 |表格。

引导 CDN 链接:我们举个例子来了解如何设置&添加一个引导 CDN 链接来应用引导预定义的类来创建表。

  
    
    
    
    
          rel="stylesheet"
      href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"/>
  
  
    

Tables

    

Change color of tables

    

      
        
          
          
          
        
      
      
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
      
    

Sl No.	Country	Capital
1	India	New Delhi
2	Canada	Ottawa
3	Bangladesh	Dhaka
4	Australia	Canberra

  

输出:

我们已经在代码中添加了引导 CDN 链接，它构成了一个标准且结构良好的内容表。使用预定义的类，我们可以更改表格单元格和表格行的颜色。为了改变表格行的颜色，我们需要在标签中指定所需的类&为了改变表格行的颜色，然后在Tag to specify the required class. Let's study section by section.

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

1. 表格-活动:此类适用于灰色表格行或单元格的悬停颜色。


2. 表格-默认:当选择默认行时，该类用于将颜色更改为白色。


3. 表-初级:此类表示重要动作。


4. 表-次要:此类表示不太重要的活动。


5. 表-成功:此类表示积极或成功的行动。


6. 表-危险:该等级表示潜在的负面或危险行为。


7. 表-警告:此类表示可能需要注意的警告。


8. 表格信息:该类别表示中性的信息变化或动作。


9. 表光:此类适用于表行背景或浅灰色表。


10. 表格-深色:此类适用于深灰色表格。

示例:在这种情况下，我们已经使用了所有预定义的类来更改行的颜色。

超文本标记语言



  
    
    
    
    
          rel="stylesheet"
      href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"/>
  
  
    

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-警告:适用于指示可能需要注意的警告


4. BG-危险:适用于指示潜在的负面或危险行为


5. bg-info: 用于表示中性的信息变化或动作。

示例:

超文本标记语言



  
    
    
    
    
          rel="stylesheet"
      href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"/>
  
  
    

Tables

    

Change color of single cells

    
      
        
        
      
      
        
          
          
        
        
          
          
        
        
          
          
        
        
          
          
        
        
          
          
        
      
    

Sl No.	Class
1	bg-primary
2	bg-success
3	bg-warning
4	bg-danger
5	bg-info

  

输出:

为了改变特定表格单元格的颜色，我们需要在特定单元格的Specify it in the tag. The following example shows how to declare for a specific cell.

示例:

超文本标记语言



  
    
    
    
          rel="stylesheet"
      href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
  
  
    

Tables

    

Change color of tables

    
      
        
          
          
          
        
      
      
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
      
    

Sl No.	Country	Capital
1	India	New Delhi
2	Canada	Ottawa
3	Bangladesh	Dhaka
4	Australia	Canberra

  

输出:

自定义颜色