How to individually color html table cells

Question

EXAMPLE

I want to individually color in cells on a 2x5 row html table, pictured in the above image.

I can't find any examples of :nth-child allowing you to individually select and set the color of multiple different table cells like how I want to. I'm only familiar with very basic html & css so I'm not sure what I'd do here to accomplish this.

what I have written in the html file :

<!DOCTYPE html>
<html>
<head>
<style>
table, td {border: 1px solid black; border-collapse: collapse;}
td {height: 50px; width: 100px; text-align: center; padding: 0px;}
th {height: 30px; width: 100px; text-align: center;}
tr:nth-child(2) {background-color: #fff000;}
</style>
</head>
<body>

<table>
  <th>name</th>
  <tr>
    <td>1<br>a</td>
    <td>2<br>b</td>
  </tr>
  <tr>
    <td>3<br>c</td>
    <td>4<br>d</td>
  </tr>
  <tr>
    <td>5<br>e</td>
    <td>6<br>f</td>
  </tr>
  <tr>
    <td>7<br>g</td>
    <td>8<br>h</td>
  </tr>
  <tr>
    <td>9<br>i</td>
    <td>10<br>j</td>
  </tr>
</table>

</body>
</html>

I also want the tablehead to be centered between both vertical rows and can't figure that out either

Alice · Accepted Answer · 2025-06-14 07:17:33Z

2

tr:nth-child(2) td:nth-child(2) {background-color: #fff000;}

colours a single cell yellow,

<th colspan="2">name</th>

adds a column span of 2, centering the table head between the two columns.

edit: Note that tr:nth-child(1) td:nth-child(1) won't work, because you have the table header. You can test this by applying a rule to tr:nth-child(1) th:nth-child(1) .

edited Jun 14 at 7:17

answered Jun 14 at 7:11

Alice

1716 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

THISISNTAVERYLONGNAMEORISITIDK Jun 14 at 17:51

How could I make this apply to only 1 table, if there were multiple tables on this page?

Alice Jun 15 at 1:13

Apply a CSS class to the table in your HTML (<table class="coloured-table">, and then .coloured-table tr:nth-child(2) td:nth-child(2) in your CSS), or use table:nth-child(1) tr:nth-child(2) td:nth-child(2). :)

AlainPre · Accepted Answer · 2025-06-14 07:37:09Z

-2

You can also assign classes to each of the cells in the HTML code. But Alice's solution is more elegant.

answered Jun 14 at 7:37

AlainPre

5433 silver badges6 bronze badges

Comments

Bunyodjon Rokhataliev · Accepted Answer · 2025-06-14 07:42:09Z

-2

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
  border-collapse: collapse;
}
td {
  height: 50px;
  width: 100px;
  text-align: center;
  padding: 0px;
  font-weight: bold;
}
th {
  height: 30px;
  width: 100px;
  text-align: center;
}

tr:nth-child(2) td:nth-child(1) { background-color: #ff9999; } 
tr:nth-child(2) td:nth-child(2) { background-color: #99ccff; } 
tr:nth-child(3) td:nth-child(1) { background-color: #ccffcc; } 
tr:nth-child(3) td:nth-child(2) { background-color: #ffff99; } 
tr:nth-child(4) td:nth-child(1) { background-color: #ffccff; }
tr:nth-child(4) td:nth-child(2) { background-color: #c2f0c2; } 
tr:nth-child(5) td:nth-child(1) { background-color: #f0e68c; } 
tr:nth-child(5) td:nth-child(2) { background-color: #d1c4e9; }
tr:nth-child(6) td:nth-child(1) { background-color: #ffb6c1; } 
tr:nth-child(6) td:nth-child(2) { background-color: #add8e6; }
</style>
</head>
<body>

<table>
  <tr>
    <td>1<br>a</td>
    <td>2<br>b</td>
  </tr>
  <tr>
    <td>3<br>c</td>
    <td>4<br>d</td>
  </tr>
  <tr>
    <td>5<br>e</td>
    <td>6<br>f</td>
  </tr>
  <tr>
    <td>7<br>g</td>
    <td>8<br>h</td>
  </tr>
  <tr>
    <td>9<br>i</td>
    <td>10<br>j</td>
  </tr>
</table>

</body>
</html>

answered Jun 14 at 7:42

Bunyodjon Rokhataliev

1

1 Comment

Community Jun 14 at 15:26

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to individually color html table cells

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related