html - 如何在 Html 中创建特定表？

Question

我怎样才能建立这个表？我知道我可以创建具有属性可见性的类：隐藏并将该类应用于最后 2 个 td 标记。但也许还有另一种不使用 css 的方法。

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

table {
  border-collapse: collapse;
  width: 50%;
}

td,
th {
  padding: 30px;
}

<table>
  <tr>
    <th colspan="4">Table</th>
  </tr>
  <tr>
    <td rowspan="2"></td>
    <td colspan="3"></td>
  </tr>
  <tr>
    <td colspan="2"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

标签： htmlhtml-table

Answer 1

这只是在模式下使用<div>s的粗略尝试。display:inline-block它确实有效，但是您必须非常小心widthand height属性。

div {display:inline-block; border:1px solid grey;height:60px;vertical-align:middle;margin-bottom:-1px;margin-right:-1px}
div.vert2 {width:59px; height:121px; float:left}
div.five {width:300px}
div.four {width:239px}
div.three {width:179px}
div.two {width:119px}
div.one {width:59px}

<div class="five">Table</div><br>
<div class="vert2"></div><div class="three"></div><br>
<div class="two"></div><br>
<div class="one"></div><div class="one"></div>