表，行跨度和列跨度

Question

这是我的代码关于这个表附件。我有一个问题，因为我的桌子不是我想要的。我是html5的初学者，我在rowspan和colspan方面确实遇到了麻烦。如何更好地了解rowspan和colspan，以及如何按我想要的方式做表。

​

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

<table>
  <tr>
    <th colspan="2">Hi</th>
    <th>Hi</th>
  </tr>
  <tr>
    <td>Hi</td>
    <td>Hi</td>
    <td>hi</td>
  </tr>
  <tr>
    <td>Hi</td>
    <td>Hi</td>
    <td>hi</td>
    <td>hi</td>
  </tr>
</table>

​

​

​

Answer 1

表头最后一个单元格和表体第一行最后一个单元格需要加上colspan，否则它们的列总和只有3(基于colspan)。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    table,
    td,
    th {
      border: 1px solid #666;
      border-collapse: collapse;
    }
  </style>
  <title>Assignment 4</title>
</head>

<body>
  <table>
    <tr>
      <th colspan="2">Hi</th>
      <th colspan="2">Hi</th>
    </tr>
    <tr>
      <td>Hi</td>
      <td>Hi</td>
      <td colspan="2">hi</td>
    </tr>
    <tr>
      <td>Hi</td>
      <td>Hi</td>
      <td>hi</td>
      <td>hi</td>
    </tr>
  </table>


</body>

</html>

​

Answer 2

试着使用这个

<!DOCTYPE html>
<html>
<head>
<style> 
table,
td,
th {
  border: 1px solid #666;
  border-collapse: collapse;
}


</style>
</head>
<body>

<table>
  <tr>
    <th colspan="2">Hi</th>
    <th colspan="2">Hi</th>
  </tr>
  <tr>
    <td>Hi</td>
    <td >Hi</td>
    <td colspan="2">hi</td>
  </tr>
  <tr>
    <td>Hi</td>
    <td>Hi</td>
    <td>hi</td>
    <td>hi</td>

  </tr>
</table>

</body>
</html>

简而言之，colspan和rowspan分别表示合并列或行。