html - 如何使用 rowspan 和 colspan 在 html 中制作表格？

Question

如何在 html 中构建此表？？

我想使用 rowspan 和 colspan 制作表格？

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>


<table class="table table-bordered">
  <thead>
    <th>Subject</th>
    <th>Result</th>
  </thead>
  <tbody>
    <tr>
      <td>Science</td>
      <td>Physics</td>
      <td>Chemistry</td>
      <td>Other Science</td>
      <td>Math</td>
      <td>English</td>
    </tr>
  </tbody>
</table>

Answer 1

可以了解<table>标签在 MDN 你可以这样做:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<table class="table table-bordered">
  <thead>
    <tr>
      <th colspan="2">Subject</th>
      <th>Result</th>
    </tr>

  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Science</td>
      <td>Physics</td>
      <td>A</td>

    </tr>
    <tr>
      <td>Chemistry</td>
      <td>A</td>
    </tr>
    <tr>
      <td rowspan="2">Other Science</td>
      <td>Biology</td>
      <td>B</td>
    </tr>
    <tr>
      <td>Geography</td>
      <td>A</td>
    </tr>
    <tr>
      <td colspan="2">Math</td>
      <td>A+</td>
    </tr>
    <tr>
      <td colspan="2">English</td>
      <td>A+</td>

    </tr>

  </tbody>
</table>