<tr> 标签没有在 html 中创建新行答案

【问题标题】：<tr> tag not making new row in html<tr> 标签没有在 html 中创建新行
【发布时间】：2019-10-25 13:22:03
【问题描述】：

我正在制作一个虚拟表单页面，但我的标签不起作用，它将所有内容放在一行中。为什么会这样？此外，我的下拉菜单中的占位符似乎不起作用，我想在屏幕上出现生日部分时显示“日”“月”“年”的文字。提前致谢

<!DOCTYPE html>
<html>

<head>
  <title>Register</title>
</head>

<body>
  <h1>Register</h1>
  <form>
    <table>
      <tr>
        <label for="firstName"><b> First Name:	<input id="firstName" type="text" name="firstName" required></b></label>
        <label for="lastName"><b> Last Name:	<input id="lastname"type="text" name="lastName" required></b></label>
      </tr>
      <tr>
        <label for="male"><b>Male <input id="male" type="radio" name="gender"></b></label>
        <label for="female"><b>Female <input id="female" type="radio" name="gender"></b></label>
        <label for="other"><b>Other <input id="other" type="radio" name="gender"></b></label>
      </tr>
      <tr>
        <label for="email"><b> Email:	<input id="email" type="email" name="email" placeholder="email" required></b></label>
        <label for="password"><b> Password:	<input id="password"type="password" name="password" minlength="5" maxlength="10" placeholder="password" required></b></label>
      </tr>
      <tr>
        <label>Birthday:</label>
        <select name="day" placeholder="day">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
        </select>
        <select name="month" placeholder="month">
          <option>jan</option>
          <option>feb</option>
          <option>mar</option>
          <option>apr</option>
          <option>may</option>
          <option>jun</option>
          <option>jul</option>
          <option>aug</option>
        </select>
        <select name="year" placeholder="year">
          <option>1992</option>
          <option>1882</option>
          <option>1986</option>
          <option>2016</option>
          <option>2009</option>
          <option>1973</option>
          <option>1642</option>
          <option>1558</option>
        </select>
      </tr>
      <tr>
        Agree to this text
        <input type="checkbox" name="Agree" required>
      </tr>
      <tr>
        <button>Go</button>
      </tr>
    </table>
  </form>

</body>

</html>

【问题讨论】：

TABLE 的正确结构是 <table> <tr> <td></td> </tr> </table> 。你错过了td's
table row 需要 table data 字段。试着把你的标签放在td
w3schools.com/tags/tag_tr.asp
您还需要使用<td> 标签。您的 HTML 无效，因此您会得到奇怪的结果。话虽如此，不要使用表格进行布局。它非常过时了。
使用除表格以外的任何其他内容：jsfiddle.net/4w1ak9cL

标签： html forms html-table

【解决方案1】：

<table> 的 html 标记无效，每行中的 <td> 标记是强制性的。

<!DOCTYPE html>
<html>

<head>
  <title>Register</title>
</head>

<body>
  <h1>Register</h1>
  <form>
    <table>
      <tr>
        <td>
          <label for="firstName"><b> First Name:  <input id="firstName" type="text" name="firstName" required></b></label>
          <label for="lastName"><b> Last Name:    <input id="lastname"type="text" name="lastName" required></b></label>
        </td>
      </tr>
      <tr>
        <td>
          <label for="male"><b>Male <input id="male" type="radio" name="gender"></b></label>
          <label for="female"><b>Female <input id="female" type="radio" name="gender"></b></label>
          <label for="other"><b>Other <input id="other" type="radio" name="gender"></b></label>
        </td>
      </tr>
      <tr>
        <td>
          <label for="email"><b> Email:   <input id="email" type="email" name="email" placeholder="email" required></b></label>
          <label for="password"><b> Password: <input id="password"type="password" name="password" minlength="5" maxlength="10" placeholder="password" required></b></label>
        </td>
      </tr>
      <tr>
        <td>
          <label>Birthday:</label>
          <select name="day" placeholder="day">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
          </select>
          <select name="month" placeholder="month">
            <option>jan</option>
            <option>feb</option>
            <option>mar</option>
            <option>apr</option>
            <option>may</option>
            <option>jun</option>
            <option>jul</option>
            <option>aug</option>
          </select>
          <select name="year" placeholder="year">
            <option>1992</option>
            <option>1882</option>
            <option>1986</option>
            <option>2016</option>
            <option>2009</option>
            <option>1973</option>
            <option>1642</option>
            <option>1558</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          Agree to this text
          <input type="checkbox" name="Agree" required>
        </td>
      </tr>
      <tr>
        <td>
          <button>Go</button>
        </td>
      </tr>
    </table>
  </form>

</body>

</html>

【讨论】：