NESTED TABLE
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biodata</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
border-width: 0.1cm;
font-size: 25px;
}
td {
text-align: center;
font-size: 25px;
}
th, td {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 3px;
}
.cen {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<table class="cen">
<tr>
<th colspan="2" align="left" bgcolor="yellow">Personal Information</th>
</tr>
<tr>
<th>Name:</th>
<td>ABC</td>
</tr>
<tr>
<th>Age:</th>
<td>30</td>
</tr>
<tr>
<th>Gender:</th>
<td>Male</td>
</tr>
<tr>
<th>Address:</th>
<td><table class="cen">
<tr>
<th>Street:</th>
<td>123 Main St</td>
</tr>
<tr>
<th>City:</th>
<td>Metropolis</td>
</tr>
<tr>
<th>State:</th>
<td>Utopia</td>
</tr>
<tr>
<th>Zip Code:</th>
<td>123456</td>
</tr>
</table>
</td>
</tr>
<tr>
<th colspan="2" align="left" bgcolor="yellow">Education</th>
</tr>
<tr>
<th>High School:</th>
<td>
<table class="cen">
<tr>
<th>School Name:</th>
<td>XYZ High School</td>
</tr>
<tr>
<th>Year:</th>
<td>2010</td>
</tr>
</table>
</td>
</tr>
<tr>
<th>College:</th>
<td>
<table class="cen">
<tr>
<th>College Name:</th>
<td>ABC University</td>
</tr>
<tr>
<th>Year:</th>
<td>2014</td>
</tr>
<tr>
<th>Degree:</th>
<td>Bachelor of Science</td>
</tr>
</table>
</td>
</tr>
<tr>
<th colspan="2" align="left" bgcolor="yellow">Work Experience</th>
</tr>
<tr>
<th>Job1:</th>
<td>
<table class="cen">
<tr>
<th>Company:</th>
<td>XYZ Corp</td>
</tr>
<tr>
<th>Position:</th>
<td>Software Engineer</td>
</tr>
<tr>
<th>Years:</th>
<td>2015-2018</td>
</tr>
</table>
</td>
</tr>
<tr>
<th>Job2:</th>
<td>
<table class="cen">
<tr>
<th>Company:</th>
<td>ABC Solutions</td>
</tr>
<tr>
<th>Position:</th>
<td>Senior Developer</td>
</tr>
<tr>
<th>Years:</th>
<td>2018-Present</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
