Modifying the color of table rows using HTML and CSS

Question

Modifying the color of table rows using HTML and CSS

Seeking guidance on HTML and CSS with a simple query.

How can I assign different colors to each row in a table? For instance, row 1 as red, row 2 as blue, and so on.

Here is my HTML code:

#table {
  font-family: Arial, Helvetica, sans-serif;
  width: 600px;
  border-collapse;
  collapse;
}
#table td,
#table th {
  font-size: 12x;
  border: 1px solid #4D365B;
  padding: 3px 7px 2px 7px;
}
#table th {
  font-size: 14px;
  text-align: left;
  padding-top: px;
  padding-bottom: 4px;
  background-color: #4D365B;
  color: #918CB5;
}
#table td {
  color: #000000;
  background-color: #979BCA;
}

<table id="table">
  <tr>
    <th>Company</th>
    <th>Contact
      <th>Country</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2
      <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2
      <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2
      <td>3</td>
  </tr>
</table>

html css

Answer 1

Answer №1

If I understand correctly, you are looking to style each row with a different color in a table. There are various ways to achieve this:

Assign a class to each row and then style those classes individually.
Utilize the direct sibling selector tr + tr.
Use the :nth-of-type selector.

table tr {background: red;}
table tr:nth-of-type(2) {background: blue;}
table tr:nth-of-type(3) {background: green;}
table tr:nth-of-type(4) {background: yellow;}
table tr:nth-of-type(5) {background: grey;}

<table id="table">
  <tr>
    <th>Company</th>
    <th>Contact
      <th>Country</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2
      <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2
      <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2
      <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2
      <td>3</td>
  </tr>
</table>

Answer 2

If I understand correctly, you are looking to style each row with a different color in a table. There are various ways to achieve this:

Assign a class to each row and then style those classes individually.
Utilize the direct sibling selector tr + tr.
Use the :nth-of-type selector.

table tr {background: red;}
table tr:nth-of-type(2) {background: blue;}
table tr:nth-of-type(3) {background: green;}
table tr:nth-of-type(4) {background: yellow;}
table tr:nth-of-type(5) {background: grey;}

<table id="table">
  <tr>
    <th>Company</th>
    <th>Contact
      <th>Country</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2
      <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2
      <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2
      <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2
      <td>3</td>
  </tr>
</table>

Answer 3

Answer №2

Give this a try too!

#table tr{background: red;}
#table tr:nth-child(2n+1){background: blue;}

#table {
font-family: Arial, Helvetica, sans-serif;
width:600px;
border-collapse;collapse;

#table td, #table th {
font-size:12x;
border:1px solid #4D365B;
padding: 3px 7px 2px 7px;

#table th {
font-size:14px;
text-align:left;
padding-top:px;
padding-bottom:4px;
background-color:#4D365B;
color:#918CB5;

#table td {
color:#000000;
background-color:#979BCA;
}

<table id="table">
<tr><th> Company</th><th>Contact<th>Country</th></tr>
<tr><td> 1</td><td>2<td> 3</td></tr>
<tr><td> 1</td><td>2<td> 3</td></tr>
<tr><td> 1</td><td>2<td> 3</td></tr>

Answer 4

Give this a try too!

#table tr{background: red;}
#table tr:nth-child(2n+1){background: blue;}

#table {
font-family: Arial, Helvetica, sans-serif;
width:600px;
border-collapse;collapse;

#table td, #table th {
font-size:12x;
border:1px solid #4D365B;
padding: 3px 7px 2px 7px;

#table th {
font-size:14px;
text-align:left;
padding-top:px;
padding-bottom:4px;
background-color:#4D365B;
color:#918CB5;

#table td {
color:#000000;
background-color:#979BCA;
}

<table id="table">
<tr><th> Company</th><th>Contact<th>Country</th></tr>
<tr><td> 1</td><td>2<td> 3</td></tr>
<tr><td> 1</td><td>2<td> 3</td></tr>
<tr><td> 1</td><td>2<td> 3</td></tr>

Answer 5

Answer №3

To achieve this effect, simply employ pseudo selectors like nth-child.

#table tr:nth-child(odd){background:green}
#table tr:nth-child(even){background:yellow}

<table id="table">
<tr><th> Name</th><th>Age<th>Country</th></tr>
<tr><td>John</td><td>25<td>USA</td></tr>
<tr><td>Sarah</td><td>30<td>Canada</td></tr>
<tr><td>Michael</td><td>22<td>Japan</td></tr>
</table>

