Lesson #12

Heirarchy of Bgcolors in tables

Let's talk about the heirarchy of bgcolors and background images in tables.

We start with a webpage that has a specified bgcolor or background in the body tag.

The table tag may have a bgcolor (or background), which will override the bgcolor (or background) in the body tag.

In the table are rows. Any bgcolor in the <tr> tag will override the bgcolor of the table tag for that row. Background images don't work in <tr> tags.

In the rows are cells. Any bgcolor or background image in a cell ( <td> ) will overide any underlying bgcolor or background for that cell.

Another way to visualize this is to think of a webpage as a dining room. Think of the carpet on the floor as your bgcolor or background image in the body tag.

In the dining room is a table. Think of bgcolor or a background image in the <table> tag as a tablecloth. No bgcolor would be a clear glass table and we would see the carpet underneath.

On the table you could have a runner. A colored runner would be the bgcolor in the <tr> tag. You would see this on top of the table for each row. Background images do not work in the <tr> tag.

Finally we could have placemats with plates. A placemat (cell) would cover a runner or a tablecloth or a clear table. A plate would be the content of the cell. Bgcolor or a background image in a cell (<td>) would be seen over a row, table or body tag.

	Table bgcolor= "#9999ff"
Row bgcolor= "#ffffff"		Cell bgcolor= "#ff9999"
	Cell bgcolor= #99ff99"

Homework Assignment

• Make a page with a 2x2 or larger table.

  This table will demonstrate the heirarchy of bgcolors in table tags.

• Use a bgcolor in the table tag that is different from the bgcolor in the body tag.
• Use a bgcolor in one row that is different from the bgcolor in the table tag.
• In that row, use a bgcolor in one cell that is different from the bgcolor for that row.
• Post your table.
• Show your code.