5 Ways Colour Alternate Rows

Introduction to Colour Alternate Rows

Colour alternate rows are a design technique used to make tables and lists more visually appealing and easier to read. This technique involves alternating the background colour of rows in a table or list to create a striped effect. In this post, we will explore five ways to achieve this effect using HTML and CSS.

Method 1: Using CSS3 nth-child Selector

The CSS3 nth-child selector is a powerful tool that allows you to target specific elements in a list or table. To alternate row colours using this selector, you can use the following code:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>35</td>
  </tr>
</table>

And the CSS:

tr:nth-child(odd) {
  background-color: #f2f2f2;
}

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

This code will apply a light grey background colour to odd-numbered rows and a white background colour to even-numbered rows.

Method 2: Using JavaScript

You can also use JavaScript to alternate row colours. This method is useful if you need to dynamically generate tables or lists. Here is an example of how to do it:

<table id="myTable">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>35</td>
  </tr>
</table>

And the JavaScript:

var table = document.getElementById("myTable");
var rows = table.getElementsByTagName("tr");

for (var i = 0; i < rows.length; i++) {
  if (i % 2 === 0) {
    rows[i].style.backgroundColor = "#f2f2f2";
  } else {
    rows[i].style.backgroundColor = "#ffffff";
  }
}

This code will apply a light grey background colour to odd-numbered rows and a white background colour to even-numbered rows.

Method 3: Using CSS Classes

Another way to alternate row colours is to use CSS classes. You can define two classes, one for odd-numbered rows and one for even-numbered rows, and then apply these classes to the rows in your table or list. Here is an example:

<table>
  <tr class="odd">
    <td>John</td>
    <td>25</td>
  </tr>
  <tr class="even">
    <td>Jane</td>
    <td>30</td>
  </tr>
  <tr class="odd">
    <td>Bob</td>
    <td>35</td>
  </tr>
</table>

And the CSS:

.odd {
  background-color: #f2f2f2;
}

.even {
  background-color: #ffffff;
}

This code will apply a light grey background colour to rows with the class “odd” and a white background colour to rows with the class “even”.

Method 4: Using Inline Styles

You can also use inline styles to alternate row colours. This method is not recommended as it can make your HTML code cluttered and difficult to maintain. However, it can be useful in certain situations. Here is an example:

<table>
  <tr style="background-color: #f2f2f2;">
    <td>John</td>
    <td>25</td>
  </tr>
  <tr style="background-color: #ffffff;">
    <td>Jane</td>
    <td>30</td>
  </tr>
  <tr style="background-color: #f2f2f2;">
    <td>Bob</td>
    <td>35</td>
  </tr>
</table>

This code will apply a light grey background colour to the first and third rows and a white background colour to the second row.

Method 5: Using SASS or SCSS

If you are using a CSS preprocessor like SASS or SCSS, you can use a loop to generate the CSS code for alternating row colours. Here is an example:

$table-rows: 10;

@for $i from 1 through $table-rows {
  tr:nth-child(#{$i}) {
    @if $i % 2 == 0 {
      background-color: #f2f2f2;
    } @else {
      background-color: #ffffff;
    }
  }
}

This code will generate the CSS code for alternating row colours for a table with 10 rows.

📝 Note: The above methods can be used to alternate row colours in tables and lists. However, the best method to use depends on your specific requirements and the complexity of your project.

In summary, there are several ways to alternate row colours in tables and lists, including using CSS3 nth-child selector, JavaScript, CSS classes, inline styles, and SASS or SCSS. Each method has its own advantages and disadvantages, and the best method to use depends on your specific requirements and the complexity of your project.