带有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电子邮件(例如新闻通讯)。然而，为了我自己的语义平静，我想使用

，

and <</p>

Answer 1

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

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

Answer 2

可以，但是您把元素放在了错误的位置。他们需要在<td>内部。您还需要在<table>

中包装整个表。

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

Answer 3

好吧，你可以使用HTML5标签表格格式，只要你的电子邮件服务接受它。但是，您可以尝试使用CSS(请注意，我没有说CSS3)为您的页面提供样式。永远记住内联样式!

在2013年使用表格格式就像坐马车去上班，但当谈到电子邮件服务时，它仍然是镇上的警长。

祝你好运!