HTML table Row Banding except 1 Column

Language Help HTML
1

I am trying to create a basic table in HTML with with Column as Department , name , Designation and Salary. I am very new to HTML so apology if the code is not optimized

Ask is Department should be Merge Cell and background should be white for Department Column
but all 4 columns should have alternate back ground banking
I tried using tr:nth-child(odd) {
background-color: Lightgreen;
} but this also colors Department column

Code written is below

<!-- CSS style to set alternate table
		row using color -->
<style>
	table {
		border-collapse: collapse;
		width: 100%;
	}
	
	th, td {
		text-align: left;
		padding: 8px;
	}
	
	tr:nth-child(odd) {
		background-color: Lightgreen;
	}
</style>

	<tr>
      <td rowspan="2">Finance</td>
		<td>Steve</td>
		<td>Manager</td>
		<td>1,00,000</td>
	</tr>
	
	<tr>
      
		<td>SURAJ</td>
		<td>Assistant Manager</td>
		<td>50,000</td>
	</tr>
	
	<tr>
      <td rowspan="3">HR</td>
		<td>Khushboo</td>
		<td>Analysist</td>
		<td>65,000</td>
	</tr>
	
	<tr>
      
		<td>Kartik</td>
		<td>Worker</td>
		<td>20,000</td>
	</tr>
	
	<tr>
      
		<td>Saksham</td>
		<td>Worker</td>
		<td>20,000</td>
	</tr>
  <tr>
      <td rowspan="5">IT</td>
		<td>GEtak</td>
		<td>Analysist</td>
		<td>65,000</td>
	</tr>
	
	<tr>
      
		<td>Kartik2</td>
		<td>Worker</td>
		<td>20,000</td>
	</tr>
	
	<tr>
      
		<td>Rith</td>
		<td>Worker</td>
		<td>20,000</td>
	</tr>
  <tr>
      
		<td>Keth</td>
		<td>manager</td>
		<td>20,000</td>
	</tr>
  <tr>
      
		<td>Rohan</td>
		<td>AVP</td>
		<td>20,000</td>
	</tr>
</table>
Department Name Designation Salary
2

What you need first is a row of titles or translated to HTML table code <th>

Then you need to insert data to each column that you included in the <th>

No need to overcomplicate the table structure.

3

Hi @codebydean ,

It would be very kind if yoh can share a code maybe a small examples I am still very new to HTML

4

Of course!

What you can do is:

Let’s say we want to create a table that has some countries, their capitals, and the country population:

First, you need to make the headers

<table>
  <tr>
    <th>Country</th>
    <th>Capital</th>
    <th>Population</th>
  </tr>
</table>

Then we will add two rows of data to fill that table

  <tr>
    <td>France</td>
    <td>Paris</td>
    <td>67000000</td>
  </tr>
  <tr>
    <td>Mexico</td>
    <td>Mexico City</td>
    <td>126000000</td>
  </tr>

So if we add everything together we got this code

<table>
  <tr>
    <th>Country</th>
    <th>Capital</th>
    <th>Population</th>
  </tr>
 <tr>
    <td>France</td>
    <td>Paris</td>
    <td>67000000</td>
  </tr>
  <tr>
    <td>Mexico</td>
    <td>Mexico City</td>
    <td>126000000</td>
  </tr>
</table>
5

@codebydean
This will not work for my requirement

  1. Need to have merged cell that is why i tried rowspan=“2” as per your exmaple lets assume Asia has 10 countries and Europe 15 so Asia will be in Merged cell once and 10 countries in next column
  2. Column 1 - Continent (Asia , Europe) will not have background color but column 2, column 3, etc . will have banding I mean 1st rows white background, 2nd row Grey , 3rd again white and so on

I have written this which works for me but I believe its not the best optimized.
If you can help me optimized this or shorten this code but the table formatting should be same

<!DOCTYPE html>
<html>
	
<head>
	
	<!-- CSS style to set alternate table
			row using color -->
	<style>
		table {
			border-collapse: collapse;
			width: 100%;
		}
		
		th, td {
			text-align: left;
			padding: 8px;
		}
		
		
	</style>
</head>

<body>
	<table>
		<tr>
			<th>Name</th>
			<th>Designation</th>
			<th>Salary</th>
		</tr>
	<tr>
      <td rowspan="2">Finance</td>
		<td bgcolor="grey">Steve</td>
		<td bgcolor="grey">Manager</td>
		<td bgcolor="grey">1,00,000</td>
	</tr>
	
	<tr>
      
		<td>SURAJ</td>
		<td>Assistant Manager</td>
		<td>50,000</td>
	</tr>
	
	<tr>
      <td rowspan="3">HR</td>
		<td bgcolor="grey">Khushboo</td>
		<td bgcolor="grey">Analysist</td>
		<td bgcolor="grey">65,000</td>
	</tr>
	
	<tr>
      
		<td>Kartik</td>
		<td>Worker</td>
		<td>20,000</td>
	</tr>
	
	<tr>
      
		<td bgcolor="grey">Saksham</td>
		<td bgcolor="grey">Worker</td>
		<td bgcolor="grey">20,000</td>
	</tr>
  <tr>
      <td rowspan="5">IT</td>
		<td>GEtak</td>
		<td>Analysist</td>
		<td>65,000</td>
	</tr>
	
	<tr>
      
		<td bgcolor="grey">Kartik2</td>
		<td bgcolor="grey">Worker</td>
		<td bgcolor="grey">20,000</td>
	</tr>
	
	<tr>
      
		<td>Rith</td>
		<td>Worker</td>
		<td>20,000</td>
	</tr>
  <tr>
      
		<td bgcolor="grey">Keth</td>
		<td bgcolor="grey">manager</td>
		<td bgcolor="grey">20,000</td>
	</tr>
  <tr>
      
		<td>Rohan</td>
		<td>AVP</td>
		<td>20,000</td>
	</tr>
</table>	
	
	</table>
</body>

</html>