HTML – Bgcolor

80

Syntax

<TAGNAME bgcolor=”value”>

Quick and dirty, here is how to change the background of your web page. Just use the bgcolor attribute in the <body> tag and you are golden.

HTML Code:

<body bgcolor="Silver">
<p>We set the background...</p>
</body>

Paragraph Bgcolor:

We set the background of this paragraph to be silver. The body tag is where you change the pages background. Now continue the lesson to learn more about adding background colors in your HTML!

Adding Color to Your Tables

This example shows how to add a background color for an entire table using generic values of color.

HTML Code:

<table bgcolor="lime" border="1"><tr>
<td>A lime colored table background using color names.</td>
</tr></table>

<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 RGB values "rgb(0, 0, 255)".</td>
</tr></table>

Table Bgcolors:

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

Adding Color to Table Rows & Columns

Here’s a few common examples of “bgcolor” and font color

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

Background Color and Font Color Together!

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

HTML Code:

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

Scoreboard:

Green Bay13
New England27

HTML Code:

<table bgcolor="#777777">
<tr><td>
<p><font face="Monotype Corsiva, Verdana" size="4" color="#00FF00">
This paragraph tag has...
</font></p>
</td></tr>
</table>

Colored Paragraph:

Syntax

<TAGNAME bgcolor=”value”>

Quick and dirty, here is how to change the background of your web page. Just use the bgcolor attribute in the <body> tag and you are golden.

HTML Code:

<body bgcolor="Silver">
<p>We set the background...</p>
</body>

Paragraph Bgcolor:

We set the background of this paragraph to be silver. The body tag is where you change the pages background. Now continue the lesson to learn more about adding background colors in your HTML!

Adding Color to Your Tables

This example shows how to add a background color for an entire table using generic values of color.

HTML Code:

<table bgcolor="lime" border="1"><tr>
<td>A lime colored table background using color names.</td>
</tr></table>

<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 RGB values "rgb(0, 0, 255)".</td>
</tr></table>

Table Bgcolors:

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

Adding Color to Table Rows & Columns

Here’s a few common examples of “bgcolor” and font color

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

Background Color and Font Color Together!

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

HTML Code:

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

Scoreboard:

Green Bay13
New England27

HTML Code:

<table bgcolor="#777777">
<tr><td>
<p><font face="Monotype Corsiva, Verdana" size="4" color="#00FF00">
This paragraph tag has...
</font></p>
</td></tr>
</table>

Colored Paragraph:

This paragraph tag has a gray background with green colored font. You should see Monotype Corsiva font if you have it installed, or Verdana as the backup. Both fonts are widely accepted as standard fonts

This paragraph tag has a gray background with green colored font. You should see Monotype Corsiva font if you have it installed, or Verdana as the backup. Both fonts are widely accepted as standard fonts


loading...
SHARE

LEAVE A REPLY