HTML中table标签的跨多行和多列布局方法

先放一张布局效果效果图

在实现这一布局效果时，主要应用了rowspan、colspan跨行和跨列的属性布局。在所跨的行或者列，在其他行或者列中也是占位的。比如：第一项项目基本信息是跨过5行，因此在接下来的4行中，第一列已经是默认被占了，行中的td列是从第二列开始布局；最后一行，项目得分占据6列，因此第二个td实际对应的是该行的第七列。具体实现代码如下：

HTML布局代码：

<!-- 明细表 -->
  <div class="chartbox">
    <ul class="chartmenu">
      <li>模块</li>
      <li>一级类目</li>
      <li>评估标准满分</li>
      <li>项目得分</li>
      <li>子模块得分（%）</li>
      <li>权重</li>
      <li>*权重得分</li>
    </ul>
    <table cellpadding="0" cellspacing="0">
      <!-- 项目基本信息 -->
      <tbody>
        <tr rowspan="6" class="table-row">
          <th rowspan="5" class="table-name">项目基本信息</th>
          <td rowspan="1" class="table-first">项目基本概况</td>
          <td rowspan="1" class="table-all">-9-</td>
          <td rowspan="1" class="table-score">-9-</td>
          <td rowspan="6" class="table-get">83</td>
          <td rowspan="6" class="table-weight">0.8</td>
          <td rowspan="6" class="table-weiscore">26.4</td>
        </tr>
        <tr class="table-row">
          <td class="table-first">团队基本概况</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
        <tr class="table-row">
          <td class="table-first">资本市场认可度</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
        <tr class="table-row">
          <td class="table-first">项目宣传推广力度</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
        <tr class="table-row">
          <td class="table-first">项目热度</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
        <tr class="table-lastrow">
          <td class="table-null"></td>
          <td class="table-first">小计</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
      </tbody>
      <!-- 项目团队评估 -->
      <tbody>
        <tr rowspan="6" class="table-row">
          <th rowspan="3" class="table-name">项目团队评估</th>
          <td rowspan="1" class="table-first">创始人背景信息</td>
          <td rowspan="1" class="table-all">-9-</td>
          <td rowspan="1" class="table-score">-9-</td>
          <td rowspan="4" class="table-get">83</td>
          <td rowspan="4" class="table-weight">0.8</td>
          <td rowspan="4" class="table-weiscore">26.4</td>
        </tr>
        <tr class="table-row">
          <td class="table-first">核心管理团队信息</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
        <tr class="table-row">
          <td class="table-first">核心开发团队信息</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
        <tr class="table-lastrow">
          <td class="table-null"></td>
          <td class="table-first">小计</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
      </tbody>
      <!-- 项目方案评估 -->
      <tbody>
        <tr rowspan="6" class="table-row">
          <th rowspan="3" class="table-name">项目方案评估</th>
          <td rowspan="1" class="table-first">创始人背景信息</td>
          <td rowspan="1" class="table-all">-9-</td>
          <td rowspan="1" class="table-score">-9-</td>
          <td rowspan="4" class="table-get">83</td>
          <td rowspan="4" class="table-weight">0.8</td>
          <td rowspan="4" class="table-weiscore">26.4</td>
        </tr>
        <tr class="table-row">
          <td class="table-first">核心管理团队信息</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
        <tr class="table-row">
          <td class="table-first">核心开发团队信息</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
        <tr class="table-lastrow">
          <td class="table-null"></td>
          <td class="table-first">小计</td>
          <td class="table-all">9</td>
          <td class="table-score">9</td>
        </tr>
      </tbody>
      <!-- 合计 -->
      <tbody>
        <tr class="addtotal">
          <td colspan="2">合计</td>
          <td>240</td>
          <td colspan="3">240</td>
          <td>240</td>
        </tr>
        <tr class="totalscore">
          <td colspan="6">项目得分</td>
          <td>240</td>
        </tr>
      </tbody>
    </table>
  </div>

css样式代码：

.chartbox {
    width: 95%;
    margin: 0 auto;
    min-height: 300px;
  }

  .chartmenu {
    width: 100%;
    height: 50px;
    background-color: #f6fafd;
    letter-spacing: -0.5em;
    font-size: 0;
  }

  .chartmenu li {
    letter-spacing: normal;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    line-height: 50px;
    color: #333;
    text-align: center;
  }

  .chartmenu li:nth-of-type(1) {
    width: 135px;
  }

  .chartmenu li:nth-of-type(2) {
    width: 185px;
  }

  .chartmenu li:nth-of-type(3) {
    width: 130px;
  }

  .chartmenu li:nth-of-type(4) {
    width: 110px;
  }

  .chartmenu li:nth-of-type(5) {
    width: 150px;
  }

  .chartmenu li:nth-of-type(6) {
    width: 100px;
  }

  .chartmenu li:nth-of-type(7) {
    width: 140px;
  }

  .table-row .table-name {
    width: 134px;
    vertical-align: middle;
    font-size: 14px;
    color: #333;
    border-left: 1px solid #c8e5fa;
  }

  .table-row .table-first {
    width: 183px;
    text-align: center;
    vertical-align: top;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #c8e5fa;
    border-left: 1px solid #c8e5fa;
    border-right: 1px solid #c8e5fa;
  }

  .table-row .table-all {
    width: 130px;
    text-align: center;
    vertical-align: top;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #c8e5fa;
  }

  .table-row .table-score {
    width: 108px;
    text-align: center;
    vertical-align: top;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #c8e5fa;
    border-left: 1px solid #c8e5fa;
    border-right: 1px solid #c8e5fa;
  }

  .table-row .table-get {
    width: 149px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #c8e5fa;
    border-right: 1px solid #c8e5fa;
  }

  .table-row .table-weight {
    width: 99px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #c8e5fa;
    border-right: 1px solid #c8e5fa;
  }

  .table-row .table-weiscore {
    width: 139px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #c8e5fa;
    border-right: 1px solid #c8e5fa;
  }

  .table-lastrow {
    height: 30px;
    line-height: 30px;
    background-color: #f6fafd;
    text-align: center;
  }

  .table-lastrow td:last-child {
    border-right: 1px solid #c8e5fa;
  }

  .table-lastrow td:first-child {
    border-left: 1px solid #c8e5fa;
  }

  .addtotal {
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .addtotal td:nth-of-type(1) {
    border-left: 1px solid #c8e5fa;
    border-right: 1px solid #c8e5fa;
  }

  .addtotal td:nth-of-type(3) {
    border-left: 1px solid #c8e5fa;
    border-right: 1px solid #c8e5fa;
  }

  .addtotal td:last-child {
    border-right: 1px solid #c8e5fa;
  }

  .totalscore {
    height: 50px;
    background-color: #f6fafd;
    line-height: 50px;
    text-align: center;
    font-weight: 600;
  }

  .totalscore td {
    border-bottom: 1px solid #c8e5fa;
  }

  .totalscore td:nth-of-type(1) {
    border-left: 1px solid #c8e5fa;
    border-right: 1px solid #c8e5fa;
  }

  .totalscore td:nth-of-type(2) {
    border-right: 1px solid #c8e5fa;
  }

通过以上，就能达到本文开篇效果图的布局了。