HTML table background

Introduction: Why Table Background Styling Matters

HTML tables are widely used to display:

  • Student marks

  • Product comparisons

  • Reports and dashboards

  • Timetables and data lists

A plain table can look boring and hard to read.
Adding a background color or background image improves:

  • Readability

  • Visual hierarchy

  • User experience

  • Professional appearance

👉 In modern HTML, CSS is the correct way to set table backgrounds.

What Is HTML Table Background?

HTML table background means:

  • Setting a background color

  • Or setting a background image

for:

  • The entire table

  • Table rows (<tr>)

  • Table header cells (<th>)

  • Table data cells (<td>)

Important Note (Very Important)

The old HTML attribute bgcolor is deprecated.

❌ Old way (Not recommended):

 
<table bgcolor="yellow">

✅ Modern way (Recommended):

 
table { background-color: yellow; }

Method 1: Set Background Color for Entire Table

HTML

<table class="table-bg">
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>85</td>
  </tr>
</table>

<!--CSS -->
.table-bg {
  background-color: #f2f2f2;
  border-collapse: collapse;
}

Result

  • Entire table has a light gray background

Method 2: Background Color for Table Header (<th>)

CSS

th { background-color: #333; color: white; }

Result

  • Header row is dark

  • Text is clearly visible

Method 3: Background Color for Table Rows (<tr>)

CSS

tr { background-color: #e6f7ff; }

⚠️ This applies to all rows, including header rows unless specified.

Method 4: Zebra Striping (Alternate Row Colors)

Very common in professional tables.

CSS

 
tr:nth-child(even) { background-color: #f9f9f9; } tr:nth-child(odd) { background-color: #ffffff; }

 Result

  • Alternate rows have different colors

  • Improves readability

Method 5: Background Color for Individual Cells (<td>)

HTML

 
<td class="highlight">95</td>

CSS

 
.highlight { background-color: lightgreen; }

Result

  • Only selected cell is highlighted

Method 6: Background Image for Table

CSS

 
table { background-image: url("bg.jpg"); background-size: cover; }

⚠️ Use background images carefully—text readability can suffer.

Method 7: Hover Effect on Table Rows (Modern UI)

 
tr:hover { background-color: #d1e7dd; }

✔ Interactive
✔ User-friendly

Complete Example: Professional Styled Table

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 60%;
  border-collapse: collapse;
  background-color: #f8f9fa;
}

th, td {
  border: 1px solid #333;
  padding: 10px;
  text-align: center;
}

th {
  background-color: #212529;
  color: white;
}

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

tr:hover {
  background-color: #dee2e6;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Aman</td>
    <td>88</td>
  </tr>
  <tr>
    <td>Neha</td>
    <td>92</td>
  </tr>
</table>

</body>
</html>

HTML Table Background Using Old bgcolor (For Knowledge Only)

Not recommended:

 <table bgcolor=“lightblue”>

Problems:

  • Deprecated

  • Not responsive

  • Not flexible

  • Bad practice

Common Beginner Mistakes

  • Using bgcolor
  •  Applying same color everywhere
  •  Poor color contrast
  •  Forgetting border-collapse
  •  Overusing background images

Best Practices for Table Backgrounds

  • Use CSS only
  •  Use light colors for data rows
  •  Use darker color for headers
  •  Maintain good contrast
  •  Use zebra striping for large tables
  •  Keep design simple

FAQs: HTML Table Background

How do I set background color for a table?

Using CSS background-color.

Can I color only one row?

Yes, using CSS or classes.

Is bgcolor still valid?

No, it is deprecated.

Can tables have background images?

Yes, using CSS.

Which is best: HTML or CSS?

CSS is always best.