Untitled

<!DOCTYPE HTML>
<html>
<head>
  <title> first lab </title>
</head>
<body>
  <table border="1px " style=" width:50% ; text-align:center " id="table1" >

    <thead >
    <tr style="background-color: #4CAF50 ; height:30px">
      <th>name</th>
      <th>age</th>
      <th>country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ahmed</td>
      <td>15</td>
      <td>Egypt</td>
    </tr>
    <tr>
      <td>Mohamed</td>
      <td>12</td>
      <td>USA</td>
    </tr>
  </tbody>
  </table>
</br></br></br>
  Username: <input type="text" id="username"/>
  age: <input type="text" id="age"/>
  password: <input type="password" id="password"/>

  <input type="submit" onclick="add_row()"/>


  <script>
   function add_row(){
     var table = document.getElementById('table1');
     var row1 = document.createElement("tr");

     var col1 = document.createElement("td");
     col1.innerText= document.getElementById('username').value;

     var col2 = document.createElement("td");
    col2.innerText = document.getElementById('age').value;

     var col3 = document.createElement("td");
     col3.innerText = document.getElementById('password').value;


       row1.appendChild(col1);
       row1.appendChild(col2);
       row1.appendChild(col3);

       table.appendChild(row1);


   }
  </script>
</body>
</html>