<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
  <style>
    #tabid{
        background-color:black;
        border-spacing: 0px;
        table-layout: fixed;
        border: 2px solid purple;
        cursor:auto;
        width:100%;
    }

    #tabletitle {
        border: 2px solid purple;

        font-size:40px;
        color:skyblue;
        font-weight: bold;
        background-color:black;
    }
    .elemblockclear {
        display:block;
        border-bottom: none;
    }
    .atomicnum{
        display:block;
        font-size:xx-small;
        background-color:#000000;
    }
    .element{
        display:block;
        font-size:medium;
        background-color:#483D8B;
    }
    .atomweight {
        display:block;
        font-size:xx-small;
        background-color:#000000;
    }
    td {
        text-align:center;
        color:white;
        background-color:rgba(255,255,255,1);
        border: 1px solid white;
    }
    tr {
    }
    .coltb {
        background-color:black;
        border-bottom: 2px solid black;
        border-top: none;
    }
    #infowin {
        display:none;
        position:absolute;
        border: 2px solid blue;
        background-color:rgba(0,0,0,0.93);
        width:400px;
        height:400px;
        cursor: pointer;
        border-radius: 5px;
    }
    #winclose {
        font-size:20px;
        text-align:center;
        color:purple;
        display:block;
        float:right;
        width:30px;
        height:30px;
        border-bottom: 1px solid purple;;
    }
   
</style>
</head>
<body>

<div id="infowin"><div id="winclose">x</div>
</div>

