使用 html 在表格内创建表单答案

【问题标题】：Create a Form inside a table using html使用 html 在表格内创建表单
【发布时间】：2018-08-16 00:09:05
【问题描述】：

我需要为保险使用表创建一个表格。我需要在正确的位置。需要一些风格。应该看起来很漂亮.. :) 所以请帮忙。有什么工具或者其他方法可以制作吗？

我当前的代码是 -

<html>
<body>
  <center>
<table>
  <tr id="idrow1"><td> First Name : <input type="text" name="firstname"> </td></tr>
  <tr id="idrow2"><td> Last Name : <input type="text" name="lastname">  </td></tr>
  <tr id="idrow3"><td> Age       : <input type="text" name="age"> </td></tr>
  <tr id="idrow3"><td> Email      : <input type="email" name="email"> </td></tr>
  :
  :
  :

</table>
</center>
</body>
</html>

【问题讨论】：

谷歌你会找到的。但是尝试寻找 CSS 表单设计。上面的 HTML 是旧的，已被弃用。
需要表格..
是的，如果您愿意，您可以将表格放在表格中，这仍然不会影响我上面的回答。

标签： html forms html-table using

【解决方案1】：

尝试使用Bootstrap tables 和Bootstrap horizontal forms，它们会给你一些漂亮而简单的风格。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table form-horizontal">
  <tr>
    <td class="form-group">
      <label for="inputEmail3" class="col-xs-4 control-label">First Name</label>
      <div class="col-xs-8">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </td>
  </tr>
  <tr>
    <td class="form-group">
      <label for="inputEmail4" class="col-xs-4 control-label">Last Name</label>
      <div class="col-xs-8">
        <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
      </div>
    </td>
  </tr>
</table>

如果你愿意/可以的话，无论如何你都可以使用没有表格的表格。

【讨论】：

【解决方案2】：

检查并在您的 html 文档中导入 css 文件以获取样式

<html>
<body>
<center>
<table>
<br>
<tr id="idrow1"><td> First Name : </td><td><input type="text" name="firstname"> </td></tr>
<tr id="idrow2"><td> Last Name  : </td><td><input type="text" name="lastname">  </td></tr>
<tr id="idrow3"><td> Age        : </td><td><input type="text" name="age">       </td></tr>
<tr id="idrow4"><td> Email      : </td><td><input type="email" name="email">    </td></tr>
</table>
</center>
</body>
</html>

【讨论】：