How to merge two rows of a HTML table? - html

Question

I have searched in google but i don't find any solution of my issue.Could anyone tell me how to merge Group and GPA/CGPA, Out of rows?
For better view of my code see: BOOTPLY.
What i want:
This is my code, so far:
<table class="table table-bordered table-hover table-condensed table-responsive">
<thead>
<tr>
<th class="tg-yw4l" rowspan="2">Level</th>
<th class="tg-yw4l" rowspan="2">Name of Examination</th>
<th class="tg-yw4l" rowspan="2">Year of Study</th>
<th class="tg-yw4l" rowspan="2">Group /Subject</th>
<th class="tg-yw4l" rowspan="2">Division/
Class/Grade </th>
<th class="tg-yw4l" colspan="2">Grade</th>
<th class="tg-yw4l" rowspan="2">Board /University</th>
<th class="tg-yw4l" rowspan="2">Year of Passing
[yyyy]</th>
<th class="tg-yw4l" rowspan="2">Result Published by Controller of Exam [dd/mm/yyyy]</th>
</tr>
</thead>
<tbody>
<tr>
<td>
SSC/Equivalent
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<th>GPA/CGPA</th>
<th>Out of</th>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
HSC/Equivalent
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
Graduation
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
<select name="Gradnoyear" id="Gradnoyear" class="breadcrumbcombo1" tabindex="38" style="visibility: visible;">
<option value="-1" selected="selected">--Select--</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
Post Graduation
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
</tbody>
</table>

Answer 1

I think you just need to move your headings from the tbody, into the theader and then add a couple of normal columns to the tbody to replace the headings we just moved (comments in code as to what I have moved and added):
<table class="table table-bordered table-hover table-condensed table-responsive">
<thead>
<tr>
<th class="tg-yw4l" rowspan="2">Level</th>
<th class="tg-yw4l" rowspan="2">Name of Examination</th>
<th class="tg-yw4l" rowspan="2">Year of Study</th>
<th class="tg-yw4l" rowspan="2">Group /Subject</th>
<th class="tg-yw4l" rowspan="2">Division/ Class/Grade</th>
<th class="tg-yw4l" colspan="2">Grade</th>
<th class="tg-yw4l" rowspan="2">Board /University</th>
<th class="tg-yw4l" rowspan="2">Year of Passing [yyyy]
</th>
<th class="tg-yw4l" rowspan="2">Result Published by Controller of Exam [dd/mm/yyyy]</th>
</tr>
<!-- put your other two headers from tbody here: -->
<tr>
<th>GPA/CGPA</th>
<th>Out of</th>
</tr>
</thead>
<tbody>
<tr>
<td>
SSC/Equivalent
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<!-- replace those headers we have moved with a couple of normal columns: -->
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
HSC/Equivalent
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
Graduation
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
<select name="Gradnoyear" id="Gradnoyear" class="breadcrumbcombo1" tabindex="38" style="visibility: visible;">
<option value="-1" selected="selected">--Select--</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
Post Graduation
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
</tbody>
</table>
Updated bootply