将 HTML 表格行划分为带标签的部分

【问题标题】：Divide HTML table rows into labelled sections将 HTML 表格行划分为带标签的部分
【发布时间】：2012-03-08 07:19:56
【问题描述】：

是否有有效的方法将表格的行划分为多个部分，并带有标识该部分的标签？

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

【问题讨论】：

    标签： html html-table


    【解决方案1】：

    HTML5 specification 并不是说​​只能有一个&lt;TBODY&gt; 部分。你的代码没问题。再举一个例子：

    <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>

    【讨论】：

    • 这比当前标记为答案的答案更好——无论 是否跨越多列
    • ...不止一个&lt;tbody&gt; - 从来没有考虑过这个。谢谢。这绝对应该是标记的答案。
    • OP 说“带有标识该部分的标签”。我摆弄了你的代码，没有视觉迹象表明最后两行属于一起。我错过了什么吗？
    • @AlexanderSuraphel 您可以使用 CSS 设置 tbody 元素的样式，也可以在每个 tbody 的开头添加 th 元素并适当地设置样式。
    • 关于标签，可访问性呢？
    【解决方案2】：

    我首选的执行此类操作的方法是使用跨越整行 (colspan) 的 &lt;TH&gt;。

    【讨论】：

      【解决方案3】：

      在回答 Alexander Surapel 对 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>

      【讨论】：

        【解决方案4】：

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

        在你的情况下：&lt;tr&gt;&lt;td colspan = "7"&gt;...&lt;/td&gt;&lt;/tr&gt;

        【讨论】：

          【解决方案5】：

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

          <tr><td colspan = "100%">...</td></tr>

          【讨论】：

            【解决方案6】：

            我知道，这个问题很老了，但我仍然在寻找这个问题的答案。 WHATWG 有一个 great example 用于将 &lt;tbody&gt;s 与相应的 &lt;th&gt;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 scope="col">Weekday</TH>
        <TH scope="col">Date</TH>
        <TH scope="col">Manager</TH>
      </TR>
    </THEAD>
    
    <TBODY>
      <TR>
        <TH scope="rowgroup" 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" 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>

            希望这对某人有所帮助。

            【讨论】：

              猜你喜欢
              相关资源
              最近更新 更多
              热门标签
              Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode