How to split a table row into two column? - html

Question

I have a table with three column. But i need 9th row and 1st & 3rd column will split into 2 column. I have some stackoverflow answer but these are not solved my issue. I want something like below picture last row:
JSFIDDLE HERE.
.tg {
border-collapse: collapse;
border-spacing: 0;
margin: 0px auto;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 12px 85px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: black;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 12px 85px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: black;
}
.tg .tg-0pky {
border-color: inherit;
text-align: left;
vertical-align: top
}
<table class="tg">
<tr>
<th class="tg-0pky">Applicants</th>
<th class="tg-0pky"></th>
<th class="tg-0pky">Joint Applicants</th>
</tr>
<tr>
<td class="tg-0pky"></td>
<td class="tg-0pky">Current last name or single name</td>
<td class="tg-0pky"></td>
</tr>
<tr>
<td class="tg-0pky"></td>
<td class="tg-0pky">First and middle names</td>
<td class="tg-0pky"></td>
</tr>
<tr>
<td class="tg-0pky"></td>
<td class="tg-0pky">Marital Status</td>
<td class="tg-0pky"></td>
</tr>
<tr>
<td class="tg-0pky">Country of divorce</td>
<td class="tg-0pky" rowspan="3">If divorced</td>
<td class="tg-0pky">Country of divorce</td>
</tr>
<tr>
<td class="tg-0pky">City of divorce if in Canada</td>
<td class="tg-0pky">City of divorce if in Canada</td>
</tr>
<tr>
<td class="tg-0pky">Court file number</td>
<td class="tg-0pky" colspan="2">Court file number</td>
</tr>
<tr>
<td class="tg-0pky"></td>
<td class="tg-0pky">Religious denomination</td>
<td class="tg-0pky"></td>
</tr>
<tr>
<td class="tg-0pky"></td>
<td class="tg-0pky">Age and date of birth</td>
<td class="tg-0pky"></td>
</tr>
<tr>
<td class="tg-0pky"></td>
<td class="tg-0pky">Place of birth</td>
<td class="tg-0pky"></td>
</tr>
</table>

Answer 1

The short answer is: You can't split individual cells into more cells unless you do that in all other rows too. Those other rows could then implement colspan=2 attribute on places where you want to merge 2 cells into a single cell to get the desired effect.
But the issue here is that you should not use the table at all and I strongly discourage you to do so. Table should be used only for tabular data. For layouts you should be using flexbox, or grid systems found in Bootstrap and similar CSS frameworks or anything else which is relying on CSS. I can't stress enough how important this is. There are dozens of reasons not to use it among accessibility, usability, semantic, SEO etc. Please read more here: Why not use tables for layout in HTML?

Answer 2

try this
<!-- Head -->
<tr>
<th class="tg-0pky" colspan="2">Applicants</th>
<th class="tg-0pky"></th>
<th class="tg-0pky" colspan="2">Joint Applicants</th>
</tr>
<!-- 1 -->
<tr>
<td class="tg-0pky" colspan="2"></td>
<td class="tg-0pky">Current last name or single name</td>
<td class="tg-0pky" colspan="2"></td>
</tr>
<!-- 2 -->
<tr>
<td class="tg-0pky" colspan="2"></td>
<td class="tg-0pky">First and middle names</td>
<td class="tg-0pky" colspan="2"></td>
</tr>
<!-- 3 -->
<tr>
<td class="tg-0pky" colspan="2"></td>
<td class="tg-0pky">Marital Status</td>
<td class="tg-0pky" colspan="2"></td>
</tr>
<!-- 4 -->
<tr>
<td class="tg-0pky" colspan="2">Country of divorce</td>
<td class="tg-0pky" rowspan="3">If divorced</td>
<td class="tg-0pky" colspan="2">Country of divorce</td>
</tr>
<!-- 5 -->
<tr>
<td class="tg-0pky" colspan="2">City of divorce if in Canada</td>
<td class="tg-0pky" colspan="2">City of divorce if in Canada</td>
</tr>
<!-- 6 -->
<tr>
<td class="tg-0pky" colspan="2">Court file number</td>
<td class="tg-0pky" colspan="2">Court file number</td>
</tr>
<!-- 7 -->
<tr>
<td class="tg-0pky" colspan="2"></td>
<td class="tg-0pky">Religious denomination</td>
<td class="tg-0pky" colspan="2"></td>
</tr>
<!-- 8 -->
<tr>
<td class="tg-0pky" colspan="2"></td>
<td class="tg-0pky">Age and date of birth</td>
<td class="tg-0pky" colspan="2"></td>
</tr>
<!-- 9 -->
<tr>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
<td class="tg-0pky">Place of birth</td>
<td class="tg-0pky"></td>
<td class="tg-0pky"></td>
</tr>
</table>