Блог

Главная - Вопросы по программированию - Как создать таблицу из двух столбцов с несколькими полями ввода

Как создать таблицу из двух столбцов с несколькими полями ввода

#javascript #html #html-table

#javascript #HTML #html-таблица

Вопрос:

Я пытаюсь создать форму с таблицей, состоящей из двух столбцов и восьми строк. Первый столбец будет заголовком, а второй столбец будет полем ввода. Я попытался сделать это с помощью приведенного ниже кода, но он работает некорректно. Я понятия не имею, как сделать так, чтобы она выглядела как приведенный ниже пример. Спасибо за помощь. Пример того, как должна выглядеть таблица

 <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>

Ответ №1:

Необходимый вам CSS приведен ниже, HTML-код уже предоставлен 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>

Ответ №2:

Используйте tr для указания строки и td для каждой ячейки.

 <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>

Комментарии:

1. Ну ладно, тогда это имеет смысл. Затем я добавляю соответствующий CSS, чтобы добавить дополнительные функции, правильно?

2. это правильно. вы можете добавить css к тегам или к любому конкретному тегу, который вы хотите

Метки: