Web Design - Web Authoring / Intermediate HTML: Tables and Templates

Sections:  Introduction  |  Section 1  |  Section 2  |  Section 3
Section Three:  Part A  |  Part B  |  Part C  |  Part D  |  Part E  |  Part F

Table Attributes

The border="" Attribute

You just learned that in order to have a border listed around the rows and data cells of your table, you must use the border="" attribute. The border="" attribute is placed in the opening <table> tag and the value of the border="" attribute can be 0 or any positive whole number. The border="" attribute's values correlate to pixel values, so if border="1" was added to a <table> tag, it would generate a border of 1 pixel width around all rows and data cells within the table. If you do not add the border attribute to the <table> tag, or if you specify the border="" attribute's value as 0, the table will not have a border.

Let's See it in Action icon. Let's See it in Action: The border="" Attribute

The code to add a 1 pixel border to all rows and data cells within a table reads as:

folder structure

You can play around with border widths to see how it changes the look of your table.

The bgcolor=""Attribute

Looking back at the table previous presented, you can see that it is lacking in the color department. Sometimes you may want to add color to an entire table or to parts of the table (rows or data cells). To achieve the desired result, you would add the bgcolor="" attribute, where bgcolor stands for background color. The value of the bgcolor="" attribute can be speicified two different ways; it can be listed as:

  • A color's name.
  • A color's hexadecimal color code.

See the following Color Chart for a list of common color names and their associated hexadecimal color code.

The bgcolor="" attribute can be added to any of the tags presented to the following tags:

  • <table> - Adding bgcolor="" to the opening <table> tag modifies the background color of the entire table.
  • <tr> - Adding bgcolor="" to an opening <tr> tag modifies the background color of an entire row; to include all the row's data cells.
  • <th> - Adding bgcolor="" to an opening <th> tag modifies the background color of the specified data header cell.
  • <td> - Adding bgcolor="" to an opening <td> tag modifies the background color of the specified data cell.

Further investigation Extend Your Understanding

What do you think would happen if you added the bgcolor="" attribute to the opening <body> tag? Try it and see.

Next Next

© 2008 KCDL. All rights reserved.