2

我可以使用 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 电子邮件（例如时事通讯）之外，几乎没有其他选择。但是为了我自己的语义安心，我想使用 <section>、<article> 和 <header> 类型的元素来组织事物。

4

3 回答 3

1

如果它是您关心的语义，您可以使用为现有元素定义的ARIA 角色：<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>
于 2013-04-11T16:24:30.317 回答
0

你可以，但是你把元素放在了错误的地方。他们需要在<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>
于 2013-04-11T16:13:34.890 回答
0

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

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

祝你好运！

于 2013-04-11T16:17:27.763 回答