当我了解HTML表格时,我没有被告知tbody,thead,tfoot,colgroup。你什么时候该使用它们?我去了W3Schools网站,我了解他们是如何工作的,但不知道何时使用或不使用它们。何时在HTML表格中使用tbody,colgroup,thead等?
11
A
回答
8
如果您想提供有关表格的其他信息并组织其中的内容,请使用它们。它们也会以某种方式影响桌面的视觉渲染效果(尽管这可能会因浏览器而异) - 例如,对<colgroup>
/<col>
的支持是极其斑驳)。
例如,如果顶部和底部有标题行,则分别将它们分组在<thead>
和<tfoot>
中,将数据行分组在<tbody>
中。浏览器将确保<tfoot>
始终呈现在底部,无论您将它放在任何<tbody>
或<tr>
元素之前还是之后,或者您的表中有多少数据,如果您的表可能有很多行:
<table>
<caption>High Scores</caption>
<thead>
<tr><th>#</th><th>Name</th><th>Score</th></tr>
</thead>
<tfoot>
<tr><th>#</th><th>Name</th><th>Score</th></tr>
</tfoot>
<tbody>
<tr><td>1</td><td>Alice</td><td>10000</td></tr>
<tr><td>2</td><td>Bob</td><td>9000</td></tr>
<tr><td>3</td><td>Carol</td><td>8500</td></tr>
<tr><td>4</td><td>Dave</td><td>8000</td></tr>
<!-- Up to 100 data rows -->
</tbody>
</table>
否则默认情况下所有行被组合成一个<tbody>
(即使你不把你的表中明确使用<tbody></tbody>
标签)。因此,如果你在表的底部标题行,你必须把它们放在表的最底部,以便他们能够在最后出现:
<table>
<caption>High Scores</caption>
<tr><th>#</th><th>Name</th><th>Score</th></tr>
<tr><td>1</td><td>Alice</td><td>10000</td></tr>
<tr><td>2</td><td>Bob</td><td>9000</td></tr>
<tr><td>3</td><td>Carol</td><td>8500</td></tr>
<tr><td>4</td><td>Dave</td><td>8000</td></tr>
<!-- Up to 100 data rows -->
<tr><th>#</th><th>Name</th><th>Score</th></tr>
</table>
,当然还有,这也使得它如果你关心这种事情,可以说没有语义。
需要注意的是需要一个<tfoot>
,如果你使用一个,放在之前以往规格的任何<tbody>
或<tr>
元素直至并包括HTML 4和XHTML 1吧验证这些文档类型。这从HTML5不再是真实的。
+0
colgroup呢?它如何与thead交互? – 2015-05-16 19:16:33
相关问题
- 1. HTML tbody和thead在旋转表格中
- 2. HTML表格thead未与tbody对齐
- 3. HTML表格:THEAD宽度取决于Chrome中的TBODY
- 4. 固定thead和滚动tbody表; thead列适合tbody列
- 5. 列THEAD和TBODY
- 6. 带col,colgroup,tbody和thead的HTML表标签在Visual Studio 2010和Visual Studio 2012中引发编译错误
- 7. CSS选择器将样式应用于COLGROUP,但仅限于TBODY(不是THEAD)中?
- 8. jQuery slideToggle使用thead和tbody元素的表格。没有动画。
- 9. 的Html敏捷包追加THEAD TBODY TFOOT在现有的HTML表格
- 10. 如何创建表THEAD和TBODY动态
- 11. HTML表格 - 我可以在thead之前添加额外的tbody吗?
- 12. c#创建thead和tbody
- 13. Flexigrid thead和tbody不匹配
- 14. 多个thead/tbody设计
- 15. HTML表格colgroup元素不工作?
- 16. HTML表格THEAD和TH背景在IE
- 17. 表格边框半径 - 全球css(thead或tbody选择器)
- 18. 带有顶部和左侧标题的表格可能使用thead和tbody?
- 19. CSS:设置为tbody/thead时在Chrome中重复的渐变
- 20. HTML表colgroup边界半径
- 21. 的jQuery/CSS:</p> <p>我有一个标准的HTML表格与COLGROUP,THEAD,TBODY和几个:隐藏列
- 22. 如何在HTML表格中设置Tbody的宽度和高度
- 23. 在HTML表中集中<thead>
- 24. 如何解决表与不平衡的thead和tbody
- 25. 隐藏tbody时从HTML表格中删除间隙
- 26. 我该如何正确定位使用tfoot,tbody和thead的表格中的最后一个tr?
- 27. 在运行时将col添加到html表的colgroup中
- 28. HTML表格的tbody不是100%
- 29. thead的宽度不同于tbody
- 30. ASP.NET 2.0 - 带有tbody的DataGrid/thead
尽量避免使用W3Schools。这就是为什么 - http://w3fools.com – Terry 2013-03-15 19:39:20
MDN有这些元素的信息:https://developer.mozilla.org/en/docs/HTML/Element/tbody – 2013-03-15 19:39:43
http://www.w3.org /TR/html401/struct/tables.html – 2013-03-15 19:42:52