HTML - Bgcolor - Tizag Tutorials

Trang chủ » Html Bgcolor » HTML - Bgcolor - Tizag Tutorials

Có thể bạn quan tâm

Bookmark and Share HTML - The bgcolor Attribute

The bgcolor attribute is used to set the background color of an HTML element. Bgcolor is one of those attributes that has become deprecated with the implementation of Cascading Style Sheets (see CSS Backgrounds). The reason we've included it in this tutorial is because it will give us an opportunity to introduce web colors and also add some life to our HTML web page as we continue to progress through this tutorial. It will serve as a visual aid for you as you are learning the mechanics of building a table.

Advertise on Tizag.com

Without much effort, we can bring that boring white web page to life by adding some color with the bgcolor attribute.

HTML Bgcolor Code:

<body bgcolor="silver"> <p>This page now has a SILVER background!</p> </body>

HTML Bgcolor:

This page now has a SILVER background!

HTML - Web Colors

Our example uses the text value, which is one of three different types of color values that can be used with the bgcolor attribute. Below is a table of the 16 basic HTML color values that are available to HTML web designers.

HTML Basic Colors:

Black Gray Silver White
Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal

While the table above illustrates only 16 colors, 16 is surely not the limit to our color wheel. As we mentioned, HTML supports three different types of color values including text values (which we've pretty much covered above), numeric, (RGB) and hexadecimal values. We'll go into more detail regarding these values so just sit tight. This next example offers a sneak peak at what these values may look like.

HTML Code:

<table bgcolor="#ff0000" border="1"><tr> <td>A red colored table background using hexadecimal values "#FF0000".</td> </tr></table> <table bgcolor="rgb(0, 0, 255)" border="1"><tr> <td>A blue colored table background using numeric, RGB values "rgb(0, 0, 255)".</td> </tr></table> <table bgcolor="lime" border="1"><tr> <td>A lime colored table background using color names.</td> </tr></table>

Table Bgcolor Values:

A lime colored table background using color names.
A red colored table background using hexadecimal values "#FF0000".
A blue colored table background using numeric, RGB values "rgb(0, 0, 255)".

Hexadecimal and numeric color values (RGB) allow HTML developers to expand the color wheel beyond 16 colors. Way beyond 16, in fact. Nonetheless, there's no need to memorize 256+ unique color combinations; instead, we can use numeric and hexadecimal values and calculate color shades. We'll show you how to use them in our HTML Color Codes page.

HTML - Coloring Fonts, Table Rows, & Table Columns

Here's a few common examples of bgcolor in action.

HTML Bgcolor Code:

<table> <tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> <tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> <tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> <tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> <tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> <tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> </table>

Alternating Table Row Colors:

This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!

Check out this "Scoreboard" we made with the use of font color and bgcolor!

HTML Code:

<table bgcolor="#000000"> <tr><td bgcolor="#009900" align="right"> <font color="#FFFF00">Green Bay</font></td> <td><font color="#FFFFFF">13</font></td></tr> <tr><td bgcolor="#0000FF" align="right"> <font color="#DDDDDD" >New England</font></td> <td><font color="#FFFFFF">27</font></td> </tr> </table>

Scoreboard:

Green Bay 13
New England 27
Bookmark and Share Tips
  • If you are new to HTML, consider sticking with color names for setting your background color.
  • There are 256 "true colors" with hexadecimal values. The colors are made out of hex-pairs for red, green, and blue. Examples: #99FFCC, #33AA44.
  • Shades of gray occur when the 3 paired amounts of each color are equal. Example. "rgb(100,100,100)", "#333333," "#0A0A0A"
  • Avoid bright, headache-causing color schemes! Keep your coloring distinct and purposeful.
  • For more information about colors, check out our HTML Color Codes lesson.
Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!

Từ khóa » Html Bgcolor