Large Space between footer and bottom of page

I am almost finished with this page, but beneath my button image in the footer, there is this nasty space I can't get rid of. Any help?

Code is below.

/*=========================>Jacob Dixon
/*=========================>MW 1230
/*=========================>4/16/2013
*/

header, footer, nav, section, article, aside {
        display: block;
}
p { text-align: center
}
h1 {text-align: center;  
color: #4876b9
}
p.subheader{text-align: center; 
text-shadow: black 0.02em 0.02em 0.02em;
width: 500px;
margin-left: 700px
}
body{
background-color: #b5c8e3;
height: 100%
}

table{
margin-bottom: 2500px;
width: 25%;
margin: auto;
margin-top: 100px;
height: 90%
}
td{
height: 70px;
padding: 10px;
overflow: hidden;
}
footer{
display:block;
margin:0 auto;
overflow: hidden;
clear:both;
}
/* -------------------------------------------------------*/

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>A List of All Our Artists</title>
          <meta charset="UTF-8"  />
  <link href="../styleSheets/allArtists.css"  rel="stylesheet"  type="text/css"  />
  <script>
    document.createElement("header");
    document.createElement("footer");
    document.createElement("nav");
    document.createElement("aside");
    document.createElement("section");
    document.createElement("article");
  </script>
  </head>
    <body>
    <h1>Meet Our Artists</h1>
    <hr/>
    <p class = "subheader">This Web page contains a complete list of all of our 
artists, arranged in alphabetical order; To obtain a detailed page of 
information for any given artist you can click on the artist's name; New 
artists join our family of artists from time to time, so you  should 
return to visit the site often.</p>


    <table border = "1">

    <tr><td rowspan = "1" colspan = ""><img src = "../images/johnsmall.jpg"></td><td rowspan = "1" colspan = "1"><a href = "artistDixon.html" target = "wat">John Egbert</a></td><td>Metal Working - Egypt</td></tr>

    <tr><td rowspan = "1" colspan = ""><img src = "../images/jakesmall.png"></td><td rowspan = "1" colspan = "1"><a href = "artistDixon.html" target = "wat">Jacob Dixon</a></td><td>Stone Carving - Egypt</td></tr>

    <tr><td rowspan = "1" colspan = ""><img src = "../images/jadesmall.png"></td><td rowspan = "1" colspan = "1"><a href = "artistDixon.html" target = "wat">Jade Harley</a></td><td>Woodworking - Egypt</td></tr>

    <tr><td rowspan = "1" colspan = ""><img src = "../images/davesmall.png"></td><td rowspan = "1" colspan = "1"><a href = "artistDixon.html" target = "wat">John Egbert</a></td><td>Fabrics - Egypt</td></tr>

</table>    
</body>

    <footer>
    <p><a href = "index.html"><img src = "../images/hmbtn.png" class = "button"></a></p>
    </footer>

</html>

I know I'm missing something obvious, but I can't figure out what!

Solution

Im not 100% sure what your trying to do but on the assumption that your wanting the footer to appear at bottom of screen at all times. if so then you should look at sticky footer options like shown here