How Do I Add a Background Color on a Table in HTML?

You can add a background color to a table in HTML using inline styles or CSS. The approach you choose depends on whether you want to apply the color to the entire table, specific rows, or individual cells.

Methods for Adding Background Color

Here's how you can add background colors at different levels:

1. Applying Background Color to the Entire Table

You can apply a background color to the entire table using the style attribute with the background-color property within the <table> tag.

<table style="background-color: lightblue;">
  <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>

In this example, the entire table's background will be light blue.

2. Applying Background Color to Table Rows

To apply a background color to specific rows, use the style attribute with the background-color property within the <tr> (table row) tag.

<table>
  <tr style="background-color: lightgreen;">
    <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>

In this case, only the first row will have a light green background.

3. Applying Background Color to Table Cells

To apply a background color to specific cells, use the style attribute with the background-color property within the <td> (table data/cell) tag.

<table>
  <tr>
    <td style="background-color: yellow;">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>

Here, only the first cell in the first row will have a yellow background.

4. Using CSS for Better Styling (Recommended)

For better maintainability and separation of concerns, it's recommended to use CSS. You can define styles in a <style> tag within the <head> section of your HTML or in an external CSS file.

Internal CSS:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  background-color: lightblue;
}

tr:nth-child(even) { /* Optional: Styles every even row */
  background-color: lightgray;
}

td {
  padding: 8px;
  text-align: left;
}

.highlight {
  background-color: yellow;
}
</style>
</head>
<body>

<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td class="highlight">Row 2, Cell 2</td>
  </tr>
</table>

</body>
</html>

External CSS (style.css):

table {
  background-color: lightblue;
}

tr:nth-child(even) {
  background-color: lightgray;
}

td {
  padding: 8px;
  text-align: left;
}

.highlight {
  background-color: yellow;
}

HTML (using the external CSS):

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td class="highlight">Row 2, Cell 2</td>
  </tr>
</table>

</body>
</html>

In this example:

The entire table has a light blue background.
Every even row has a light gray background.
Cells have padding and left alignment.
The cell with the class "highlight" has a yellow background.

Using CSS offers more flexibility, such as applying different styles based on row number (nth-child), and makes your code cleaner and easier to maintain.

In summary, you can add background colors to HTML tables using inline styles or, preferably, CSS, applying the style at the <table>, <tr>, or <td> level depending on the desired scope of the color.

askvity