表格中的垂直和水平标题？答案

【问题标题】：Vertical and Horizontal Headers in a table?表格中的垂直和水平标题？
【发布时间】：2011-09-08 21:44:01
【问题描述】：

如何获得同时包含水平和垂直标题的表格？

例如

         header1 header2 header3 
header1    1        1      1
header2    2        2      2 
header3    3        3      3

【问题讨论】：

标签： html css tabular

【解决方案1】：

就像@UlrichSchwarz 所说，您可以在第一列中使用<th> 而不是<td>。使用范围，您可以使其更具语义描述性：

<table>
  <tr>
    <th></th>
    <th scope="col">header1</th>
    <th scope="col">header2</th>
    <th scope="col">header3</th>
  </tr>
  <tr>
    <th scope="row">header 1</th>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <th scope="row">header 2</th>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr>
    <th scope="row">header 3</th>
    <td>3</td>
    <td>3</td>
    <td>3</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

虽然您仍然可以只在第一列中输入<th>，但据我所知，没有与<thead>/<tbody> 等效的列。

【讨论】：

【解决方案3】：

简单。只需将第一个 td 留在第一个 tr - 空

【讨论】：

【解决方案4】：

您可以使用非常基本的 HTML 和 CSS 类来实现：

table{border-collapse:collapse}
td{text-align:center;padding:5px;border:1px solid #000}
td.empty{border:0}
td.headt{font-weight:bold;background-color:#b7f926}

<table>
<tr>
<td class="empty"> </td>
<td class="headt">Header 1</td>
<td class="headt">Header 2</td>
<td class="headt">Header 3</td>
</tr>
<tr>
<td class="headt">Header 1</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="headt">Header 2</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="headt">Header 3</td><td>1</td><td>2</td><td>3</td>
</tr>
</table>

这只是一个草图/建议，但希望对未来的读者比较有用:)

【讨论】：