You need to use AJAX for this to work. If you do it like this, the submit button performs a POST request to the server, and therefore you refresh the page again.

Here's a good solution for you to work with: https://www.pluralsight.com/guides/work-with-ajax-django

You can do this in Django in a following way:

views.py: `

def contact(request):
    if request.method == "POST":
        message_name = request.POST['message-name'] 
        # message-name has to be in your form
        # do something with the data in your view
        return render(request, 'template.html', {'message_name': message_name})
#return a variable message_name to the context

template.html:

{% if message_name %}
<center><h2><table id="your table"><tr><td></td></tr></h2></center>
{% else %}
<form action="#" method="post">{% csrf_token %}
<div class="row">
<div>
<input type="text" name="message-name">
</div>
<button type="submit">Display table</button>
</form>
{% endif %}

` You can use input type hidden if you do not want to display any field in the form. The idea is capture the variable from the POST (message-name) and rely on it in the view (message_name)

You may also use localstorage and toggle your display value . Javascript on client side cannot receive post datas , you may store a value on localstorage while submiting the form, once the page is relaoded, check that value stored, modify your display, then reset the value (like you did not submit anything yet again)

example (not sure it works on SO snippet, copy and try it in real)

window.onload = function () {
  let mydisplay = localStorage.getItem("myTable");
  console.log(mydisplay);
  if (mydisplay == "table-cell") {
    document.querySelector("#table").style.display = mydisplay;
    localStorage.setItem("myTable", "none");
  } else {
    document.querySelector("#table").style.display = "none";
  }
};
function hide() {
  document.getElementById("form").submit();
  console.log("submit");
  localStorage.setItem("myTable", "table-cell");
}

<form action="#" id="form" method="post">
  <div style="margin-left: 2rem;">
    <!-- <input class="btn btn-primary" type="submit" value="Submit" id="btn" onclick="hide()"> -->
    <input class="btn btn-primary" type="button" value="Submit" id="btn" onclick="hide()">
  </div>
</form>
<div style="margin-top: 4rem; display: flex; justify-content: center; align-content: center;">
  <table id="table">
    <tbody>
      <tr>
        <th scope="row">Profile No. : </th>
        <td>{{ProfileNo}}</td>
      </tr>
      <tr>
        <th scope="row">Name : </th>
        <td>{{Name}}</td>
      </tr>
    </tbody>
  </table>
</div>

here is a jsfidlle where you can copy/paste the code for a standalone HTML page for testing. https://jsfiddle.net/zb901rLm/