HTML Table Row Background Color

Introduction

In the realm of web development, HTML tables are extensively employed to arrange and display data systematically. Besides the importance of cell content, the visual aspect significantly contributes to improving the user experience. An essential element of table styling involves managing the background color of specific rows.

In this introductory section, we will delve into the fundamentals of defining background colors for rows in HTML tables. Through the use of basic HTML attributes and CSS (Cascading Style Sheets), developers have the ability to personalize the look of rows to enhance readability, highlight certain rows, or enhance the visual attractiveness of the table.

Mastering the technique of adding background colors to table rows is a crucial ability for web developers, as it plays a significant role in designing visually attractive and user-friendly interfaces. Whether you are a novice aiming to understand the fundamentals or a seasoned developer in need of a handy guide, this tutorial will offer valuable information on the techniques and recommended approaches for creating impactful styling with background colors for table rows in HTML.

Different Ways of Setting Background Color

HTML bgcolor Attribute:

Utilize the bgcolor attribute directly inside the <tr> tag to set the background color of the table row.

Example


<table>
  <tr bgcolor="#ffcc00">
    <td>Row 1</td>
    <td>Data 1</td>
  </tr>
  <tr bgcolor="#99cc99">
    <td>Row 2</td>
    <td>Data 2</td>
  </tr>
</table>

Inline CSS:

Implement inline CSS by adding styles directly to the style attribute of the <tr> element.

Example


<table>
  <tr style="background-color: #ffcc00;">
    <td>Row 1</td>
    <td>Data 1</td>
  </tr>
  <tr style="background-color: #99cc99;">
    <td>Row 2</td>
    <td>Data 2</td>
  </tr>
</table>

CSS Classes:

Define CSS classes and apply them to the rows.

Example


<style>
  .row1 {
    background-color: #ffcc00;
  }
  .row2 {
    background-color: #99cc99;
  }
</style>
<table>
  <tr class="row1">
    <td>Row 1</td>
    <td>Data 1</td>
  </tr>
  <tr class="row2">
    <td>Row 2</td>
    <td>Data 2</td>
  </tr>
</table>

Alternating Rows with CSS:

Utilize CSS to select and format rows based on whether they are odd or even.

Example


<style>
  tr:nth-child(odd) {
    background-color: #ffcc00;
  }
  tr:nth-child(even) {
    background-color: #99cc99;
  }
</style>
<table>
  <tr>
    <td>Row 1</td>
    <td>Data 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td>Data 2</td>
  </tr>
</table>

Hover and Selected Rows:

Apply styles on hover or when a row is selected.

Example


<style>
  tr:hover {
    background-color: #ffcc00;
  }
  tr:selected {
    background-color: #99cc99;
  }
</style>
<table>
  <tr>
    <td>Row 1</td>
    <td>Data 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td>Data 2</td>
  </tr>
</table>

Alternating Row Colors

In order to create a visually appealing HTML table with alternating row colors, you can utilize CSS to apply unique styles to odd and even rows. This technique improves the table's readability and enhances its visual presentation.

Example


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #dddddd;
      padding: 8px;
      text-align: left;
    }
    /* Alternating row colors */
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
  </style>
  <title>Alternating Row Colors</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1-1</td>
        <td>Data 1-2</td>
        <td>Data 1-3</td>
      </tr>
      <tr>
        <td>Data 2-1</td>
        <td>Data 2-2</td>
        <td>Data 2-3</td>
      </tr>
      <tr>
        <td>Data 3-1</td>
        <td>Data 3-2</td>
        <td>Data 3-3</td>
      </tr>
      <!-- Additional rows... -->
    </tbody>
  </table>
</body>
</html>

Adding Color to Specific Rows

Step 1: HTML Structure

Start by creating the basic HTML structure of your table. Include the necessary <table>, <thead>, <tbody>, and <tr> elements with the respective <th> and <td> cells.

Example


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #dddddd;
      padding: 8px;
      text-align: left;
    }
  </style>
  <title>Specific Row Background Color</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1-1</td>
        <td>Data 1-2</td>
        <td>Data 1-3</td>
      </tr>
      <tr>
        <td>Data 2-1</td>
        <td>Data 2-2</td>
        <td>Data 2-3</td>
      </tr>
      <tr>
        <td>Data 3-1</td>
        <td>Data 3-2</td>
        <td>Data 3-3</td>
      </tr>
      <!-- Additional rows... -->
    </tbody>
  </table>
</body>
</html>

Step 2: Add Classes to Specific Rows

Specify the rows that require a background color and then assign a class attribute to those specific rows.

Example


<!-- Add class "highlight" to rows you want to highlight -->
<tr class="highlight">
  <td>Data 2-1</td>
  <td>Data 2-2</td>
  <td>Data 2-3</td>
</tr>

Step 3: Apply CSS Styles

Generate a CSS style block within the HTML document or an external style sheet. Direct it to the particular class you included in Step 2 and define the preferred background color.

Example


<style>
  /* Define the background color for the "highlight" class */
  .highlight {
    background-color: #ffcc00;
  }
</style>

Introduction

Different Ways of Setting Background Color

Alternating Row Colors

Adding Color to Specific Rows

Input Required