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

发布于 2024-12-03 16:09:07 字数 186 浏览 1 评论 0原文

如何获得具有水平和垂直标题的表格？

所以例如

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

原文

How would I get a table with both horizontal and vertical headers?

So e.g.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我很OK 2024-12-10 16:09:07

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

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

Like @UlrichSchwarz said, you can just use <th> instead of <td> in the first column. Using scope, you can make it more semantically descriptive:

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

回复收藏 0 原文

長街聽風 2024-12-10 16:09:07

虽然您仍然可以仅第一列中的条目，但没有 /< 的列等效项/code> 据我所知。

回复收藏 0 原文

谁的新欢旧爱 2024-12-10 16:09:07

简单的。只需将第一个 tr 中的第一个 td 保留 - 空

回复收藏 0 原文

怎会甘心 2024-12-10 16:09:07

您可以使用相当基本的 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>

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

You can make it with quite elementary HTML and CSS classes:

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>

This is just a sketch/suggestion, but hopefully useful to compare for future readers :)

回复收藏 0 原文

~没有更多了~