xhtml 表 - 正确使用

发布于 2024-09-17 22:59:57 字数 1958 浏览 4 评论 0原文

我有一个非常简单的问题。像示例 1 中那样编写具有 2 个不同标头和重复子标头的表是一个好习惯吗?还是将此代码拆分为 2 个表更好/更具语义(参见示例 2)?

示例 1:

<table>
<tr>
  <th colspan="3">HEADER 1</th>
</tr>
<tr>
  <th>sub-header 1</th>
  <th>sub-header 2</th>
  <th>sub-header 3</th>
</tr>
<tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
</tr>
<tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
</tr>
<tr>
  <th colspan="3">HEADER 2</th>
</tr>
<tr>
  <th>sub-header 1</th>
  <th>sub-header 2</th>
  <th>sub-header 3</th>
</tr>
<tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
</tr>
<tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
</tr>

示例 2:

<table>
  <tr>
    <th colspan="3">HEADER 1</th>
  </tr>
  <tr>
    <th>sub-header 1</th>
    <th>sub-header 2</th>
    <th>sub-header 3</th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
</table>
<table>
  <tr>
    <th colspan="3">HEADER 2</th>
  </tr>
  <tr>
    <th>sub-header 1</th>
    <th>sub-header 2</th>
    <th>sub-header 3</th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

I have a pretty simple question. Is it a good practice to write tables with 2 different headers and repeating sub-headers like in the example 1 or is it better/more semantic to split this code into 2 tables (see example 2) ?

Example 1:

<table>
<tr>
  <th colspan="3">HEADER 1</th>
</tr>
<tr>
  <th>sub-header 1</th>
  <th>sub-header 2</th>
  <th>sub-header 3</th>
</tr>
<tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
</tr>
<tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
</tr>
<tr>
  <th colspan="3">HEADER 2</th>
</tr>
<tr>
  <th>sub-header 1</th>
  <th>sub-header 2</th>
  <th>sub-header 3</th>
</tr>
<tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
</tr>
<tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
</tr>

Example 2:

<table>
  <tr>
    <th colspan="3">HEADER 1</th>
  </tr>
  <tr>
    <th>sub-header 1</th>
    <th>sub-header 2</th>
    <th>sub-header 3</th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
</table>
<table>
  <tr>
    <th colspan="3">HEADER 2</th>
  </tr>
  <tr>
    <th>sub-header 1</th>
    <th>sub-header 2</th>
    <th>sub-header 3</th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

只是在用心讲痛 2024-09-24 22:59:57

根据需要使用尽可能多或尽可能少的表来传达您想要传达的信息,这是更好/更语义的做法。如果您不使用 HTML,并且假设将数据放在一张纸上以便其他人理解,您会使用零个、一个、两个或更多表格吗?这就是您应该使用的表的数量。

It's better/more semantic to use as many or as few tables as you need to convey the information you want to convey. If you weren't using HTML, and say were laying out the data on a sheet of paper for someone else's understanding, would you use zero, one, two or more tables? That's how many tables you should use.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文