带有 HTML5 元素的表格格式页面？答案

【问题标题】：Table-formatted page with HTML5 elements?带有 HTML5 元素的表格格式页面？
【发布时间】：2013-04-03 22:31:03
【问题描述】：

我可以使用 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 电子邮件（例如新闻通讯）之外，几乎没有其他选择。但是为了我自己的语义安心，我想使用

、

和

类型的元素来组织事物。

【问题讨论】：

标签： html html-table html-email semantics

【解决方案1】：

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

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

【讨论】：

这是最好的方法。电子邮件与跨度、div 和 p 等常见标签不一致。你会在试图强制语义标签工作时遇到麻烦。

【解决方案2】：

好吧，只要您的电子邮件服务接受它，您就可以使用带有表格格式的 HTML5 标记。但是，您可以尝试使用 CSS（请注意，我没有说 CSS3）为您的页面赋予样式。永远记住内联样式！

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

祝你好运！

【讨论】：

【解决方案3】：

你可以，但是你把元素放在了错误的地方。他们需要在<td>s 内。您还需要将整个表格包装在<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>

【讨论】：

是的，表比较大，我有标签，但是我只复制粘贴了一大块。