logo标签列表

将HTML表格行分成带标签的部分。

htmlhtml-table
37

是否有一种有效的方法可以将表格的行分成多个部分，并用标签标识每个部分？

例如，类似下面的代码，但是每个TBODY开头都有一个标题或说明（似乎只允许在表格顶部使用标题/说明）。

<THEAD>
<TR> <TH>Weekday</TH> <TH>Date</TH>  <TH>Manager</TH> </TR>
</THEAD>

<TBODY>
<TR> <TD>Monday</TD>    <TD>09/11/2000</TD> <TD>Kelsey</TD>  </TR>
<TR> <TD>Tuesday</TD>   <TD>09/12/2000</TD> <TD>Lindsey</TD> </TR>
<TR> <TD>Wednesday</TD> <TD>09/13/2000</TD> <TD>Randy</TD>   </TR>
<TR> <TD>Thursday</TD>  <TD>09/14/2000</TD> <TD>Susan</TD>   </TR>
<TR> <TD>Friday</TD>    <TD>09/15/2000</TD> <TD>Randy</TD>   </TR>
<TR> <TD>Saturday</TD>  <TD>09/16/2000</TD> <TD>Lindsey</TD> </TR>
<TR> <TD>Sunday</TD>    <TD>09/17/2000</TD> <TD>Susan</TD>   </TR>
</TBODY>

<TBODY>
<TR> <TD>Monday</TD>    <TD>09/18/2000</TD> <TD>Melody</TD>     </TR>
<TR> <TD>Tuesday</TD>   <TD>09/19/2000</TD> <TD>Christiane</TD> </TR>
<TR> <TD>Wednesday</TD> <TD>09/20/2000</TD> <TD>Symphony</TD>   </TR>
<TR> <TD>Thursday</TD>  <TD>09/21/2000</TD> <TD>Starflower</TD> </TR>
<TR> <TD>Friday</TD>    <TD>09/22/2000</TD> <TD>Miko</TD>       </TR>
<TR> <TD>Saturday</TD>  <TD>09/23/2000</TD> <TD>Cleo</TD>       </TR>
<TR> <TD>Sunday</TD>    <TD>09/24/2000</TD> <TD>Alyx</TD>       </TR>
</TBODY>

<TBODY>
<TR> <TD>Monday</TD>    <TD>09/25/2000</TD> <TD>Dancing Star</TD> </TR>
<TR> <TD>Tuesday</TD>   <TD>09/26/2000</TD> <TD>Dawn</TD>         </TR>
<TR> <TD>Wednesday</TD> <TD>09/27/2000</TD> <TD>Josh</TD>         </TR>
<TR> <TD>Thursday</TD>  <TD>09/28/2000</TD> <TD>Ryan</TD>         </TR>
<TR> <TD>Friday</TD>    <TD>09/29/2000</TD> <TD>Mary Kay</TD>     </TR>
<TR> <TD>Saturday</TD>  <TD>09/30/2000</TD> <TD>Hallie</TD>       </TR>
<TR> <TD>Sunday</TD>    <TD>10/01/2000</TD> <TD>Paul</TD>         </TR>
</TBODY>

</TABLE>
6个回答
93

HTML5规范没有说只能有一个<TBODY>段落。你的代码是正确的。还有一个例子：

<table>
 <thead>
  <tr>
   <th>Fruits</th>
   <th>Vitamin A</th>
   <th>Vitamin C</th>
  </tr>
     </thead>  
 <tbody id="section1">
  <tr>
   <th>Apples</th>
   <td>98 ui</td>
   <td>8.4 mg</td>
  </tr>
 </tbody>
 <tbody id="section2">
  <tr>
   <th>Oranges</th>
   <td>295 ui</td>
   <td>69.7 mg</td>
  </tr>
  <tr>
   <th>Bananas</th>
   <td>76 ui</td>
   <td>10.3 mg</td>
  </tr>
 </tbody>
</table>

4
这个答案比当前标记为答案的那个更好 -- 无论<th>是否跨越多列。 - Christopher King
有多个<tbody>- 从未考虑过。谢谢。这绝对应该是标记的答案。 - cheshireoctopus
4
OP说：“使用标签来识别那个部分。”我调整了你的代码，但是最后两行没有明显的视觉指示它们属于同一部分。我是否漏掉了什么？ - Alexander Suraphel
1
@AlexanderSuraphel 您可以使用CSS样式化您的tbody元素，或者在每个tbody的开头添加一个th元素并适当地进行样式设置。 - Joshua Pinter
关于标签，可访问性方面怎么处理？ - Arjun
10
作为对Martin回答中Alexander Suraphel提出的问题的回应，是的，原帖作者想要一个标识标签。以下是一种方式，结合了几个回答的某些方面来实现这一点。（请注意，我提供了自己的标签，因为原帖作者没有指定他们将使用什么标签。） 

