How to Change the Color of a Table
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.
Other People Are Reading
Instructions
-
Using HTML Attributes
-
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.
-
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.
-
-
3
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">.
-
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
-
5
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.
-
6
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">.
-
7
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">.
-
8
Save your file changes and upload your web page to your web server to view the table colors in your web browser.
-
1
Tips & Warnings
The table "border" can also be colored with CSS using the attribute: style="border-color:#".
