Website resource guide, web development,Creating basic tables

A great way to add an attractive touch to tables, but, be careful it can get ugly as well !

Table colors and backgrounds

Changing the background color of a table is easy: Just add the bgcolor attribute to the <table> tag. The value of the attribute can be either a color name or a hexadecimal color value.

Changing the color of a table makes it stand out from the rest of your document, drawing the reader's attention to the important material contained therein.

	Coffee	Cream
Brand	Nescafe	Maxwell House
Roast	Columbian	Dark Roast

As we are well aware, both Internet Explorer and Netscape, handle the bgcolor attribute in different fashions. Netscape uses the color to paint the background of every cell in the table, while the table borders and empty cells retain the document background color. Internet Explorer, on the other hand, paints the cells, borders, and empty cells the background color. If you are designing for multiple browsers, you need to be aware that things can become not so pleasing if you aren't paying close attention.

You can place an image behind a table using the background attribute for the <table> tag. The value of this attribute is the URL of the desired image. If the image is larger than the table, it is clipped to the edges of the table. If it is smaller, it is tiled to fill the table. For example, here is a table filled with a blue texture, created by saying:

	Coffee	Cream
Brand	Nescafe	Maxwell House
Roast	Columbian	Dark Roast

Internet Explorer users will see the image tiled across the entire table; Netscape users will see the image tiled within the individual cells.

Coloring individual rows

You can apply the bgcolor attribute to the <tr> tag, changing the background color for just one row within your table. Here is our sample table, with each row rendered in a different color, along with the HTML that created the table:

	Coffee	Cream
Brand	Nescafe	Maxwell House
Roast	Columbian	Dark Roast

 <table border=1>

  <tr bgcolor=aqua>

    <th></th>

    <th>Coffee</th>

    <th>Cream</th>

  </tr>

  <tr bgcolor=tan>

    <th>Brand</th>

    <td>Nescafe</td>

    <td>Maxwell House</td>

  </tr>

  <tr bgcolor=gold>

    <th>Roast</th>

    <td>Columbian</td>

    <td>Dark Roast</td>

  </tr>

  </table>

Both Internet Explorer and Netscape behave similarly when applying colors to an entire row: Only the cell backgrounds are affected by the color change. The borders retain the background color. In Internet Explorer, however, empty cells inherit the row color. In Netscape, empty cells always retain the document background color.

You cannot apply the background attribute to the <tr> tag.

Coloring each cell

If you want control over your table, you can change the color of each cell in the table. Simply use the bgcolor attribute with any or all of the <td> and <th> tags within your table. This is particularly handy, although somewhat time consuming, when you want an entire column to be the same color. Since there is no equivalent to the <tr> tag for each column in your table, you have no choice but to color each cell in the column individually.

Here is our sample table with individual cell colors, along with the HTML that created this work of art:

	Coffee	Cream
Brand	Nescafe	Maxwell House
Roast	Columbian	Dark Roast

<table border=1>

  <tr>

    <th></th>

    <th bgcolor=aqua>Coffee</th>

    <th bgcolor=aqua>Cream</th>

  </tr>

  <tr>

    <th bgcolor=tan>Brand</th>

    <td bgcolor=gold>Nescafe</td>

    <td bgcolor=blue>Maxwell House</td>

  </tr>

  <tr>

    <th bgcolor=tan>Roast</th>

    <td bgcolor=gold>Columbian</td>

    <td bgcolor=blue>Dark Roast</td>

  </tr>

  </table>

This can get a bit ugly, but it is often the only way to get the coloring that you want. More importantly, these tables are guaranteed to appear identically (color-wise) in both Netscape and Internet Explorer.

Using color well

Keep in mind that table colors should only complement the contents of the table, not overwhelm them. Color, when used appropriately, can draw a reader's attention to the table and enhance your pages. Used poorly, it will be distracting and annoying to the reader.

I've found that one good use for colored tables is as a warning or notice within your documents. By creating a bordered, one-cell, colored table, you can create an effective marker in your document that is hard to miss. Consider this:

Under Construction !

Hard to miss, and easily created with this HTML code:

<table border=1 cellpadding=10 width=360 bgcolor=yellow>
<tr>
<td align=center>
<b>Under Construction !</b>
</td>
</tr>
</table>

<< BACK

Adding Colors And Images In Tables