TodayBreak

How to Change the Color of a Table

104 3

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

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

    • 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" border="0">.

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

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

Subscribe to our newsletter
Sign up here to get the latest news, updates and special offers delivered directly to your inbox.
You can unsubscribe at any time
You might also like on "Technology"

Leave A Reply

Your email address will not be published.