How to Change the Color of a Table

Contributor

By Catherine Chant
eHow Contributing Writer

Article Rating: (1 Ratings)

A table on a web page is created using the HTML <TABLE> tag. It consists of rows and columns, like a spreadsheet. Color can be added to the TABLE, TR (row), and TD (cell) tags separately. This can be done with the HTML attribute "bgcolor," which although deprecated is still recognized by web browsers, or by using cascading style sheets (CSS) and the "background" style attribute, which is the recommended method for modern web page design.

Difficulty: Moderate

Instructions

Things You'll Need:

Web Editing Software with an HTML Code View Web Browser

Using HTML Attributes

Step 1

Open your web editing software and the web page that contains the table you want to add color to, or create a new web page and add a table to it.
Step 2

View the HTML code for your web page in your editing tool. In Adobe Dreamweaver, for example, click the "Code" or "Split" button at the top of the editing window.
Step 3

HTML bgcolor Attribute

Insert the attribute "bgcolor" and a color choice into your <TABLE>, <TR> or <TD> HTML tag if you want to change the background color using the older method. The code would look similar to: <table bgcolor=#990000 width="100%" border="0">, <tr bgcolor="#9900CC"> or <td bgcolor="#9900CC">.
Step 4

Save your file changes and upload your web page to your web server to view the table colors in your web browser.

Using CSS Styles

Step 1

CSS Style Tag

Insert a <STYLE> tag in the <HEAD> section of your web page (above the BODY tag) and add CSS color definitions to control the appearance of all the tables on your web page. The code would look similar to: <style> table { background-color:#FF0000; } </style>. Then any time you insert a <TABLE> tag in the body of this page, it will have this color.
Step 2

CSS Style in Table Tag

Insert a CSS style definition directly into a <TABLE> tag in the body of the web page if you want to change the color for only one table on a page that has many. The code would look similar to: <table style="background-color:#0033CC" width="100%" border="0">.
Step 3

Insert a style definition to control the background color of individual table row tags (TR) or table cell tags (TD) as you did for the <TABLE> tag in Step 2. This code would look similar to: <tr style="background-color:#0033CC"> and <td style="background-color:#0033CC">.
Step 4

Save your file changes and upload your web page to your web server to view the table colors in your web browser.

How to Change the Color of a Table

Things You'll Need:

Using HTML Attributes

Using CSS Styles

References

Post a Comment

Related Ads