Internet, Networking, & Security Web Development Change the Background Color of an HTML Table by Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated on March 08, 2020 reviewed by Ryan Perian Lifewire Tech Review Board Member Ryan Perian is a certified IT specialist who holds numerous IT certifications and has 12+ years' experience working in the IT industry support and management positions. our review board Article reviewed on Nov 12, 2020 Ryan Perian Web Development CSS & HTML Web Design SQL Tweet Share Email The method for changing the background colors of parts of a table on a website has changed over the years, becoming easier and less labor-intensive with the introduction of style sheets. The older method used the attribute bgcolor to change the background color of a table. It could also be used to change the color of a table row or a table cell. But the bgcolor attribute has been deprecated in favor of style sheets, so it's not the optimal way to manipulate a table's background color. The better way to change the background color is to add the style property background-color to the table, row, or cell tag. This example changes the background color of an entire table: <table style="background-color: #ff0000;"> To change the color of a single row, insert the background-color property in the <tr> tag: <tr style="background-color: yellow;"> You can change the color of a single cell by adding the attribute to the <td> tag: <td style="background-color: #000;"> You can also apply background colors to table heads, or the <th> tag, in the same way: <th style="background-color: #000;"> Change Background Color Using Style Sheets It's better, however, to avoid using the background-color attribute in favor of a correctly formatted style sheet. For example, you can set the styles in a style sheet at the HEAD of your HTML document or set them in an external style sheet. Changes like these in the HEAD or in an external style sheet might appear like these for tables, rows, and cells: table { background-color: #ff0000; }tr { background-color: yellow; }td { background-color: #000; } Setting Column Background Color The best way to set the background color for a column is to create a style class and then assign that class to the cells in that column. Creating a class allows you to assign that class to the cells in a specific column using one attribute. The CSS: td.ColColor { background-color: blue; } The HTML: <table><tr><td class="ColColor">cell 1</td><td>cell 2</td></tr><tr><td class="ColColor">cell 1</td><td>cell 2</td></tr></table> One significant advantage of controlling background colors through a style sheet is that you can change your color choice at a later time. Rather than having to go through the HTML document and make the change to every single cell, you can make a single change to the color choice in the CSS that will immediately be applied to every instance where the class="ColColor" syntax appears. Although interspersing CSS into your HTML, or calling a separate CSS file, adds a bit of administrative overhead beyond just modifying an HTML attribute, you'll find that relying on CSS reduces errors, speeds up development, and improves the portability of your document. Was this page helpful? Thanks for letting us know! Get the Latest Tech News Delivered Every Day Email Address Sign up There was an error. Please try again. You're in! Thanks for signing up. There was an error. Please try again. Thank you for signing up. Tell us why! Other Not enough details Hard to understand Submit