How to Change a Table Background

You can organize text in a table layout on a webpage just as you might when designing a printed document. For example, when you design a calendar, you organize the calendar into a table with columns labeled with the days of the week and rows containing the numerical dates for the month. If you have general knowledge of HTML and CSS, you can perform this specific coding task for webpages. You use the table tag in HTML code to create tables in a webpage, then use CSS code, or cascading style sheets, to change the appearance of the table you have created. For example, you might want your table to have thicker or thinner borders. Similarly, you can change a table background color from the default color by specifying the color you want in your webpage's style sheet.

Difficulty: Moderately Easy

Instructions

1. Choose a name for the set of code you will use in your style sheet to change a table's background color. In CSS terminology, the name for a set of code is referred to as a class. You might name the class "tablesample."

2. Choose a color for the background of your table. You might choose the color blue.

3. Write the code for your tablesample class designating the color you have chosen. Follow the required syntax for style sheets:
   
   <!--
   .tablesample { background-color: blue; }
   -->

4. Add the code for your tablesample class to your basic style sheet code:
   
   <style type="text/css">
   <!--
   .tablesample { background-color: blue; }
   -->
   </style>

5. Assign the tablesample class in the table's opening tag to any table for which you want to change the background color to blue:
   
   <table class="tablesample">
   <tr>
   <td>
   Information here.
   </td>
   </tr>
   </table>
   
   The table's background color will be changed to blue.

References

• On using style sheets with HTML code in tables