CODEWITHSUNDEEP
htmlhtml-table
TMA
TMA

Reputation: 111

HTML table column alignment issue

I've been trying to sketch an HTML file for a calculator. But seems there's a huge gap between the buttons on the left and right. How do I align these buttons? Following is the HTML code. Help is much appreciated`

<table border=1>
  <tr>
    <td>
      <input type="text" id="calcText" maxlength="30" name="calcDisplay">
    </td>
  </tr>

  <tr>
    <td><input type="button" id="bt0" value="0"></td>
    <td><input type="button" id="bt1" value="1"></td>
    <td><input type="button" id="bt2" value="2"></td>
    <td><input type="button" id="btX" value="X"></td>
  </tr>

  <tr>
    <td><input type="button" id="bt3" value="3"></td>
    <td><input type="button" id="bt4" value="4"></td>
    <td><input type="button" id="bt5" value="5"></td>
    <td><input type="button" id="bt-" value="-"></td>
  </tr>

  <tr>
    <td><input type="button" id="bt6" value="6"></td>
    <td><input type="button" id="bt7" value="7"></td>
    <td><input type="button" id="bt8" value="8"></td>
    <td><input type="button" id="bt+" value="+"></td>
  </tr>

  <tr>
    <td><input type="button" id="bt9" value="9"></td>
    <td><input type="button" id="bt/" value="/"></td>
    <td><input type="button" id="bt." value="."></td>
    <td><input type="button" id="bt=" value="="></td>
  </tr>
</table>

I have attached a screenshot to show how it's displayed at the momententer image description here

Upvotes: 0

Views: 70

Answers (1)

abraham63
abraham63

Reputation: 443

Use colspan html propertie on your calcDisplay line to make it 4 columns width. Else the first column take the width of his largest element : in your case the input. With colspan="4" you extend the length of the column to take 4 colmuns 

    <html>
<table border=1>
  <tr>   
    <td colspan="4">
      <input type="text" id="calcText" maxlength="30" name="calcDisplay">
    </td>
  </tr>   

  <tr>
      <td><input type="button" id="bt0" value="0"></td>
      <td><input type="button" id="bt1" value="1"></td>
      <td><input type="button" id="bt2" value="2"></td>
      <td><input type="button" id="btX" value="X"></td>
  </tr>

  <tr>
      <td><input type="button" id="bt3" value="3"></td>
      <td><input type="button" id="bt4" value="4"></td>
      <td><input type="button" id="bt5" value="5"></td>
      <td><input type="button" id="bt-" value="-"></td>
  </tr>

   <tr>
    <td><input type="button" id="bt6" value="6"></td>
        <td><input type="button" id="bt7" value="7"></td>
        <td><input type="button" id="bt8" value="8"></td>
    <td><input type="button" id="bt+" value="+"></td>
    </tr>

    <tr>
         <td><input type="button" id="bt9" value="9"></td>
         <td><input type="button" id="bt/" value="/"></td>
         <td><input type="button" id="bt." value="."></td>
     <td><input type="button" id="bt=" value="="></td>
    </tr>
</table>
</html>

Upvotes: 4

Related Questions