td {
  border-left: 0;
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
}

table {
  border: none;
  border-collapse: collapse;
}

.grouplabel {
  background: blue;
  color: yellow;
  border: 1px solid blue;
  border-radius: 5px;
}
<table>
        <thead>
                <tr>
                        <th>Fruits</th>
                        <th>Vitamin A</th>
                        <th>Vitamin C</th>
                </tr>
        </thead>

        <tbody id="section1">
          <tr class="grouplabel"><th colspan="3">Local</th></tr>
                <tr>
                        <th>Apples</th>
                        <td>98 ui</td>
                        <td>8.4 mg</td>
                </tr>
        </tbody>

        <tbody id="section2">
          <tr class="grouplabel"><th colspan="3">Imported</th></tr>
                <tr>
                        <th>Oranges</th>
                        <td>295 ui</td>
                        <td>69.7 mg</td>
                </tr>
                <tr>
                        <th>Bananas</th>
                        <td>76 ui</td>
                        <td>10.3 mg</td>
                </tr>
        </tbody>
</table>

10

我偏爱使用跨越整行的 <TH>（使用 colspan 属性）来实现这种效果。

6

我知道，这个问题已经很久了，但我仍在寻找答案。WHATWG有一个非常好的例子，演示了如何使用多个<tbody>和相应的<th>元素。

对于这个问题，我会选择：

table {
  min-width: 20rem;
  border-collaps: separate;
}

th {
  text-align: left;
}

tbody th {
  border-bottom: 1px solid;
  padding-top: .625rem;
}
  <TABLE>
    <THEAD>
      <TR>
        <TH id="weekday" scope="col">Weekday</TH>
        <TH scope="col">Date</TH>
        <TH scope="col">Manager</TH>
      </TR>
    </THEAD>
    
    <TBODY>
      <TR>
        <TH scope="rowgroup"  headers="weekday" colspan="3">Week 1</TH>
      </TR>
      <TR> <TD>Monday</TD>    <TD>09/11/2000</TD> <TD>Kelsey</TD>  </TR>
      <TR> <TD>Tuesday</TD>   <TD>09/12/2000</TD> <TD>Lindsey</TD> </TR>
      <TR> <TD>Wednesday</TD> <TD>09/13/2000</TD> <TD>Randy</TD>   </TR>
      <TR> <TD>Thursday</TD>  <TD>09/14/2000</TD> <TD>Susan</TD>   </TR>
      <TR> <TD>Friday</TD>    <TD>09/15/2000</TD> <TD>Randy</TD>   </TR>
      <TR> <TD>Saturday</TD>  <TD>09/16/2000</TD> <TD>Lindsey</TD> </TR>
      <TR> <TD>Sunday</TD>    <TD>09/17/2000</TD> <TD>Susan</TD>   </TR>
    </TBODY>

    <TBODY>
      <TR>
        <TH scope="rowgroup"  headers="weekday" colspan="3">Week 2</TH>
      </TR>
      <TR> <TD>Monday</TD>    <TD>09/25/2000</TD> <TD>Dancing Star</TD> </TR>
      <TR> <TD>Tuesday</TD>   <TD>09/26/2000</TD> <TD>Dawn</TD>         </TR>
      <TR> <TD>Wednesday</TD> <TD>09/27/2000</TD> <TD>Josh</TD>         </TR>
      <TR> <TD>Thursday</TD>  <TD>09/28/2000</TD> <TD>Ryan</TD>         </TR>
      <TR> <TD>Friday</TD>    <TD>09/29/2000</TD> <TD>Mary Kay</TD>     </TR>
      <TR> <TD>Saturday</TD>  <TD>09/30/2000</TD> <TD>Hallie</TD>       </TR>
      <TR> <TD>Sunday</TD>    <TD>10/01/2000</TD> <TD>Paul</TD>         </TR>  
    </TBODY>
  </TABLE>

希望对某些人有所帮助。

2
FYI：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th#attr-scope - Daniel De León
谢谢。这应该是新的被接受的答案。 - tvanc
3

使用 colspan，如果您不确定需要合并/跨越多少列（动态生成的列），则使用以下方法：

<tr><td colspan = "100%">...</td></tr>
关于 colspan="100%" 的小提示：这不再是有效的（吗？）。colspan 的值必须是介于1和1000之间的正自然数。请参见：HTML规范。 - Mue
2

通常人们会使用额外的行，并使用 colspan 跨越所有列。

在你的情况下: <tr><td colspan = "7">...</td></tr>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接