How to show a table after submit a form – Blancer.com Tutorials and projects

I have a problem here, I have a form to enter scores and calculate the average score. After entering the form, the user clicks on the submit button, it will display a table of scores that have been entered before along with 2 buttons. First button will add a column of average scores to the form and the second button will determine if any average score is >= 8 the letter in that column will be highlighted in red.
Here is my code, i hope someone can help me.
Here is my html file:

<!DOCTYPE html>
<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>Document</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <script src="js/script.js"></script>
    <h1 align="center">Class Marksheet</h1>
    <table align="center">
      <tr>
        <td>Name:</td>
        <td><input name="name" id="name" type="text" /></td>
      </tr>

      <tr>
        <td>Math:</td>
        <td><input name="math" id="math" type="text" /></td>
      </tr>

      <tr>
        <td>Physics:</td>
        <td><input name="physics" id="physics" type="text" /></td>
      </tr>

      <tr>
        <td>Chemistry:</td>
        <td><input name="chemical" id="chemical" type="text" /></td>
      </tr>

      <td>
        <button type="submit" onclick="score_table()">Submit</button>
      </td>
    </table>

<!--
This table below must not show when user access the browser, 
it only show when user click the "Submit" button and 2 button below
-->
    <table id="tableScore" border="2" width="100%">
      <th>No</th>
      <th>Name</th>
      <th>Math</th>
      <th>Physics</th>
      <th>Chemistry</th>
      <th>Average Score</th> <!-- This still can not show -->
    </table>

   <div>
  <button onclick="">Show the average score</button> <!--This will show the average score column-->
  <button onclick="">Best student</button> <!--Determine if any average score >= 8 hightlight all the text into red-->
    </div>
  </body>
</html>

My JS file:

var testScore = { 
    name: "",
    math: 0,
    physical: 0,
    chemistry: 0
};
var i = 0; /* This variable is incremented by 1 every time the user clicks the "Submit" button. Display the "No" column, and the position of rows when added to the table 
*/

// Show a table after submit
function score_table() {
    document.getElementById("tableScore").style.display="block";

    // Gathering the data after submit
    testScore.name = document.getElementById("name").value;
    testScore.math = document.getElementById("math").value;
    testScore.physical = document.getElementById("physics").value;
    testScore.chemistry = document.getElementById("chemical").value;
}

Finally, my CSS file:

/* I just do to hidden the table, because i struggle with JS file :)) */
#tableScore {
  display: none;
}