使用 thead 和 tbody 可以使用顶部和左侧标题的表格吗？答案

【问题标题】：Is a table with top and left headers possible using thead and tbody?使用 thead 和 tbody 可以使用顶部和左侧标题的表格吗？
【发布时间】：2014-05-26 11:21:41
【问题描述】：

我想在HTML表格中布局二维数据，一个例子

      Cow  Horse
  Big   1    3
Small   5    7

我可以通过以下标记轻松实现这一点。

<table>
    <tr><th></th><th>Cow</th><th>Horse</th></tr>
    <tr><th>Big</th><td>1</td><td>3</td></tr>
    <tr><th>Small</th><td>5</td><td>7</td></tr>
</table>

但是，我一直想知道 tbody 和 thead 标签是否可以做到这一点？

我已经尝试过了，但数据只是出现在标题下方，这是我所期望的，但不想要。

<table>
   <thead>
     <tr><th></th><th>Cow</th><th>Horse</th></tr>
     <tr><th>Big</th><th></th><th></th></tr>
     <tr><th>Small</th><th></th><th></th></tr>
   </thead>
   <tbody>
     <tr><td></td><td>1</td><td>3</td></tr>
     <tr><td></td><td>5</td><td>7</td></tr>
   </tbody>
</table>

结果

      Cow  Horse
  Big   
Small   
        1    3
        5    7

这是可能的，还是只能将广告用于顶部或侧面的标题，但不能同时用于两者。我在网上找不到这个问题的任何例子，也许我在寻找错误的东西。

http://www.w3.org/TR/html401/struct/tables.html
http://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
This answer 有点接近，但只处理左侧的标题，而不是顶部。

【问题讨论】：

IMO 你会得到与你发布的最后一个链接相同的答案。吻。 <thead> 包含标题 rows，如果您更改它，那么它不再是 <thead>（至少在概念上）。 <th> 内 <tbody> 不是视觉技巧：既有效又定义含义（因此它对任何浏览器和屏幕阅读器都很友好）。

标签： html

【解决方案1】：

如果您希望使用thead 和tbody 元素，则前者应包含标题行，而后者应包含所有其他行：

<table>
  <thead>
    <tr><th></th><th>Cow</th><th>Horse</th></tr>
  </thead>
  <tbody>
    <tr><th>Big</th><td>1</td><td>3</td></tr>
    <tr><th>Small</th><td>5</td><td>7</td></tr>
  </tbody>
</table>

【讨论】：