A huge collection of 3400+ free website templates JAR theme com WP themes and more at the biggest community-driven free web design site
html-site1

HTML – Bgcolor part 15

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.

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

Check Also

html-site1

HTML – Tables part14

HTML – Tables An HTML table is an element comprised of table rows and columns, …

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>