<table id="tabid">
    <tr>
        <td><div class="atomicnum">1</div><div class="element">H</div><div class="atomweight">1.0079</div></td><td id="tabletitle" colspan="16">Periodic Table</td><td><div class="atomicnum">2</div><div class="element">He</div><div class="atomweight">4.00260</div></td>
    </tr>
    <tr>
        <td><div class="atomicnum">3</div><div class="element">Li</div><div class="atomweight">6.941</div></td><td><div class="atomicnum">4</div><div class="element">Be</div><div class="atomweight">9.01218</div></td><td class="coltb" colspan="10"></td><td><div class="atomicnum">5</div><div class="element">B</div><div class="atomweight">10.81</div></td><td><div class="atomicnum">6</div><div class="element">C</div><div class="atomweight">12.011</div></td><td><div class="atomicnum">7</div><div class="element">N</div><div class="atomweight">14.0067</div></td><td><div class="atomicnum">8</div><div class="element">O</div><div class="atomweight">15.9994</div></td><td><div class="atomicnum">9</div><div class="element">F</div><div class="atomweight">18.99840</div></td><td><div class="atomicnum">10</div><div class="element">Ne</div><div class="atomweight">20.1791</div></td>
    </tr>
    <tr>
        <td><div class="atomicnum">11</div><div class="element">Na</div><div class="atomweight">22.98977</div></td><td><div class="atomicnum">12</div><div class="element">Mg</div><div class="atomweight">24.305</div></td><td class="coltb" colspan="10"></td><td><div class="atomicnum">13</div><div class="element">Al</div><div class="atomweight">26.98154</div></td><td><div class="atomicnum">14</div><div class="element">Si</div><div class="atomweight">28.0855</div></td><td><div class="atomicnum">15</div><div class="element">P</div><div class="atomweight">30.97376</div></td><td><div class="atomicnum">16</div><div class="element">S</div><div class="atomweight">32.05</div></td><td><div class="atomicnum">17</div><div class="element">Cl</div><div class="atomweight">35.4532</div></td><td><div class="atomicnum">18</div><div class="element">Ar</div><div class="atomweight">39.948</div></td>
    </tr>
    <tr>
        <td><div class="atomicnum">19</div><div class="element">K</div><div class="atomweight">39.0983</div></td><td><div class="atomicnum">20</div><div class="element">Ca</div><div class="atomweight">40.08</div></td><td><div class="atomicnum">21</div><div class="element">Sc</div><div class="atomweight">44.9559</div></td><td><div class="atomicnum">22</div><div class="element">Ti</div><div class="atomweight">47.88</div></td><td ><div class="atomicnum">23</div><div class="element">V</div><div class="atomweight">50.9415</div></td><td><div class="atomicnum">24</div><div class="element">Cr</div><div class="atomweight">51.996</div></td><td><div class="atomicnum">25</div><div class="element">Mn</div><div class="atomweight">54.9380</div></td><td><div class="atomicnum">26</div><div class="element">Fe</div><div class="atomweight">55.847</div></td><td><div class="atomicnum">27</div><div class="element">Co</div><div class="atomweight">58.9332</div></td><td><div class="atomicnum">28</div><div class="element">Ni</div><div class="atomweight">58.69</div></td><td ><div class="atomicnum">29</div><div class="element">Cu</div><div class="atomweight">63.546</div></td><td><div class="atomicnum">30</div><div class="element">Zn</div><div class="atomweight">65.38</div></td><td><div class="atomicnum">31</div><div class="element">Ga</div><div class="atomweight">68.72</div></td><td><div class="atomicnum">32</div><div class="element">Ge</div><div class="atomweight">72.59</div></td><td><div class="atomicnum">33</div><div class="element">As</div><div class="atomweight">74.9216</div></td><td><div class="atomicnum">34</div><div class="element">Se</div><div class="atomweight">78.96</div></td><td><div class="atomicnum">35</div><div class="element">Br</div><div class="atomweight">79.904</div></td><td><div class="atomicnum">36</div><div class="element">Kr</div><div class="atomweight">83.80</div></td>
    </tr>
    <tr>
        <td><div class="atomicnum">37</div><div class="element">Rb</div><div class="atomweight">85.4678</div></td><td><div class="atomicnum">38</div><div class="element">Sr</div><div class="atomweight">87.62</div></td><td><div class="atomicnum">39</div><div class="element">Y</div><div class="atomweight">88.9059</div></td><td><div class="atomicnum">40</div><div class="element">Zr</div><div class="atomweight">91.22</div></td><td ><div class="atomicnum">41</div><div class="element">Nb</div><div class="atomweight">92.9064</div></td><td><div class="atomicnum">42</div><div class="element">Mo</div><div class="atomweight">95.94</div></td><td><div class="atomicnum">43</div><div class="element">Tc</div><div class="atomweight">98.9072</div></td><td><div class="atomicnum">44</div><div class="element">Ru</div><div class="atomweight">101.07</div></td><td><div class="atomicnum">45</div><div class="element">Rh</div><div class="atomweight">102.9055</div></td><td><div class="atomicnum">46</div><div class="element">Pd</div><div class="atomweight">106.42</div></td><td ><div class="atomicnum">47</div><div class="element">Ag</div><div class="atomweight">107.868</div></td><td><div class="atomicnum">48</div><div class="element">Cd</div><div class="atomweight">112.41</div></td><td><div class="atomicnum">49</div><div class="element">In</div><div class="atomweight">114.82</div></td><td><div class="atomicnum">50</div><div class="element">Sn</div><div class="atomweight">118.69</div></td><td><div class="atomicnum">51</div><div class="element">Sb</div><div class="atomweight">121.75</div></td><td><div class="atomicnum">52</div><div class="element">Te</div><div class="atomweight">127.60</div></td><td><div class="atomicnum">53</div><div class="element">I</div><div class="atomweight">126.9045</div></td><td><div class="atomicnum">54</div><div class="element">Xe</div><div class="atomweight">131.29</div></td>
    </tr>
    <tr>
        <td><div class="atomicnum">55</div><div class="element">Cs</div><div class="atomweight">132.9054</div></td><td><div class="atomicnum">56</div><div class="element">Ba</div><div class="atomweight">137.34</div></td><td><div class="atomicnum">57*</div><div class="element">La</div><div class="atomweight">138.9055</div></td><td><div class="atomicnum">72</div><div class="element">Hf</div><div class="atomweight">178.49</div></td><td ><div class="atomicnum">73</div><div class="element">Ta</div><div class="atomweight">180.9479</div></td><td><div class="atomicnum">74</div><div class="element">W</div><div class="atomweight">183.85</div></td><td><div class="atomicnum">75</div><div class="element">Re</div><div class="atomweight">186.207</div></td><td><div class="atomicnum">76</div><div class="element">Os</div><div class="atomweight">190.2</div></td><td><div class="atomicnum">77</div><div class="element">Ir</div><div class="atomweight">192.22</div></td><td><div class="atomicnum">78</div><div class="element">Pt</div><div class="atomweight">195.08</div></td><td ><div class="atomicnum">79</div><div class="element">Au</div><div class="atomweight">196.9665</div></td><td><div class="atomicnum">80</div><div class="element">Hg</div><div class="atomweight">200.59</div></td><td><div class="atomicnum">81</div><div class="element">Tl</div><div class="atomweight">204.383</div></td><td><div class="atomicnum">82</div><div class="element">Pb</div><div class="atomweight">207.2</div></td><td><div class="atomicnum">83</div><div class="element">Bi</div><div class="atomweight">208.9804</div></td><td><div class="atomicnum">84</div><div class="element">Po</div><div class="atomweight">209</div></td><td><div class="atomicnum">85</div><div class="element">At</div><div class="atomweight">210</div></td><td><div class="atomicnum">86</div><div class="element">Rn</div><div class="atomweight">222</div></td>
    </tr>
    <tr>
        <td><div class="atomicnum">87</div><div class="element">Fr</div><div class="atomweight">223</div></td><td><div class="atomicnum">88</div><div class="element">Ra</div><div class="atomweight">226.0254</div></td><td><div class="atomicnum">89**</div><div class="element">Ac</div><div class="atomweight">227.0278</div></td><td><div class="atomicnum">104</div><div class="element">Rf</div><div class="atomweight">261</div></td><td ><div class="atomicnum">105</div><div class="element">Ha</div><div class="atomweight">262</div></td><td><div class="atomicnum">106</div><div class="element">Sg</div><div class="atomweight">263</div></td><td><div class="atomicnum">107</div><div class="element">Ns</div><div class="atomweight">262</div></td><td><div class="atomicnum">108</div><div class="element">Hs</div><div class="atomweight">265</div></td><td><div class="atomicnum">109</div><div class="element">Mt</div><div class="atomweight">266</div></td><td><div class="atomicnum">110</div><div class="element">Ds</div><div class="atomweight">281</div></td><td ><div class="atomicnum">111</div><div class="element">Rg</div><div class="atomweight">280</div></td><td><div class="atomicnum">112</div><div class="element">Cn</div><div class="atomweight">285</div></td><td><div class="atomicnum">113</div><div class="element">Uut</div><div class="atomweight">286</div></td><td><div class="atomicnum">114</div><div class="element">Fl</div><div class="atomweight">289</div></td><td><div class="atomicnum">115</div><div class="element">Uup</div><div class="atomweight">289</div></td><td><div class="atomicnum">116</div><div class="element">Lv</div><div class="atomweight">293</div></td><td><div class="atomicnum">117</div><div class="element">Uus</div><div class="atomweight">294</div></td><td><div class="atomicnum">118</div><div class="element">Uuo</div><div class="atomweight">294</div></td>
    </tr>
</table>

<script>
   $( function() {
     $( "#infowin" ).draggable();
   } );

    $( "#tabletitle" ).click(function() {
     $( "#infowin" ).show();
});
    $("#winclose").click(function() {
     $( "#infowin" ).hide();
});
    
</script>
</body>
</html>

Collaborative Calculation and Data Science

colby

sagemath

cornellcollege

facebook