Question

最近我看到了一些像这样的代码：

<tr> 
     <th> Some label: </th>
     <td> <input type="text" value=""/> </td>
     <th> Another label: </th>
     <td> <input type="text" value=""/> </td>
</tr>

我习惯使用像

这样的表头

<tr> 
     <th> Some label: </th>
     <th> Another label: </th>
</tr>
<tr>
     <td> <input type="text" value=""/> </td>
     <td> <input type="text" value=""/> </td>
</tr>

如何使用表头？上面的第一个示例引出了一些非常时髦的格式问题，似乎应该使用示例1 <label>代替<th>。

Answer 1

它们都不正确。标头用于提供表的标头，而不是表单字段的布局机制。如你所述，我会使用<label>。表格应该用于表示表格数据。

我假设您复制了示例以显示<th>实际使用的方式，并且不打算将其用于布局目的。如果是这种情况，那么您的结构是正确的，并建议添加<thead>和<tbody>元素，如下所示：

<table>
   <thead>
      <tr>
         <th>Heading 1</th>
         <th>Heading 2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Row 1 Col 1 Data</td>
         <td>Row 1 Col 2 Data</td>
      </tr>
      <tr>
         <td>Row 2 Col 1 Data</td>
         <td>Row 2 Col 2 Data</td>
      </tr>
   </tbody>
</table>

这样做的一个优点是，如果您的页面在打印时跨越多个页面，则页眉将自动显示在每个页面上。

请注意，您可以使用<tfoot>元素。

Answer 2

你是对的，th元素should be in their own tr element。我同意第一个示例应该调用label元素。（好吧，两个示例都要求完全使用表以外的其他内容，但这不是问题的主要内容。）

Answer 3

在第一个示例中，标签和输入字段将位于同一行中。这不是<TH>应该如何使用的。在第二个示例中，您在输入字段上方的行中有标题。您当然需要添加<table>和</table>。

如何使用表头？

3 个答案: