Web Design - Introduction to Tables
Sections:  Introduction  |  Section 1  |  Section 2  |  Section 3  |  Section 4  |  Section 5 
Section Five:  Part A  |  Part B  |  Part C  |  Part D  |  Part E

New Attributes

Stop and Think

Consider the table created on the previous page. Did it have a border? It did. When creating a table, if you want the cells and rows of the table to have a border, you must specify that with an attribute: the border="" attribute.

The border="" Attribute

One attribute that goes in the <table> tag is the border="" attribute. If you do not add the border attribute to the <table> tag, the table will not have a border. If you want to add a border to the rows and cells of your table you need to add the border="" attribute to your opening <table> tag. The border attribute value of the html table presented on the previous page was set to 1. The code to create the effect reads:

folder structure

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

The bgcolor=""Attribute

Looking at the table on the previous page you can see it is a little lacking in the color department. Sometimes you may want to add color to your entire table or to parts of the table (rows or data cells). To achieve the desired result you could add the bgcolor="" attribute, where bgcolor stands for background color. The bgcolor="" attriute can be added to any of the tags presented in this lesson; as described below.

  • <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.
  • <td> - Adding bgcolor="" to an opening <td> tag modifies the background color of the specified data cell.

The bgcolor="" attribute will accept two different values:

  • 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.

Extend Your Learning

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

NextNext

© 2008 KCDL. All rights reserved.