使用 rowspan colspan 的 html 表格

Question

我正在尝试创建一个如下所示的表格..

table, td {
  border-collapse: collapse;
  border: 2px solid blue;
}

<table>
  <tr>
    <td rowspan='6' colspan='6'>&nbsp;</td>
    <td rowspan='4'>&nbsp;</td>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

在我的代码中，空行是否导致它错误打印表格？你能说出为什么浏览器渲染不正确吗？还是逻辑错误？

Answer 1

您需要更新有关单元格尺寸的 CSS。

这是您可以执行的操作。

table,
td {
  border-collapse: collapse;
  border: 2px solid blue;
  text-align: center;
}
table {
  width: 100%;
  height: 350px;
}
td {
  width: 50px;
  height: 50px;
}

<table>
  <tr>
    <td rowspan='6' colspan='6'>6X6</td>
    <td rowspan='4'>4X1</td>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
  <tr>
    <td>1
    </td>
  </tr>
  <tr>
    <td>2
    </td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>