JSFiddle - React, Tailwind, and code Playground

HTML

<body onLoad="Alter('cada','cada')">
<table width="100%" height="100"  align="left" valign="top" cellspacing="0" cellpadding="0" border="0" style="border-left: 1px solid #0000FF;">
	<tr>
		<td height="20" width="50" class="menu" id="cada" onClick="Alter('t_cada','d_cada')">InclusĂŁo</td>
		<td height="20" width="50" class="menu" id="alt" onClick="Alter('t_alt','d_alt')">Alterar</td>
	</tr>

<tr>
	<td height="200" style="border-color:blue"  width="300" class="tb-conteudo" valign="top" colspan="2" >
		<div id="d_cada" width="100" class="conteudo" style="display: block; padding-top:5px;">
			<table border="0" width="50%">
				<tr>
					<td >
						<iframe style="border-radius:20px;"  scrolling="no" src="../sai_cada_usua/sai_frm_incl_usua.php" width="830" height="310" >
						</iframe>
                    </td>
                </tr>
          </table>
       </div>

		<div id="d_alt" class="conteudo" width="100"  style="display: none; padding-top:5px;">
			<table border="0" width="50%">
				<tr>
					<td>
						<iframe style="border-radius:20px;" scrolling="no" src="../sai_cada_usua/sai_frm_alte_excl_usua.php" width="830" height="310" >
						</iframe>
                    </td>
                </tr>
            </table>
        </div>
       
   </td> 
</tr>
</table>

CSS

body, table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000033;
background-color: #FFFFFF;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 5px;
cursor: hand;
text-align: center;
margin-top: 0px;
}

.menu-sel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #0000FF;
background-color: #FFFAFA;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
padding: 5px;
cursor: hand;
margin: 0px; 
margin-top: 0px;
}

.tb-conteudo {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}

.conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000033;
background-color: ;
padding: 5px;
width:850px;
height: 330px;
}

JavaScript

function stAba(menu,conteudo)
{
  this.menu = menu;
  this.conteudo = conteudo;
}

var arAbas = new Array();
arAbas[0] = new stAba('t_cada','d_cada');
arAbas[1] = new stAba('t_alt','d_alt');

function Alter(menu,conteudo)
{

  for (i=0;i<arAbas.length;i++)
  {
   m = document.getElementById(arAbas[i].menu);
   m.className = 'menu';
   c = document.getElementById(arAbas[i].conteudo)
   c.style.display = 'none';
  }
  m = document.getElementById(menu)
  m.className = 'menu-sel';
  c = document.getElementById(conteudo)
  c.style.display = '';
}