calculator

by Bob

HTML

<main>
  <section>

    <table>

      <tr>
        <td class='noborder' colspan='1'>&nbsp</td>
        <td id='top' colspan='16' rowspan='2'>123,456,789,012,345.1236</td>
        <td class='noborder' colspan='1'>&nbsp</td>
      </tr>
      <tr>
        <td class='noborder' colspan='1'>&nbsp</td>
        <td class='noborder' colspan='1'>&nbsp</td>

      </tr>

      <tr>
        <td class='noborder' colspan='1' rowspan='2'> </td>
        <td id='1' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>1</td>
        <td id='2' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>2</td>
        <td id='3' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>3</td>
        <td id='plus' class='buttons' colspan='4' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>+</td>
        <td class='noborder' colspan='1' rowspan='2'> </td>
      </tr>
      <tr>
        <td id='minus' class='buttons' colspan='4' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>-</td>
      </tr>


      <tr>
        <td class='noborder' colspan='1' rowspan='2'> </td>
        <td id='4' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>4</td>
        <td id='5' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>5</td>
        <td id='6' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>6</td>
        <td id='divide' class='buttons' colspan='4' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>/</td>
        <td class='noborder' colspan='1' rowspan='2  '> </td>
      </tr>
      <tr>
        <td id='mult' class='buttons' colspan='4' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>*</td>
      </tr>


      <tr>
        <td...

CSS

table  {
    border: 1px solid black;
   
}

table{
    margin:10% auto;
    width:25%;
}

#top{
    text-align:right;
}

.buttons{
    text-align:center;
}

td{
    width:20px;
}

.noborder{
    border: none;
}

.buttons, #top{
    border: 1px solid black;
    }