html - 带有 HTML5 元素的表格格式页面？

Question

我可以使用 HTML5 元素在使用表格进行格式化的“页面”上概述代码吗？例如:

<section id="posts">
  <tr id="posts-title-row">
    <header><td id="posts-title">
      <h2>Latest Posts</h2>
    </td></header>
  </tr>
  <tr id="posts-row">
    <article><td>
      <p>Maecenas faucibus mollis interdum.</p>
    </td></article>
    <article><td>
      <p>Maecenas faucibus mollis interdum.</p>
    </td></article>
    <article><td>
      <p>Maecenas faucibus mollis interdum.</p>
    </td></article>
  </tr>
</section>

总的来说，我知道这是一种非常糟糕的形式，但是在电子邮件客户端(尤其是 Gmail)支持电子邮件的 CSS3 格式之前，除了使用表格来格式化 HTML 电子邮件(例如时事通讯)之外，别无选择。但是，为了我自己的语义安心，我想使用

、

和 <header> 类型元素来组织事物。

Answer 1

如果它是您关心的语义，您可以使用 ARIA roles为 <section> 定义和 <article>在现有元素上:

<table id="posts" aria-role="region">
    <tr id="posts-title-row">
        <td id="posts-title" aria-role="banner">
            <h2>Latest Posts</h2>
        </td>
    </tr>
    <tr id="posts-row">
        <td aria-role="article">
            <p>
                Maecenas faucibus mollis interdum.
            </p>
        </td>
        <td aria-role="article">
            <p>
                Maecenas faucibus mollis interdum.
            </p>
        </td>
        <td aria-role="article">
            <p>
                Maecenas faucibus mollis interdum.
            </p>
        </td>
    </tr>
</table>