table 布局_css

​​rowspan​​​行扩展 ​​rowspan="2"​​ 表示占据两行的高度

​​colspan​​​列扩展 ​​colspan="2"​​ 表示占据两列的宽度

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      body,
      html {
        height: 100%;
      }
      .table {
        border-collapse: collapse;
        /* 配合th,td设置padding代替 cellpadding 属性 */
        /* border-spacing: 5px; */
        /* 两个单元格之间空间的大小 border-collapse: collapse; 时设置无效 */
        /* margin-left: auto;
        margin-top: auto; */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600px;
        height: 600px;
        border: 2px solid #000;
        text-align: center;
        font-weight: bold;
      }
      .table td,
      th {
        padding: 2px;
        border: 2px solid #000;
      }
    </style>
  </head>

  <body>
    <form>
      <table class="table">
        <tbody>
          <tr>
            <td rowspan="2">A</td>
            <td colspan="2">B</td>
          </tr>
          <tr>
            <td>E</td>
            <td rowspan="2">C</td>
          </tr>
          <tr>
            <td colspan="2">D</td>
          </tr>
        </tbody>
      </table>
    </form>
  </body>
</html>