除了 HTML table 元素之外，还有哪些其他选项可用于有序地放置多个复选框？

Question

我想知道 HTML table 元素是否仍然是最新的以有序地定位多个复选框输入字段，或者是否有更多可用的最新选项，例如使用 css 或其他 html 个元素？

这是我的例子：

<table>
  <tr>
    <td><label for="grade1">Grade 1</label></td>
    <td><input type="checkbox" name="grade1" id="grade1" checked></td>
  </tr>
  <tr>
    <td><label for="grade2">Grade 2</label></td>
    <td><input type="checkbox" name="grade2" id="grade2"></td>
  </tr>
  <tr>
    <td><label for="grade3">Grade 3</label></td>
    <td><input type="checkbox" name="grade3" id="grade3"></td>
  </tr>
  <tr>
    <td><label for="grade4">Grade 4</label></td>
    <td><input type="checkbox" name="grade4" id="grade4"></td>
  </tr>
  <tr>
    <td><label for="grade5">Grade 5</label></td>
    <td><input type="checkbox" name="grade5" id="grade5"></td>
  </tr>
  <tr>
    <td><label for="grade6">Grade 6</label></td>
    <td><input type="checkbox" name="grade6" id="grade6"></td>
  </tr>
  <tr>
    <td><label for="grade8">High school</label></td>
    <td><input type="checkbox" name="grade8" id="grade8"></td>
  </tr>
</table>

Answer 1

一种选择是使用 css 网格来实现类似的布局。

.grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 5px;
}

<div class="grid">
  <label for="grade1">Grade 1</label>
  <input type="checkbox" name="grade1" id="grade1" checked>
  <label for="grade2">Grade 2</label>
  <input type="checkbox" name="grade2" id="grade2">
  <label for="grade3">Grade 3</label>
  <input type="checkbox" name="grade3" id="grade3">
  <label for="grade4">Grade 4</label>
  <input type="checkbox" name="grade4" id="grade4">
  <label for="grade5">Grade 5</label>
  <input type="checkbox" name="grade5" id="grade5">
  <label for="grade6">Grade 6</label>
  <input type="checkbox" name="grade6" id="grade6">
  <label for="grade8">High school</label>
  <input type="checkbox" name="grade8" id="grade8">
</div>

除了 HTML table 元素之外，还有哪些其他选项可用于有序地放置多个复选框？

What other options are there available to position several checkboxes in an orderly manner except for the HTML table element?

html

css

forms

checkbox