在有序列表中显示 table 时的最佳做法

Question

我正在尝试找出对以下页面布局示例进行编码的最佳方法，该示例在有序列表中显示全角 table。通常，我可以作弊并使用两个带 table 的项目符号列表，但现在的要求是使用有序列表并让数字继续，而 table 仍在列表项中：

如您所见，除了 table 之外，H1 以下的所有内容都以边距缩进，它位于第二个和第三个列表项之间。

我的主要问题： 由于我们不能放置 DIVs 和 TABLEs 在 OL 和 LI[=34 之间=] 标签，在保持正确的 HTML 列表布局标准的同时编写此布局的正确方法是什么？

我的错误代码：

<h2>Heading 2</h2> <p></p> <ol> <li></li> <li></li> <div class="table-container"> <table> <tr> <td> ... </td> </tr> </table> </div> <li></li> <li></li> </ol>

谢谢！

Answer 1

关闭列表的第一部分，放入 table，用 start="3" 开始一个新列表以恢复编号：

.table-container table {
  border: 1px solid;
  border-collapse: collapse;
  width: 100%;
}
.table-container table td {
  border: 1px solid;
}

    <h2>Heading 2</h2>
    <p>Lorem ipsum</p>
    <ol>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
    </ol>
    <div class="table-container">
    <table width="100%">
      <tr>
        <td>Foo</td>
        <td>Bar</td>
        <td>Baz</td>
      </tr>
      <tr>
        <td>Foo</td>
        <td>Bar</td>
        <td>Baz</td>
      </tr>
    </table>
    </div>
    <ol start="3">
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
    </ol>

在有序列表中显示 table 时的最佳做法

Best practices when displaying a table within an ordered list

html

html-table

html-lists

standards

w3c