将HTML表格行划分为标记的部分

Question

有没有一种有效的方法将表的行划分为多个部分,标签标识该部分？

例如,类似下面的代码,但在每个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>

Answer 1

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>

Answer 2

在回答 Alexander Suraphel 对 Martin 的回答提出的问题时，是的，OP 希望有一个识别标签。这是一种方法，结合几个答案的某些方面来做到这一点。（请注意，我提供了自己的标签，因为 OP 没有指定他们将使用哪些标签。）

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>

Answer 3

我知道，这个问题已经很老了，但我仍然在寻找这个问题的答案。WHATWG 有一个很好的例子，说明如何使用乘法<tbody>和相应的<th>s。

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

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>

希望这对某人有帮助。

Answer 4

我喜欢这样做的首选方法是在整行中使用<TH>跨度(colspan).