HTML - bgcolor Attribute

The HTML bgcolor attribute or property is used to represent the background color of elements. 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 −

Following are the supported tag of the HTML bgcolor attribute −

S.No Tags
1 <body>
2 <table>
3 <tr>
4 <th>
5 <td>

Syntax

Following is the syntax to use this attribute

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

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

Example

In the following example, we are going to use the bgcolor attriute with the body tag.

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

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

Example

Considering the another scenario, where we are going to create a table using the bgcolor.

<!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>

On running the above code, the output window will pop up displaying the table applied with a background color on the webpage.

Example

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>

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

Example

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>

On executing the above script, the output window will pop up displaying the text with background color along with a click button on the webpage. when the user clicks the button the event gets triggered and changes the background color.

html_attributes_reference.htm
Advertisements