表格内表格或表格内表格，哪一个最适合有效的 Twitter Bootstrap 标记？

Question

我正在开发一个基于 Twitter Bootstrap 的模板，我有一个疑问，正如标题所说：表格内的表格或表格内的表格，哪一个最适合有效的 Twitter Bootstrap 标记？两者都有效吗？

第一个标记：

<form id="fabForm" method="post">
    <div class="form-group">
        <div class="table-responsive">
            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th></th>
                        <th>Col Title</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="fabLinkChoice[]" value="1">
                                </label>
                            </div>
                        </td>
                        <td>Dist1</td>                           
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div>
        <button type="submit" class="btn btn-primary" disabled="" id="btnAgregarSelFabricante"><i class="fa fa-save"></i> Add</button>
    </div>
</form>

第二个标记：

        <div class="table-responsive">
            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th></th>
                        <th>Col Title</th>
                    </tr>
                </thead>
                <tbody>
                     <form id="fabForm" method="post">
                         <div class="form-group">
                             <tr>
                                  <td>
                                      <div class="checkbox">
                                           <label>
                                               <input type="checkbox" name="fabLinkChoice[]" value="1">
                                           </label>
                                     </div>
                                 </td>
                                 <td>Dist1</td>                           
                             </tr>
                             <tr>
                                 <td colspan="2">
                                     <button type="submit" class="btn btn-primary" disabled="" id="btnAgregarSelFabricante"><i class="fa fa-save"></i> Add</button> 
                                 </td>
                             </tr>
                        </div>
                    </form>
               </tbody>
            </table>
        </div>
    </div>
<div>

注意：我的疑问源于此代码。在那里，您会注意到第一个示例的代码，它也位于 Bootstrap Modal 上，但我无法让它看起来很好。这是我在 Chrome 上看到的：

我不知道我的标记中是否遗漏了一些东西。我为什么使用表格是因为它是表格数据，我认为这是正确的还是我错了？

Answer 1

tbody

标签

的允许内容是零个或多个

tr

标签，因此您的第二个示例不是有效的HTML。

您可以将表单移动到表格单元格内，但更常见的是，您会在表单内看到表格，而不是反之亦然。

从您有限的示例中还可以看出，您可能正在使用表格进行布局，我建议您重新考虑这一点。

Answer 2

TL;DR：

<table>

内部

<form>

更常见

<form>
  <table>
    ...
  </table>
</form>