<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab form using tables</title>
<style>
.dta { /* active TAB */
/* border-radius: 10px; */
/* border-left-style:solid; border-left-width: 2px; border-left-color:silver; */
text-align: center;
border-left:2px black solid;
border-top:2px black solid;
border-right:2px black solid;
border-radius: 15px 15px 0px 0px;
background-color:#E1FFD7;
font-size:32px;
}
.dtna { /* not active TAB */
text-align: center;
border-left:2px silver solid;
border-top:2px silver solid;
border-right:2px silver solid;
border-bottom:2px black solid;
border-radius: 15px 15px 0px 0px;
font-size:24px;
}
.dtma {
text-align: center;
border-left:2px black solid;
border-right:2px black solid;
border-bottom:2px black solid;
border-radius: 0px 0px 15px 15px;
background-color:#E1FFD7;
}
</style>
</head>
<body>
<div align="center">
<table style="width: 80%;" cellpadding="5" cellspacing="0">
<tr style="height:70px">
<td class="dta">Tab1</td>
<td class="dtna">Tab2</td>
<td class="dtna">Tab3</td>
</tr>
<tr>
<td class="dtma" style="height:30vh;" colspan="3"> </td>
</tr>
</table>
<br><br>
<table style="width: 80%;" cellpadding="5" cellspacing="0">
<tr style="height:70px">
<td class="dtna">Tab1</td>
<td class="dta" style="background-color:#FF9900">Tab2</td>
<td class="dtna">Tab3</td>
</tr>
<tr>
<td class="dtma" style="height:30vh; background-color:#FF9900" colspan="3"> </td>
</tr>
</table>
<br><br>
<table style="width: 80%;" cellpadding="5" cellspacing="0">
<tr style="height:70px">
<td class="dtna">Tab1</td>
<td class="dtna">Tab2</td>
<td class="dta" style="background-color: #0099FF">Tab3</td>
</tr>
<tr>
<td class="dtma" style="height:30vh; background-color: #0099FF" colspan="3"> </td>
</tr>
</table>
</div>
</body>
</html>