将 HTML 表格行分成带标签的部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9318978/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Divide HTML table rows into labelled sections
提问by Yarin
Is there a valid way to divide a table's rows into sections, with a label identifying that section?
是否有一种有效的方法将表的行划分为多个部分，并带有标识该部分的标签？
For example, something like the code below, but with a header or caption at the start of each TBODY (Looks like header/captions are only allowed at the top of a table)
例如，类似于下面的代码，但在每个 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>
采纳答案by Niet the Dark Absol
My preferred way of doing something like that is to use a <TH>that spans (colspan) across a full row.
我做这种事情的首选方法是使用<TH>跨越colspan整行的( ) 。
回答by Martin
HTML5 specificationisn't saying there can be only one <TBODY>section. Your code is OK. One more example:
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>回答by hlongmore
In response to Alexander Suraphel's question on Martin's answer, yes, the OP wanted to have an identifying label. Here's one way to, combining some of the aspects of several answers, to do that. (Note that I have supplied my own labels, as the OP didn't specify what labels they would have used.)
针对 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>回答by Diodeus - James MacFarlane
Generally people use an extra row and use colspanto span across all the columns.
通常人们使用额外的行并用于colspan跨越所有列。
In your case: <tr><td colspan = "7">...</td></tr>
在你的情况下： <tr><td colspan = "7">...</td></tr>
回答by Syed
Use colspanand for some reason if you are not sure how many columns you need to merge/span (dynamically generated columns) then use:
使用colspan，由于某种原因，如果你不知道你有多少列需要合并/ SPAN（动态生成的列），然后使用：
<tr><td colspan = "100%">...</td></tr>
