我们可以在同一个<表>中有多个<tbody>标签吗?如果是,那么在什么情况下我们应该使用多个<tbody>标签?
当前回答
Martin Joiner的问题是由对<caption>标签的误解引起的。
<caption>标记定义了一个表标题。
<caption>标签必须是<table>标签的第一个子标签。
每个表只能指定一个标题。
另外,注意scope属性应该放在<th>元素上,而不是<tr>元素上。
写一个多头多体表的正确方法应该是这样的:
<table id="dinner_table"> <caption>This is the only correct place to put a caption.</caption> <tbody> <tr class="header"> <th colspan="2" scope="col">First Half of Table (British Dinner)</th> </tr> <tr> <th scope="row">1</th> <td>Fish</td> </tr> <tr> <th scope="row">2</th> <td>Chips</td> </tr> <tr> <th scope="row">3</th> <td>Peas</td> </tr> <tr> <th scope="row">4</th> <td>Gravy</td> </tr> </tbody> <tbody> <tr class="header"> <th colspan="2" scope="col">Second Half of Table (Italian Dinner)</th> </tr> <tr> <th scope="row">5</th> <td>Pizza</td> </tr> <tr> <th scope="row">6</th> <td>Salad</td> </tr> <tr> <th scope="row">7</th> <td>Oil</td> </tr> <tr> <th scope="row">8</th> <td>Bread</td> </tr> </tbody> </table>
其他回答
根据规范中的这个例子,可以这样做:w3-struct-tables。
表行可以分别使用THEAD、TFOOT和TBODY元素被分组为表头、表脚和一个或多个表体部分。
是的。来自DTD
<!ELEMENT table
(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
所以它需要一个或多个。它接着说
规则时使用多个tbody节 组与组之间是否需要表 行。
是的,你可以使用它们,例如,我用它们更容易地设置数据组的样式,像这样:
thead th { width: 100px; border-bottom: solid 1px #ddd; font-weight: bold; } tbody:nth-child(odd) { background: #f5f5f5; border: solid 1px #ddd; } tbody:nth-child(even) { background: #e5e5e5; border: solid 1px #ddd; } <table> <thead> <tr><th>Customer</th><th>Order</th><th>Month</th></tr> </thead> <tbody> <tr><td>Customer 1</td><td>#1</td><td>January</td></tr> <tr><td>Customer 1</td><td>#2</td><td>April</td></tr> <tr><td>Customer 1</td><td>#3</td><td>March</td></tr> </tbody> <tbody> <tr><td>Customer 2</td><td>#1</td><td>January</td></tr> <tr><td>Customer 2</td><td>#2</td><td>April</td></tr> <tr><td>Customer 2</td><td>#3</td><td>March</td></tr> </tbody> <tbody> <tr><td>Customer 3</td><td>#1</td><td>January</td></tr> <tr><td>Customer 3</td><td>#2</td><td>April</td></tr> <tr><td>Customer 3</td><td>#3</td><td>March</td></tr> </tbody> </table>
您可以在这里查看一个示例。它只能在较新的浏览器中工作,但这是我在当前应用程序中支持的,你可以使用JavaScript等分组。最主要的是,这是一种方便的方式,可以直观地对行进行分组,使数据更具可读性。当然,还有其他用法,但就适用的示例而言,这是我最常用的用法。
Martin Joiner的问题是由对<caption>标签的误解引起的。
<caption>标记定义了一个表标题。
<caption>标签必须是<table>标签的第一个子标签。
每个表只能指定一个标题。
另外,注意scope属性应该放在<th>元素上,而不是<tr>元素上。
写一个多头多体表的正确方法应该是这样的:
<table id="dinner_table"> <caption>This is the only correct place to put a caption.</caption> <tbody> <tr class="header"> <th colspan="2" scope="col">First Half of Table (British Dinner)</th> </tr> <tr> <th scope="row">1</th> <td>Fish</td> </tr> <tr> <th scope="row">2</th> <td>Chips</td> </tr> <tr> <th scope="row">3</th> <td>Peas</td> </tr> <tr> <th scope="row">4</th> <td>Gravy</td> </tr> </tbody> <tbody> <tr class="header"> <th colspan="2" scope="col">Second Half of Table (Italian Dinner)</th> </tr> <tr> <th scope="row">5</th> <td>Pizza</td> </tr> <tr> <th scope="row">6</th> <td>Salad</td> </tr> <tr> <th scope="row">7</th> <td>Oil</td> </tr> <tr> <th scope="row">8</th> <td>Bread</td> </tr> </tbody> </table>
是的。我用它们动态地隐藏/显示一个表的相关部分,例如一个课程。 即。
<table>
<tbody id="day1" style="display:none">
<tr><td>session1</td><tr>
<tr><td>session2</td><tr>
</tbody>
<tbody id="day2">
<tr><td>session3</td><tr>
<tr><td>session4</td><tr>
</tbody>
<tbody id="day3" style="display:none">
<tr><td>session5</td><tr>
<tr><td>session6</td><tr>
</tbody>
</table>
可以提供一个按钮来在所有内容之间切换,或者通过操作tbody来切换当前日期,而不需要单独处理许多行。
推荐文章
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何在另一个元素之后添加一个元素?
- 我如何有效地解析HTML与Java?
- “ ”和“”有什么区别?
- 如何使用JavaScript代码获得浏览器宽度?
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- 我可以嵌套一个<按钮>元素内< >使用HTML5?
- 设置TextView文本从html格式的字符串资源在XML
- 为什么我的球(物体)没有缩小/消失?
- Twitter Bootstrap 3 Sticky Footer
- CSS在特定的“内联块”项之前/之后换行
- 很好的初学者教程socket.io?
- 点击下载Href图片链接
- HtmlSpecialChars在JavaScript中等价于什么?