带有HTML5元素的表格式页面?

jautem 发布于 2019-03-09 html5 最后更新 2019-03-09 14:35 0 浏览

我可以使用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>类型元素来组织事物。
已邀请:

sed_et

赞同来自:

你可以,但你有错误的地方。它们需要位于<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>

set

赞同来自:

好吧,只要您的电子邮件服务接受HTML5标签,您就可以使用HTML5标签。但是,您可以尝试使用CSS(请注意,我没有说CSS3)为您的页面添加样式。并始终记住内联样式! 在2013年使用表格格式就像进入工作,但在谈论电子邮件服务时,它仍然是城镇治安官。 祝你好运!

gsint

赞同来自:

如果它是您关心的语义,您可以使用现有元素上为<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>