Question

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

所以，例如

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

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

Answer 2

虽然您仍然只能<th>第一列中的条目，但我知道没有与<thead> / <tbody>相对应的列。

Answer 3

容易。只需将第一个td留在第一个tr - 空

即可

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

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

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

4 个答案: