Click here!

Upload    Contact    Home


R E S O U R C E S

HTMLStuff:

 
 
Home
Artist
Designer
Webmaster
Programmer
What's New
* Resources
 		 

 

  

Adding Color to your Tables

Let's add some color to the table. First we will add in some background color. The <TD BGCOLOR> command will be used here. You can use either the color names or, for the full 216 web safe color range use the Hex chart. Also, just so that it is very obvious that it is the background color that is being changed, make your border equal to a 10 in size.

 
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE BGCOLOR="RED" ALIGN=CENTER BORDER=10>
<TR>
<TD>Jack</TD>
<TD>John</TD>
</TR>
<TR>
<TD>Jill</TD>
<TD>Jeff</TD>
</TR>
</TABLE>
</BODY>
</HTML>

 

Now the whole table has a background color of red. But what if you want each row to have it's own color?

<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE ALIGN=CENTER BORDER=10>
<TR BGCOLOR="RED">
<TD>Jack</TD>
<TD>John</TD>
</TR>
<TR>
<TD>Jill</TD>
<TD>Jeff</TD>
</TR>
</TABLE>
</BODY>
</HTML>

 

By adding in the background to the area you want to have that color you can get the desired effect. You can even set up each cell to have a different color.

 
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE ALIGN=CENTER BORDER=10>
<TR>
<TD BGCOLOR="RED">Jack</TD>
<TD BGCOLOR="BLUE">John</TD>
</TR>
<TR>
<TD BGCOLOR="YELLOW">Jill</TD>
<TD BGCOLOR="CYAN">Jeff</TD>
</TR>
</TABLE>
</BODY>
</HTML>

 

You can also change the border color. This is done with the <TABLE BORDERCOLOR> command. Just put in the color you want by name or by the hex.

 
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE ALIGN=CENTER BORDER=10 BORDERCOLOR="RED">
<TR>
<TD>Jack</TD>
<TD>John</TD>
</TR>
<TR>
<TD>Jill</TD>
<TD>Jeff</TD>
</TR>
</TABLE>
</BODY>
</HTML>

 
Alright, on to the next section where you will learn about putting images into your tables.

<<Back Next>>

Head on to:
Part 1: Introduction
Part 2: The Basic Table with Borders
Part 3: Adding Color to your Tables
Part 4: Putting Images in your Table
Part 5: Cell Padding and Cell Spacing
256 Color Hex Chart
HTML Command Reference

Back to Tutorial Menu
Back to Designer Main Page
Back To HTML Stuff Main Page

 

  News   Contact   Advertise   CD ROM   Search   Upload   Help   Home

Copyright © 2000 Tucows.Com Inc.
TUCOWS.Com Inc. has no liability for any content or goods on the TUCOWS site or the Internet, except as set forth in the terms and conditions and privacy statement.