HTML Table : Want to design a table strucutre like this - html-table

Question

I have this table structure
I am new to table structure. I want to design the table like in the image. the first column should have bigger width then the other and
table{
background: white;
width: 85%;
margin: 60px auto;
border-spacing: 0;
}
th{
border-bottom: 2px yellow solid;
height: 30px;
font-size: 12px;
display: table-cell;
vertical-align: bottom;
padding-bottom: 2px;
}
<table>
<tr>
<th width="75%" align="left" style="padding-left:25px;">
Work Category
</th>
<th>
Qty
</th>
<th>
Unit/Price
</th>
<th>
Price
</th>
</tr>
<tr>
<th width="75%" align="left" style="padding-left:25px;">
</th>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
<tr>
<th width="75%" align="left" style="padding-left:25px;">
</th>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
<tr>
<th width="75%" align="left" style="padding-left:25px;">
</th>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
<tr>
<th width="75%" align="left" style="padding-left:25px;">
</th>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
</table>
I don't know how to write only last 2 column i.e subtotal and Rs.
Any help would be great.
Thank You.

Answer 1

Here it is. In case of any question, please ask in the comments.
table{
background: white;
width: 85%;
margin: 60px auto;
border-spacing: 0;
}
table, tr, th, td{
border: 2px yellow solid;
}
th, td{
height: 30px;
font-size: 12px;
display: table-cell;
vertical-align: bottom;
padding-bottom: 2px;
}
.col1{
width: 60%;
}
.col2{
width: 9%;
}
.col3{
width: 12%;
}
.col4{
width: 19%;
}
<table>
<tr>
<th class="col1">Work Category</th>
<th class="col2">QTY</th>
<th class="col3">Unit/Price</th>
<th class="col4">Price</th>
</tr>
<tr>
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
<td class="col4"></td>
</tr>
<tr>
<td class="col1" style="background-color: yellow"></td>
<td class="col2" colspan="2"></td>
<td class="col4"></td>
</tr>
</table>

Answer 2

TH are used for table headers, so instead for any cells that contain data use TD then if you need to combine cells, use rowspan and colspan, you can familiarize yourself with them using the resources below:
Rowspan article W3Schools:
https://www.w3schools.com/tags/att_td_rowspan.asp
Colspan Article W3Schools:
https://www.w3schools.com/tags/att_td_colspan.asp
If you want to add style to a column I would suggest assigning a class and then applying that style to the particular class, you can find that information on W3Schools explained quite well.

Answer 3

Try this.
HTML
<table>
<tr>
<th align="left">
Work Category
</th>
<th>
Qty
</th>
<th>
Unit/Price
</th>
<th>
Price
</th>
</tr>
<tr>
<td align="left">
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="left">
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="left">
</td>
<td colspan="2"></td>
<td></td>
</tr>
CSS
table{
background: white;
width: 85%;
margin: 60px auto;
/*border-spacing: 0;*/
border-collapse:collapse;
}
th, td{
height: 30px;
font-size: 12px;
display: table-cell;
vertical-align: bottom;
padding-bottom: 2px;
border: 2px solid yellow;
vertical-align: middle;
}
table th:first-child{
width: 60%;
}
table th{
width: 7%;
}
table th:last-child{
width: 20%;
}