Answer 6

To achieve this effect, simply employ pseudo selectors like nth-child.

#table tr:nth-child(odd){background:green}
#table tr:nth-child(even){background:yellow}

<table id="table">
<tr><th> Name</th><th>Age<th>Country</th></tr>
<tr><td>John</td><td>25<td>USA</td></tr>
<tr><td>Sarah</td><td>30<td>Canada</td></tr>
<tr><td>Michael</td><td>22<td>Japan</td></tr>
</table>

Answer 7

Answer №4

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

 tr:nth-child(odd) {
  background: #0030ff;
}

<table class="example1">
  <tbody>
    <tr>
      <th>Month
      </th>
      <th>'94
      </th>
      <th>'95
      </th>
      <th>'96
      </th>
      <th>'97
      </th>
      <th>'98
      </th>
      <th>'99
      </th>
      <th>'00
      </th>
      <th>'01
      </th>
      <th>'02
      </th>
    </tr>
    <tr>
      <td>Jan
      </td>
      <td>14
      </td>
      <td>13
      </td>
      <td>14
      </td>
      <td>13
      </td>
      <td>14
      </td>
      <td>11
      </td>
      <td>11
      </td>
      <td>11
      </td>
      <td>11
      </td>
    </tr>
    <tr>
    ... (remaining table rows)
  </tbody>
</table>

Answer 8

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

 tr:nth-child(odd) {
  background: #0030ff;
}

<table class="example1">
  <tbody>
    <tr>
      <th>Month
      </th>
      <th>'94
      </th>
      <th>'95
      </th>
      <th>'96
      </th>
      <th>'97
      </th>
      <th>'98
      </th>
      <th>'99
      </th>
      <th>'00
      </th>
      <th>'01
      </th>
      <th>'02
      </th>
    </tr>
    <tr>
      <td>Jan
      </td>
      <td>14
      </td>
      <td>13
      </td>
      <td>14
      </td>
      <td>13
      </td>
      <td>14
      </td>
      <td>11
      </td>
      <td>11
      </td>
      <td>11
      </td>
      <td>11
      </td>
    </tr>
    <tr>
    ... (remaining table rows)
  </tbody>
</table>

Answer 9

Answer №5

If you want to style each row individually using CSS, you can follow this approach:

table tr:first-child {background: red;}
table tr:nth-child(2) {background: blue;}
table tr:nth-child(3) {background: orange;}
table tr:nth-child(4) {background: yellow;}
table tr:last-child {background: purple;}

Answer 10

If you want to style each row individually using CSS, you can follow this approach:

table tr:first-child {background: red;}
table tr:nth-child(2) {background: blue;}
table tr:nth-child(3) {background: orange;}
table tr:nth-child(4) {background: yellow;}
table tr:last-child {background: purple;}

Answer 11

Answer №6

This snippet of code will modify the appearance of the table row's color.

 table, td, th {
    border: 1px solid red;
}

th {
    background-color: red;
    color: black;
}

Reference:

Answer 12

This snippet of code will modify the appearance of the table row's color.

 table, td, th {
    border: 1px solid red;
}

th {
    background-color: red;
    color: black;
}

Reference:

Modifying the color of table rows using HTML and CSS

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

What is the best way to apply a Javascript function to multiple tags that share a common id?

Unseen related model fields

An issue with excess whitespace appearing below the footer while adjusting the size of the webpage

How to perfectly align text vertically using Bootstrapstylesheet

ReactJs - Reactstrap | Issue with Jumbotron displaying background color

Using Perl's regular expressions to perform substitutions

JavaScript xPath is ineffective at providing a return value

Can one select a radio button without corrupting the data in VUE?

Tips for choosing the ancestor's ancestor in CSS

Struggling to connect HTML elements with AngularJS and TinyMCE?

How can TailwindCSS be used to wrap a nested flexbox at a specific viewport?

Tips for keeping two divs aligned horizontally on a webpage

Utilizing if conditions within loops in a Jade template

The Body and HTML elements compress to sizes significantly smaller than the viewport

How to style the videojs chapter menu with CSS to extend the box to the full length of the line

The NgbTypeahead element is not able to scroll when placed within a scrollable container

Click automatically upon loading the page

Is there a way to direct to a particular section of an external website without relying on an id attribute in the anchor tag?

Using node.js to submit a form and upload an image

Ways to align an image and text vertically next to each other within a div