html - 我如何制作这种桌子？我试过这样做，但总是出现一条额外的线

Question

这就是我要的

这就是我得到的，一条线一直出现在图片中突出显示的位置

标签： html

Answer 1

希望下面的回答对你有帮助

要合并表格单元格，您必须跨跨度或行跨度，更多详细信息请查看此链接单击此处

选项1

要创建此表，

• 我已经通过 html 默认高度和宽度属性设置了宽度和高度
• 我使用以下css代码处理表格边框，必须使用。（了解更多点击此链接：链接）

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

<table width="100%">
  <thead>
    <tr>
      <th height="40px" colspan="2"></th>
      <th height="40px"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td height="40px"></td>
      <td height="40px"></td>
      <td height="40px" rowspan="2"></td>
    </tr>
    <tr>
      <td height="250px"></td>
      <td height="250px"></td>
    </tr>
  </tbody>
</table>

---

选项 2

要创建此表，

• 我已经通过内联 css 设置了宽度和高度
• 无需加载外部 CSS 代码，所有样式均通过内联 css 完成
• 边框是通过默认的 html 属性border="1" 设置的

<table border="1" style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr>
      <th style="height: 40px;" colspan="2"></th>
      <th style="height: 40px;"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="height: 40px;"></td>
      <td style="height: 40px;"></td>
      <td style="height: 40px;" rowspan="2"></td>
    </tr>
    <tr>
      <td style="height: 250px;"></td>
      <td style="height: 250px;"></td>
    </tr>
  </tbody>
</table>