HTML - bgcolor Attribute

HTML bgcolor attribute or property is used to represent the background color of elements like body, table, tr, th, td etc.

This attribute is no longer used instead of that, we can use the CSS background-color property. We can use this attribute with javascript to change the background color of the table or any other following element.

The HTML ‘bgcolor’ attribute is not supported in HTML5 −

Syntax

<tag bgcolor = "value"></tag>

Where, value can be any color name, hex code, or RGB color code.

Applies On

Below listed elements allow using of the HTML bgcolor attribute.

Element	Description
<body>	HTML <body> tag is used to define the main content of any HTML document which will render on webpage.
<table>	HTML <table> tag allow us to arrange data in a organized way by providing row and column facility.
<tr>	HTML <tr> tag is used to define row of a table.
<th>	HTML <th> tag is used to define header row of a table.
<td>	HTML <td> tag is used to define cells inside rows of table.

Examples of HTML bgcolor Attribute

Following codes demonstrate the usages of bgcolor attribute

Bgcolor attribute with body Tag

When we run the below code, it will generate an output consisting of the text with applied background color displayed on the webpage.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML bgcolor attribute</title>
</head>
<body bgcolor="red">
   <h1>Example of HTML 'bgcolor' attribute</h1>
</body>
</html>

Background Color of table Element

Consider another scenario, where we are going to create a table and define a background-color to it.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML bgcolor attribute</title>
   <style>
      table {
         color: white;
      }
   </style>
</head>

<body bgcolor='yellow'>
   <h1>Example of HTML 'bgcolor' attribute</h1>
   <table bgcolor="green" border='1'>
      <tr>
         <th>S.No</th>
         <th>Name</th>
         <th>Email</th>
      </tr>
      <tr>
         <td>1.</td>
         <td>Abc</td>
         <td>abc123@gmail.com</td>
      </tr>
      <tr>
         <td>2.</td>
         <td>Xyz</td>
         <td>xyz23@gmail.com</td>
      </tr>
   </table>
</body>

</html>

Background Color to a row of Table

Let's look at the following example, where we are going to use the bgcolor attribute with the tr element.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML bgcolor attribute</title>
</head>

<body bgcolor='aqua'>
   <h1>Example of HTML 'bgcolor' attribute</h1>
   <p>Fruits and prices: </p>
   <table bgcolor="white" border='1'>
      <tr bgcolor='aquamarine'>
         <th>S.No</th>
         <th>Name</th>
         <th>Price</th>
      </tr>
      <tr>
         <td>1.</td>
         <td>Apple</td>
         <td>100 R/Kg</td>
      </tr>
      <tr>
         <td>2.</td>
         <td>Orange</td>
         <td>90 R/Kg</td>
      </tr>
      <tr>
         <td>3.</td>
         <td>Grapes</td>
         <td>130 R/Kg</td>
      </tr>
   </table>
</body>

</html>

Change background color Dynamically

In this program, we are going to create a button adding the onclick event which changes the background color when the user clicks on the button.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML bgcolor attribute</title>
</head>
<body bgcolor='aqua'>
   <h1>Example of HTML 'bgcolor' attribute</h1>
   <p>Click on the below button to change the background color.</p>
   <button onclick="Changed()">Changed</button>
   <script>
      function Changed() {
         var d = document.querySelector("body")
         d.bgColor = "yellow";
      }
   </script>
</body>
</html>

Supported Browsers

Attribute
bgcolor	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm