CODEWITHSUNDEEP
javascripthtmlhtml-table
Gary Kukat
Gary Kukat

Reputation: 79

How to Create a Two Column Table with Several Input Boxes

I am attempting to create a form with a table that has two columns and eight rows. The first column will be the heading and the second column will be the input box. I have attempted it with the code below but it is not working correctly. I am clueless on how to have it look like the example listed below. Thank you for the help. Example of what table is supposed to look like

<body>
  <h1>Olympic Judging Calculator </h1>

  <form id=myForm>

    <table>
      <td>Country A Judge:
        <input id="judgeA" type="number" value=""></td>
      <td>Country B Judge:
        <input id="judgeB" type="number" value=""></td>
      <td>Country C Judge:
        <input id="judgeC" type="number" value=""></td>
      <td>Country D Judge:
        <input id="judgeD" type="number" value=""></td>
      <td>Country E Judge:
        <input id="judgeE" type="number" value=""></td>
      <td>Country F Judge:
        <input id="judgeF" type="number" value=""></td>
      <td>Country G Judge:
        <input id="judgeG" type="number" value=""></td>
      <td>Country H Judge:
        <input id="judgeH" type="number" value=""></td>
    </table>
  </form>
  <input type="button" value="Compute Score" onclick="computeScore()">
</body>

Upvotes: 0

Views: 487

Answers (2)

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8098

The CSS you need is provided below, The HTML code is already provided by Wang :)

table{
  margin-bottom:1rem;
}
table tr td{
  border:1px solid #000;
  padding: 0.5rem 2rem;
}
#myForm{
  background:lightgreen;
  padding:1rem;
}
input[type="button"]{
  display:block;
  margin-left:150px;;
}
<!DOCTYPE html>
<html>
<body>
  <h1>Olympic Judging Calculator </h1>

  <form id="myForm"  >

    <table cellpadding="0" cellspacing="0">
      <tr>
        <td>Country A Judge:</td>
        <td><input id="judgeA" type="number" value=""></td>
      </tr>
      <tr>
        <td>Country B Judge:</td>
        <td> <input id="judgeB" type="number" value=""></td>
      </tr>
      <tr>
        <td>Country C Judge:</td>
        <td><input id="judgeC" type="number" value=""></td>
      </tr>
      <tr>
        <td>Country D Judge:</td>
        <td> <input id="judgeD" type="number" value=""></td>
      </tr>
      <tr>
        <td>Country E Judge:</td>
        <td> <input id="judgeE" type="number" value=""></td>
      </tr>
      <tr>
        <td>Country F Judge:</td>
        <td> <input id="judgeF" type="number" value=""></td>
      </tr>
      <tr>
        <td>Country G Judge:</td>
        <td> <input id="judgeG" type="number" value=""></td>
      </tr>
      <tr>
        <td>Country H Judge:</td>
        <td> <input id="judgeH" type="number" value=""></td>
      </tr>
    </table>
    <input type="button" value="Compute Score" onclick="computeScore()">
  </form>
  
</body>
</html>

Upvotes: 1

wangdev87
wangdev87

Reputation: 8751

Use tr to indicate row, and td for each cell.

<body>
  <h1>Olympic Judging Calculator </h1>

  <form id=myForm>

    <table>
      <tr>
        <td>Country A Judge:</td>
        <td><input id="judgeA" type="number" value=""></td>
      </tr>
      <tr>
        <td>Country B Judge:</td>
        <td> <input id="judgeB" type="number" value=""></td>
      </tr>
      <tr>
        <td>Country C Judge:</td>
        <td><input id="judgeC" type="number" value=""></td>
      </tr>
      <tr>
        <td>Country D Judge:</td>
        <td> <input id="judgeD" type="number" value=""></td>
      </tr>
      <tr>
        <td>Country E Judge:</td>
        <td> <input id="judgeE" type="number" value=""></td>
      </tr>
      <tr>
        <td>Country F Judge:</td>
        <td> <input id="judgeF" type="number" value=""></td>
      </tr>
      <tr>
        <td>Country G Judge:</td>
        <td> <input id="judgeG" type="number" value=""></td>
      </tr>
      <tr>
        <td>Country H Judge:</td>
        <td> <input id="judgeH" type="number" value=""></td>
      </tr>
    </table>
  </form>
  <input type="button" value="Compute Score" onclick="computeScore()">
</body>

Upvotes: 0

Related Questions