Search code examples
htmlhtml-tablehtml-listsstandardsw3c

Best practices when displaying a table within an ordered list

I am trying to figure out the best way to code the below page layout example which displays a full-width table within an ordered list. Normally, I could cheat and use two bulleted lists with a table between them but the requirement now is to use an ordered list and have the numbers continue while the table is still within the list items: page layout example showing a table within an ordered list.

As you can see, everything below the H1 is indented with margin spacing except for the table, which is between the second and third list items.

My main question: Since we cannot place DIVs and TABLEs between a OL and LI tag, what is the proper way to code this layout while also keeping proper HTML list layout standards?

My incorrect code:

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

Thank you!

Solution

  • Close the first part of the list, put the table, start a new list with start="3" to resume numbering:

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