<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container sCantainerStyle" > <div class="row"> <table class="sTableStyle"> <tr ><th class="sHeaderStyle">Registration Page in Table</th></tr> <tr> <td><label class="sLabelStyle">User name:</label></td> <td ><input type="test" id="sUserName" class="sInputStyle" placeholder="User name..." required></td> </tr> <tr> <td><label class="sLabelStyle">User Email Id:</label></td> <td><input type="email" id="sEmail" class="sInputStyle" placeholder="Email id...." required></td> </tr> <tr> <td><label class="sLabelStyle">Password:</label></td> <td><input type="password" id="sPwd" class="sInputStyle" placeholder="Password...." required/></td> </tr> <tr> <td><label class="sLabelStyle">Confirm Password:</label></td> <td><input type="password" id="sCPwd" class="sInputStyle" placeholder="Confirm password "</td> </tr> <tr> <td>   </td> <td> <button type="button" class="btn btn-primary" onclick="validate()">Sign Up</button> </td> </tr> </table> </div> </div>

.sLabelStyle{ color:lightblue; } .sTableStyle{ font-size:14px; background-color:#ffffff; } .sHeaderStyle{ color:pink; } .sInputStyle{ color:red; } .sCantainerStyle{ }

function validate(){ var sUserName,sEmail,sPwd,sCPwd; sUserName=document.getElementById("sUserName").value; sEmail=document.getElementById("sEmail").value; sPwd=document.getElementById("sPwd").value; sCPwd=document.getElementById("sCPwd").value; }