how to group table rows in html css tailwind - css

Question

I am trying to group table rows using tailwind and custom CSS like the below screenshot:
I have done something similar like the screenshot but the issue is I want the total and Grade data in the middle, here is my code:
<div className="container mx-auto overflow-x-auto border-x border-t my-10">
<table className="table-auto w-full">
<thead className="border-b">
<tr
style={{ backgroundColor: "#5CB25A" }}
className="text-white font-bold h-10"
>
<th className="text-center md:p-4 p-0 md:w-32 w-10 border-r border-gray-300">
Subject Code
</th>
<th className="text-center md:p-4 p-0 md:w-96 w-none ">
Subject Name
</th>
<th
colSpan={3}
className="text-center p-4 border border-t-0 border-gray-300"
>
Marks
</th>
<th className="text-center md:p-4 p-0 md:w-32 w-10 border-r border-gray-300">
Grade
</th>
</tr>
<tr
style={{ backgroundColor: "#5CB25A" }}
className="border-b border-gray-400 font-bold h-10 text-white"
>
<th className="text-center p-4 border-r text-base"></th>
<th className="text-center p-4"></th>
<th className="text-center p-4 border ">Theory</th>
<th className="text-center p-4 border ">MCQ</th>
<th className="text-center p-4 border ">Total</th>
<th className="text-center p-4"></th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-gray-50 text-center border-b-0 border-b-none h-10">
<td className="p-0 border-l border-r">001</td>
<td className="p-0 border-l border-r">English 1</td>
<td className="p-0 border-l border-r">40</td>
<td className="p-0 border-l border-r">40</td>
<td className="p-0 border-l border-r"></td>
<td className="p-0 border-l border-r"></td>
</tr>
<tr className="border -b border-t-0 hover:bg-gray-50 text-center h-10">
<td className="p-0 border-l border-r">001</td>
<td className="p-0 border-l border-r">English 1</td>
<td className="p-0 border-l border-r">40</td>
<td className="p-0 border-l border-r">40</td>
<td className="p-0 border-l border-r">80</td>
<td className="p-0 border-l border-r">A+</td>
</tr>
<tr className="border-b hover:bg-gray-50 text-center h-10">
<td className="p-4 border">001</td>
<td className="p-4 border">English 1</td>
<td className="p-4 border">40</td>
<td className="p-4 border">40</td>
<td className="p-4 border"></td>
<td className="p-4 border">A+</td>
</tr>
</tbody>
</table>
</div>
Above code UI:
As you can see the total and grade are not in the middle because I have used table rows for the group row.

Answer 1

First I would like you to suggest to remove style={{ backgroundColor: "#5CB25A" }} and add bg-[#5CB25A] in <thead> tag.
<thead class="border-b bg-[#5CB25A]">
Secondly to center, you can use class flex items-center justify-center to center the Grade vertically.
You can also make use of grid class properties to create this table like below
<script src="https://cdn.tailwindcss.com"></script>
<div class="m-2 grid grid-cols-6 bg-gray-50 outline outline-1">
<!-- table head starts -->
<div class="row-span-2 flex items-center justify-center border-[1px] bg-[#5CB25a] py-12 text-white">Subject Code</div>
<div class="row-span-2 flex items-center justify-center border-[1px] bg-[#5CB25a] py-12 text-white">Subject Name</div>
<div class="col-span-3 flex items-center justify-center border-[1px] bg-[#5CB25a] text-white">Marks</div>
<div class="row-span-2 flex items-center justify-center border-[1px] bg-[#5CB25a] text-white">Grade</div>
<div class="flex items-center justify-center border-[1px] bg-[#5CB25a] text-white">Theory</div>
<div class="flex items-center justify-center border-[1px] bg-[#5CB25a] text-white">MCQ</div>
<div class="flex items-center justify-center border-[1px] bg-[#5CB25a] text-white">Total</div>
<!-- table head ends -->
<!-- table body starts -->
<div class="flex items-center justify-center border-[1px] border-b-0 py-4">
001<br />
001
</div>
<div class="flex items-center justify-center border-[1px] border-b-0">English 1<br />English 1</div>
<div class="flex items-center justify-center border-[1px] border-b-0">40<br />40</div>
<div class="flex items-center justify-center border-[1px] border-b-0">40<br />40</div>
<div class="flex items-center justify-center border-[1px] border-b-0">80</div>
<div class="flex items-center justify-center border-[1px] py-2">A+</div>
<div class="flex items-center justify-center border-[1px] py-2">001</div>
<div class="flex items-center justify-center border-[1px] py-2">English 1</div>
<div class="flex items-center justify-center border-[1px] py-2">40</div>
<div class="flex items-center justify-center border-[1px] py-2">40</div>
<div class="flex items-center justify-center border-[1px] py-2">80</div>
<div class="flex items-center justify-center border-[1px] py-2">A+</div>
<!-- table body ends -->
</div>
Don't forgot to replace class with className as you are working with className