How to Add Background Color to HTML Tables

There are a couple of ways to add background color to HTML tables: inline styles, internal CSS or external stylesheets. In this post we’ll explore different coloring methods for HTM: and how they work.

How to set background color for the entire table?

To color the entire table, use the style attribute with the background-color property directly in the <table> tag.

<table style="background-color: #f0f0f0;">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

How to apply background color to table rows?

Highlighting specific rows helps differentiate them so they are easier to read. Set the background color on the <tr> tag to achieve this effect.

<table>
  <tr style="background-color: #ffcccb;">
    <td>Highlight Row 1, Cell 1</td>
    <td>Highlight Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

How to color individual table cells?

Applying background color to individual cells draws attention to specific data points, making them stand out. Use the style attribute on the <td> or <th> tags for targeted emphasis.

<table>
  <tr>
    <td style="background-color: #90ee90;">Green Cell</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td style="background-color: #add8e6;">Blue Cell</td>
  </tr>
</table>

How to use CSS classes for reusable styles?

Defining CSS classes for background colors makes your HTML neater and your styling more scalable. This approach is especially useful for larger tables or when you need consistent styling across multiple tables.

<style>
  .table-bg { background-color: #f0f0f0; }
  .row-highlight { background-color: #ffcccb; }
  .cell-highlight { background-color: #90ee90; }
</style>

<table class="table-bg">
  <tr class="row-highlight">
    <td>Highlighted Row, Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td class="cell-highlight">Highlighted Cell</td>
  </tr>
</table>