Html Table：如何获得以下输出？答案

【问题标题】：Html Table: How to get the following output?Html Table：如何获得以下输出？
【发布时间】：2021-11-01 02:53:19
【问题描述】：

我有一张这样的桌子设计图片 Design of the table

而我的html代码是

<table border="1" cellspacing="0">
   <tr>
      <th colspan="3">7</th>
      <th rowspan="3">6</th>
   </tr>
   <tr>
      <td colspan="2" rowspan="2">2</td>
      <td>4</td>
   </tr>
   <tr>
      <td>1</td>
   </tr>
   <tr>
      <td>5</td>
      <td colspan="2">8</td>
      <td>3</td>
   </tr>         
</table>

但是表格正在以下列方式呈现 Output of HTML

有什么解释为什么会这样吗？以及如何像上图那样渲染

【问题讨论】：

标签： html html-table

【解决方案1】：

使用 CSS 网格样式参考：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.wrapper > div {
  border-style: solid;
}
.one {
  grid-column: 4/ span;
  grid-row: 3;
}
.two {
  grid-column: 1/ span 3;
  grid-row: 2/ span 2;
}
.three {
  grid-column: 5/ span 5;
  grid-row: 4;
}
.four {
  grid-column: 4/ span;
  grid-row: 2;
}
.five {
  grid-column: 1;
  grid-row: 4;
}
.six {
  grid-column: 5/ span 5;
  grid-row: 1/ span 3;
}
.seven {
  grid-column: 1/ span 4;
  grid-row: 1 span;
}
.eight {
  grid-column: 2/ span 4;
  grid-row: 4;
}

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
  <div class="seven">Seven</div>
  <div class="eight">Eight</div>
</div>

【讨论】：

【解决方案2】：

table{
  width: 1000px;
  height: 200px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="github.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
</head>
<body>
  <table border="1" cellspacing="0">
    <tr>
        <th colspan="3">7</th>
        <th rowspan="3">6</th>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">2</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>5</td>
        <td colspan="2">8</td>
        <td>3</td>
    </tr>
</table>
</body>
</html>

table{
  width: 400px;
  height: 200px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="github.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
</head>
<body>
  <table border="1" cellspacing="0">
    <tr>
        <th colspan="3">7</th>
        <th rowspan="3">6</th>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">2</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>5</td>
        <td colspan="2">8</td>
        <td>3</td>
    </tr>
</table>
</body>
</html>

您面临的问题是您没有设置表格的宽度。在我上面附加的代码示例中，您可以看到一个与您不想要的代码示例相似，而另一个与您想要作为输出的代码示例相似。唯一的区别是宽度。

【讨论】：