In this chapter, we will learn how to change the background color of a webpage or a table row as per our choice. Even, you can also set an image in the background of a webpage. Let’s see how we can do this :
-
HTML background color:
By default the background color of a html page is white. But, you can easily change the background color of a page / table row by using html attribute bgcolor. Syntax used to change the background color is as follows:
< table bgcolor = “color name”> |
or
<table bgcolor = “#c1c1c2”> |
HTML background color change example:
Option 1 – Using color name
<!DOCTYPE html> <table bgcolor=”Red” > |
The result will be displayed as:
|
Option 2 – Using color hex vale
<!DOCTYPE html> <html> <head> <title> Background Color Change Example</title> </head> <body> <!– Option 2 – Using hex value –><table bgcolor=”#e1c1c9″> <tr> <td> This is Pink Background color </td> </tr> </table> </body> </html> |
The result will be displayed as:
|
-
HTML background image:
Same like above, you can also set an image in the background of a page by using html background attribute. Syntax used to set an image in the background is as follows.
<table background = “Image destination URL”> |
Example of html background image setting
<!DOCTYPE html> <html> <head> <title>Background Image setting example</title> </head> <body> <!– Set table background –> <table background=”http://freetutorialpoint.com/wp-content/uploads/2016/10/images.jpg” width=”200″ height=”200″> <tr><td> This is table background image</td></tr> </table> </body> </html> |
The result will be displayed as:
This is table background image
Chapter Summery:
- Use html bgcolor attribute to change background color of a html page.
- Use html background attribute to set image in the background of a html page.
Interview Questions:
- Which html tag is used to change the background color of a table row.
If we will place html bgcolor attribute inside html <table> tag, it will change the background color of a table row. Syntax is as follows
<table bgcolor = “yellow”> |
- What is the difference between bgcolor and background-color.
bgcolor is a html attribute, where as background-color is a CSS style property. Both can be used as alternatively to change the background color of a web page. But however, it’s advisable to use CSS style property background-color to change the bacground color of a webpage rather than html attribute bgcolor, which is no more used in html 5.
Practice Exercise:
<!DOCTYPE html> <html> <head> <title> Practice Exercise</title> </head> </body> </body> </html> |
Using above html code,
- Create a html table, where the color of first row should be green, second row should be red and third row should be brown.
Click here to practice above exercise in real time HTML code editor |
---|