HTML/Javascript popup box with table

Question 1

There's a range of frameworks that'll do the trick for you.

An easy and common one is jQuery Dialog (http://jqueryui.com/dialog/)

A small example, given the html:

<div id="dialog-modal" title="Basic modal dialog" style="display:none">
  <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

<a href="#" id="openDialog">Click me</a>

Assuming you've included jQuery and jQuery dialog on top, add the following javascript:

<script>
$(function() {
   $( "#openDialog").on("click", function(){ 
       $( "#dialog-modal" ).dialog({
          height: 140,
          modal: true
        });
       $( "#dialog-modal" ).show();
    });
 });
</script>

Question 2

simply use JQuery

See Demo Here

HTML :

<!DOCTYPE html>
<html lang="fa">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <script type="text/javascript">
    $(document).ready(function() {
        $("#help_button").click(function() {
            $("#help").slideToggle(1000, function() {
                if($("#help_button").val() == "close")
                {
                    $("#help_button").val("show table");
                }
                else
                {
                    $("#help_button").val("close");
                }
            });
        });
    });
    </script>
</head>

<body>

<div id="help">table populated with information </div>
<input id="help_button" type="button" value="Show Popup"/>

</body>
</html>

CSS :

#help{
    display:none;
}

Question 3

you can create a pop up like this .. plunker link and pass the table values inside it. .

Question 4

Another way is to use Bootstrap 3 with this plugin (plugin-examples) (there you can find a bunch of similar plugin, take a look and choose one )

It is good way to build Your website based on some framework (bootstrap) :)