HTML-форма - <textarea>нарушает выравнивание в макете таблицы

Question

В HTML я делаю форму, где есть 2 таблицы рядом.В одной таблице все формы <label>/Name/E Mail/Password</label>, а в другой таблице я пытаюсь поместить форму <inputs> text / email / password, чтобы они выглядели хорошо видимыми.

Но когда я дал ярлык Message и <textarea name="Message" rows="1" cols="30"></text area> весь макет моей формы нарушается, из-за чего я не могу выровнять исходные метки и входные данные.

    <form class="" action="index.html" method="post">
  <table>
    <tr>
    <td>
      <table>
        <tr>
          <td>
          <label>Name</label>
          </td>
        </tr>
        <tr>
          <td>
            <label>Email</label>
          </td>
        </tr>
        <tr>
          <td>
            <label>Password</label>
          </td>
        </tr>
        <tr>
          <td>
            <label>Message</label>
          </td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>
            <input type="text" name="" value="">
          </td>
        </tr>
        <tr>
          <td>
            <input type="email" name="" value="">
          </td>
        </tr>
        <tr>
          <td>
            <input type="password" name="" value="">
          </td>
        </tr>
        <tr>
          <td>
          <textarea name="Message" rows="1" cols="30"></textarea>
          </td>
          </tr>
        </table>
    </td>
    </tr>
  </table>
  </form>

когда метки и входные данные выровнены Когдаметки и входы не совпадают

Answer 1

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

Вы не должны использовать таблицы для этого, не когда у вас есть такие вещи, как CSS Flexbox и CSS Grid . Вот базовый пример использования flexbox с формой.

Но если вам нужно использовать таблицу, попробуйте формат таблицы, как этот ...

<table>
    <tr>
        <td>label here</td>
        <td>form field here</td>
    </tr>
    <tr>
        <td>label here</td>
        <td>form field here</td>
    </tr>
    ...
</table>

Вот пример использования вашего кода.

    <form class="" action="index.html" method="post">
        <table>
            <tr>
                <td>
                    <label>Name</label>
                </td>
                <td>
                    <input type="text" name="" value="">
                </td>
            </tr>
            <tr>
                <td>
                    <label>Email</label>
                </td>
                <td>
                    <input type="email" name="" value="">
                </td>
            </tr>
            <tr>
                <td>
                    <label>Password</label>
                </td>
                <td>
                    <input type="password" name="" value="">
                </td>
            </tr>
            <tr>
                <td>
                    <label>Message</label>
                </td>
                <td>
                    <textarea name="Message" rows="1" cols="30"></textarea>
                </td>
            </tr>
        </table>
    </form>