如何使用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

您可以在

MDN

了解 <table> 标签 你可以这样做：

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>

Answer 2

这是用

colspan

和

rowspan

设置的

table {
  border-collapse: collapse;
}

table,
tr,
th,
td {
  border: 1px solid #000;
}

th {
  padding: 1ex;
  background: #ccc;
}

td {
  padding: 1ex;
}

.divide td {
  border-top: 3px solid;
}

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

<table class="table table-bordered">
  <thead>
    <th colspan="2">Subject</th>
    <th>Result</th>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2" colspan="1" width="100px">
        SCIENCE
      </td>
      <td>
        Physics
      </td>
      <td>A</td>
    </tr>
    <tr>
      <td>
        <span>Chemistry</span>
      </td>
      <td colspan="1">A</td>
    </tr>
    <tr>
      <td rowspan="2" colspan="1" width="100px">
        SCIENCE
      </td>
      <td>
        Physics
      </td>
      <td>A</td>
    </tr>
    <tr>
      <td>
        <span>Chemistry</span>
      </td>
      <td colspan="1">A</td>
    </tr>
    <tr>
      <td colspan="2">
        SCIENCE
      </td>
      <td>A</td>
    </tr>
    <tr>
    <td colspan="2">
        SCIENCE
      </td>
      <td>A</td>
    </tr>
  </tbody>
</table>


<br>
<br>
<table>
  <tr>
    <th>head</th>
    <th>title</th>
    <th>title</th>
    <th>title</th>
    <th></th>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td rowspan="2">white</td>
  </tr>
  <tr>
    <td colspan="4">
      lorem ipsum
    </td>
  </tr>
  <tr class="divide">
    <td>
      <input type="checkbox">
    </td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td rowspan="2">gray</td>
  </tr>
  <tr>
    <td colspan="4">
      lorem ipsum
    </td>
  </tr>
  <tr class="divide">
    <td>
      <input type="checkbox">
    </td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td>white</td>
  </tr>
  <tr class="divide">
    <td>
      <input type="checkbox">
    </td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td rowspan="2">gray</td>
  </tr>
  <tr>
    <td colspan="4">
      lorem ipsum
    </td>
  </tr>
</table>

Answer 3

我只在问题中的代码中添加了

rowspan

s、

colspan

s 和其他一些小的编辑，这两行 CSS 只是一个简单的建议，可以根据自己的喜好进行更改。

table{
    margin:50px auto;
    max-width:500px;
}

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