Untitled

<!DOCTYPE html>
<html>
  <head>
    <title> MiTunes</title>

<script type='text/javascript'>
 function w(){
  document.getElementById("letter").value=document.keyboard.letter.value;
}
  }
</script>


    <style type="text/css">
      body {
        font-size: 10px;
        font-family: Arial;
        background-color: #3399ff;
        color: #ffffff;
      }

    .Table
    {
        display: table;
        width: 100%
    }
    .Title
    {
        display: table-caption;
        text-align: center;
        font-weight: bold;
        font-size: larger;
    }
    .Columns
    {
        float: center;
        display: table-cell;
        font-weight: bold;
        text-align: center;
    }
    .Row
    {
        display: table-row;
        width:100%;
        clear:both;

    }
    .Cell
    {
        display: table-cell;
        border: 1px solid;
        border-color: #000
        border-width: thin;
        width: 450px;
        background-color:#66ccff;
        height: 200px
    }

    .Cell2
      {
        float:center;
        display:table-cell;
        border: 1px solid;
        border-color: #000
        border-width: thin;
        width: auto;
        background-color:#66ccff;
        height: 200px;
        text-align: center;
      }

      .keyboard
      {
        border: 1px solid white;
        border-radius: 5px;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        padding: 15px;
      }


    </style>
  </head>

  <body>
    <div class="Table">
      <div class="Title">
        <h1> Emma Rowan MiTunes </h1>
      </div>

    <div class="Columns">
    	<div id="left" class="Cell">
          <p>Column 1</p>
      </div>
    	<div id="middle" class="Cell">
          <p>Column 2</p>
      </div>
    	<div id="right" class="Cell">
          <p>Column 3</p>
      </div>
    </div>

    <div class="Row">
      <div class="Cell2">
        <p> skdkd </p>
      </div>
   </div>
</div>

<form name="keyboard" class="keyboard">
  <input type="text" name="letter" id="letter">
	<table border='0'>
    <tr>
        <td value="Q" onclick='w("Q");' class='keyboard'>Q</td>
        <td value="W" onclick='w("W");' class='keyboard'>W</td>
      	<td value="E" onclick='w("E");' class='keyboard'>E</td>
        <td value="R" onclick='w("R");' class='keyboard'>R</td>
      	<td value="T" onclick='w("T");' class='keyboard'>T</td>
        <td value="Y" onclick='w("Y");' class='keyboard'>Y</td>
      	<td value="U" onclick='w("U");' class='keyboard'>U</td>
        <td value="I" onclick='w("I");' class='keyboard'>I</td>
      	<td value="O" onclick='w("O");' class='keyboard'>O</td>
        <td value="P" onclick='w("P");' class='keyboard'>P</td>
    </tr>
    <tr>
        <td value="A" onclick='w("A");' class='keyboard'>A</td>
        <td value="S" onclick='w("S");' class='keyboard'>S</td>
      	<td value="D" onclick='w("D");' class='keyboard'>D</td>
        <td value="F" onclick='w("F");' class='keyboard'>F</td>
      	<td value="G" onclick='w("G");' class='keyboard'>G</td>
        <td value="H" onclick='w("H");' class='keyboard'>H</td>
      	<td value="J" onclick='w("J");' class='keyboard'>J</td>
        <td value="K" onclick='w("K");' class='keyboard'>K</td>
      	<td value="L" onclick='w("L");' class='keyboard'>L</td>
    </tr>
  	<tr>
        <td value="Z" onclick='w("Z");' class='keyboard'>Z</td>
        <td value="X" onclick='w("X");' class='keyboard'>X</td>
      	<td value="C" onclick='w("C");' class='keyboard'>C</td>
        <td value="V" onclick='w("V");' class='keyboard'>V</td>
      	<td value="B" onclick='w("B");' class='keyboard'>B</td>
        <td value="N" onclick='w("N");' class='keyboard'>N</td>
      	<td value="M" onclick='w("M");' class='keyboard'>M</td>

    </tr>
	</table>
</form>
</body>
</html>