How do i give a tables first row of td color
For instance i have
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
now i want only the first row to have a background color, for instance 123 and not the 456.
Hi there rahiljainf1,
and a warm welcome to these forums. 
Does this method help…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
#mytable {
border: 1px solid #999;
margin: auto;
background-color: #fff;
}
#mytable td {
padding: 0.5em;
border: 1px solid #999;
border-radius: 0.4em;
}
#mytable tr:nth-of-type(1) td { /* 1st row */
background-color: #eef;
}
#mytable tr:nth-of-type(3) td { /* 3rd row */
background-color: #fee;
}
#mytable tr:nth-of-type(6) td { /* 6th row */
background-color: #efe;
}
</style>
</head>
<body>
<table id="mytable">
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr><tr>
<td>data 4</td>
<td>data 5</td>
<td>data 6</td>
</tr><tr>
<td>data 7</td>
<td>data 8</td>
<td>data 9</td>
</tr><tr>
<td>data 10</td>
<td>data 11</td>
<td>data 12</td>
</tr><tr>
<td>data 13</td>
<td>data 14</td>
<td>data 15</td>
</tr><tr>
<td>data 16</td>
<td>data 17</td>
<td>data 18</td>
</tr><tr>
<td>data 19</td>
<td>data 20</td>
<td>data 21</td>
</tr><tr>
<td>data 22</td>
<td>data 23</td>
<td>data 24</td>
</tr><tr>
<td>data 25</td>
<td>data 26</td>
<td>data 27</td>
</tr>
</tbody>
</table>
</body>
</html>
coothead
Then I think the simpliest way would be to use the first-child selector:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Untitled</title>
<style>
.row-color tr:first-child{
background: lightgoldenrodyellow;
}
</style>
</head><body>
<table class=row-color>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</body></html>
Though @coothead gave you a more versatil method where any row can be selected. 
Hi rahiljainf1, welcome to the forums!
When you post a code snippet you can should use the </> button.
First select the code piece and then press the button to format the selected code.
Or you can first press the code button and then paste the code to replace the “type or paste code here” message.
The </> was done by using the code button to get “preformatted text” in a text line. 
I will borrow @Erik_J’s example and change the selector to show two more methods of addressing a row of cells and a way of including the space between the cells, if desired.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table row color</title>
<style>
.rowcolor td { /* delete this "td" to color the space between the cells, too. */
background-color: pink;
}
</style>
</head>
<body>
<table>
<tbody>
<tr class="rowcolor"> <!-- move the classname to this "tr" -->
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</body>
</html>
Please note that there are very, very few properties that can target a <tr>, but fortunately background-color is one of them.
Go ahead, try it!
There are many ways to do that.
(1)By using first-child
<style>
tr:first-child{
background-color:cyan;
}
</style>
(2)By using nth-child
<style>
tr:nth-child(1){
background-color:cyan;
}
</style>
(3)By providing Class name
<style>
.row1{
background-color:cyan;
}
</style>
<tr class="row1">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
(4) By inline styling
<tr style="background-color:cyan;">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.