html開發筆記20-合并單元格-列和行

、什么是合并單元格？

一個表格中分為行和列，有時候你經常在網頁中看到類似這樣的表格，有時候是合并了列，有時候是合并了行。那么這個是怎么做的？也是通過下面的方法實現的。

二、怎么合并？

向單元格添加屬性即可實現，合并列和行的屬性不一樣

1、合并列的屬性：clospan="2" //要合并幾列數字就是幾

2、合并行的屬性：rowspan="2" //同理，要合并幾行數字就是幾

3、合并后的單元格（行或列）必然會自動多出來一個，需要手動刪掉。

4、重點：合并單元格只和 td 標簽有關系：

（1）合并列：是左右合并，在左側的 td 標簽中添加 colspan="2" 要合并的 td 的數量。

（2）合并行：是上下合并，在上面的 td 標簽中添加 rowspan="2" 要合并的td的數量。

（3）合并完后刪除多余的 td 標簽。

三、兩個屬性的用法

1、合并列的用法：

（1）首先確定你要合并的單元格在第幾行第幾列，然后找到它，從他的td標簽中添加屬性。

例如要合并第4行的，第4和第5列：


<tr>
    <td>第三節</td>
    <td>html</td>
    <td>css</td>
    <td colspan="2">php</td> <!-- 合并 列 的用法-->
    <td>php</td>
  </tr>

2、合并行的用法：

例如下面：合并第3行和第4行的第1列。

完整代碼：↓

數據密集型文檔和網頁中，復雜表格結構是必不可少的。它們幫助用戶理解大量的信息和數據關系。本文將詳細介紹復雜表格的設計要點，提供實用的例子，并展示如何使用HTML代碼來創建這些表格。

復雜表格的設計要點

1. 清晰的層次結構

復雜表格應該有明確的層次結構，以便用戶可以輕松地從總體到細節地閱讀信息。這通常通過使用標題行和列來實現。

2. 一致的對齊

數據應該根據其類型進行對齊，例如，數字通常右對齊以便于比較，而文本則左對齊。

3. 合理的分隔

使用邊框和底色來區分不同的行和列，以增強可讀性。

4. 簡潔的標注

對于包含復雜數據的表格，應該提供清晰的標注和腳注，以便用戶理解數據的來源和含義。

表格實例與HTML代碼

實例 1: 帶有合并單元格的表格

這個表格顯示了一個團隊成員在上半年和下半年的表現評估。

<table border="1">
  <thead>
    <tr>
      <th rowspan="2">成員</th>
      <th colspan="2">上半年</th>
      <th colspan="2">下半年</th>
    </tr>
    <tr>
      <th>項目1</th>
      <th>項目2</th>
      <th>項目1</th>
      <th>項目2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>良好</td>
      <td>優秀</td>
      <td>優秀</td>
      <td>良好</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>合格</td>
      <td>良好</td>
      <td>良好</td>
      <td>優秀</td>
    </tr>
  </tbody>
</table>

實例 2: 帶有子標題的復雜表格

這個表格顯示了一個公司季度財務報告的簡化版本。

<table border="1">
  <thead>
    <tr>
      <th></th>
      <th>Q1</th>
      <th></th>
      <th>Q2</th>
      <th></th>
      <th>Q3</th>
      <th></th>
      <th>Q4</th>
      <th></th>
    </tr>
    <tr>
      <th>財務報告</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2020年</td>
      <td>50</td>
      <td>30</td>
      <td>70</td>
      <td>40</td>
      <td>60</td>
      <td>50</td>
      <td>80</td>
      <td>60</td>
    </tr>
    <tr>
      <td>2021年</td>
      <td>55</td>
      <td>35</td>
      <td>75</td>
      <td>45</td>
      <td>65</td>
      <td>55</td>
      <td>85</td>
      <td>65</td>
    </tr>
  </tbody>
</table>

實例 3: 具有行跨度的表格

這個表格展示了不同設備對于特定功能的支持程度。

<table border="1">
  <thead>
    <tr>
      <th>功能</th>
      <th>支持的設備</th>
      <th>兼容性</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">視頻播放</td>
      <td>手機</td>
      <td>高</td>
    </tr>
    <tr>
      <td>平板</td>
      <td>高</td>
    </tr>
    <tr>
      <td>電腦</td>
      <td>中</td>
    </tr>
    <tr>
      <td rowspan="2">音頻播放</td>
      <td>手機</td>
      <td>高</td>
    </tr>
    <tr>
      <td>智能音箱</td>
      <td>高</td>
    </tr>
    <tr>
      <td rowspan="2">文檔編輯</td>
      <td>電腦</td>
      <td>高</td>
    </tr>
    <tr>
      <td>平板</td>
      <td>中</td>
    </tr>
  </tbody>
</table>

最佳實踐

簡化設計：避免使用過多的裝飾性元素，如陰影或漸變。
數據可比性：確保相似性質的數據在表格中是可比較的。
注釋和說明：在表格下方提供必要的注釋和數據來源說明。
測試：在不同的設備和屏幕尺寸上測試表格的顯示效果。

復雜表格結構是展示和理解多維數據的強大工具。通過遵循上述設計原則和實例，你可以創建清晰、有效的表格來提高你的數據呈現能力。

考自下列文章

https://blog.csdn.net/u013558749/article/details/82257168 (element-ui 實現行合并)
https://www.cnblogs.com/guwufeiyang/p/12850088.html	(合并后樣式的處理)

目標樣式

合并后樣式

來源數據

獲取到后臺返回的數據再經過前端處理
注意 [processId] [dimensionTag] 是參與合并的關鍵字段

[
    {
        "processId": "1499255834195238914",
        "currentProcessInfoId": "1499255834245570561",
        "flowType": "01",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "01",
        "dimensionName": "重點-測試",
        "dimensionTag": "1499255834195238914重點-測試",
        "nature": "01",
        "name": "1212",
        "statusRemark": "1212",
        "scoreStand": "1212",
        "source": "1212",
        "weight": 0.3,
        "status": "Y",
        "remark": "-",
        "index": 1,
        "rowIndex": 0
    },
    {
        "processId": "1499255834195238914",
        "currentProcessInfoId": "1499255834245570561",
        "flowType": "01",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "01",
        "dimensionName": "日常-測試",
        "dimensionTag": "1499255834195238914日常-測試",
        "nature": "01",
        "name": "TEST",
        "statusRemark": "100",
        "scoreStand": "100",
        "source": "100",
        "weight": 0.3,
        "status": "Y",
        "remark": "-",
        "index": 1,
        "rowIndex": 1
    },
    {
        "processId": "1499255834195238914",
        "currentProcessInfoId": "1499255834245570561",
        "flowType": "01",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "01",
        "dimensionName": "日常-測試",
        "dimensionTag": "1499255834195238914日常-測試",
        "nature": "01",
        "name": "12",
        "statusRemark": "12",
        "scoreStand": "12",
        "source": "12",
        "weight": 0.3,
        "status": "Y",
        "remark": "-",
        "index": 1,
        "rowIndex": 2
    },
    {
        "processId": "1499255834195238914",
        "currentProcessInfoId": "1499255834245570561",
        "flowType": "01",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "01",
        "dimensionName": "管理指標",
        "dimensionTag": "1499255834195238914管理指標",
        "nature": "02",
        "name": "12",
        "statusRemark": "12",
        "scoreStand": "12",
        "source": "12",
        "weight": 0.1,
        "status": "Y",
        "remark": "-",
        "index": 1,
        "rowIndex": 3
    },
    {
        "processId": "1499255834996350977",
        "currentProcessInfoId": null,
        "flowType": "02",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "00",
        "dimensionName": "重點-測試",
        "dimensionTag": "1499255834996350977重點-測試",
        "nature": "01",
        "name": "1212",
        "statusRemark": "1212",
        "scoreStand": "1212",
        "source": "1212",
        "weight": 0.3,
        "status": "-",
        "remark": "-",
        "index": 2,
        "rowIndex": 4
    },
    {
        "processId": "1499255834996350977",
        "currentProcessInfoId": null,
        "flowType": "02",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "00",
        "dimensionName": "日常-測試",
        "dimensionTag": "1499255834996350977日常-測試",
        "nature": "01",
        "name": "TEST",
        "statusRemark": "100",
        "scoreStand": "100",
        "source": "100",
        "weight": 0.3,
        "status": "-",
        "remark": "-",
        "index": 2,
        "rowIndex": 5
    },
    {
        "processId": "1499255834996350977",
        "currentProcessInfoId": null,
        "flowType": "02",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "00",
        "dimensionName": "日常-測試",
        "dimensionTag": "1499255834996350977日常-測試",
        "nature": "01",
        "name": "12",
        "statusRemark": "12",
        "scoreStand": "12",
        "source": "12",
        "weight": 0.3,
        "status": "-",
        "remark": "-",
        "index": 2,
        "rowIndex": 6
    },
    {
        "processId": "1499255834996350977",
        "currentProcessInfoId": null,
        "flowType": "02",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "00",
        "dimensionName": "管理指標",
        "dimensionTag": "1499255834996350977管理指標",
        "nature": "02",
        "name": "12",
        "statusRemark": "12",
        "scoreStand": "12",
        "source": "12",
        "weight": 0.1,
        "status": "-",
        "remark": "-",
        "index": 2,
        "rowIndex": 7
    }
]

將數據按照字段[processId] [dimensionTag]進行處理

// 按照dimensionTag合并行
getDimensionNumber() {
  this.dimensionIndexArr = []
  let DimensionObj = {}
  this.dataList.forEach((element, index) => {
    element.rowIndex = index
    if (DimensionObj[element.dimensionTag]) {
      DimensionObj[element.dimensionTag].push(index)
    } else {
      DimensionObj[element.dimensionTag] = []
      DimensionObj[element.dimensionTag].push(index)
    }
  })
  for (let k in DimensionObj) {
    if (DimensionObj[k].length > 1) {
      this.dimensionIndexArr.push(DimensionObj[k])
    }
  }
},
// 按照processId合并行
getRecordNumber() {
  this.recordIndexArr=[]
  let OrderObj = {}
  this.dataList.forEach((element, index) => {
    element.rowIndex = index
    if (OrderObj[element.processId]) {
      OrderObj[element.processId].push(index)
    } else {
      OrderObj[element.processId] = []
      OrderObj[element.processId].push(index)
    }
  })
  for (let k in OrderObj) {
    if (OrderObj[k].length > 1) {
      this.recordIndexArr.push(OrderObj[k])
    }
  }
},

根據頁面展示需要,控制哪一些列上的數據需要進行合并

objectSpanMethod({row, column, rowIndex, columnIndex}) {
  if (columnIndex === 0 || columnIndex === 1 || columnIndex >= 9) {
    for (let i = 0; i < this.recordIndexArr.length; i++) {
      let element = this.recordIndexArr[i]
      for (let j = 0; j < element.length; j++) {
        let item = element[j]
        if (rowIndex == item) {
          if (j == 0) {
            return {
              rowspan: element.length,
              colspan: 1
            }
          } else if (j != 0) {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }
    }
  }
  if (columnIndex === 2) {
    for (let i = 0; i < this.dimensionIndexArr.length; i++) {
      let element = this.dimensionIndexArr[i]
      for (let j = 0; j < element.length; j++) {
        let item = element[j]
        if (rowIndex == item) {
          if (j == 0) {
            return {
              rowspan: element.length,
              colspan: 1
            }
          } else if (j != 0) {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }
    }
  }
},

處理樣式

完成合并后會改變框架的樣式,需要修復

樣式錯亂

在el-table上添加 [row-class-name] [@cell-mouse-enter] [@cell-mouse-leave]并實現對應方法

<el-table
  ref="table"
  v-loading="dataListLoading"
  :data="dataList"
  border
  :span-method="objectSpanMethod"
  :row-class-name="tableRowClassName"
  @cell-mouse-enter="cellMouseEnter"
  @cell-mouse-leave="cellMouseLeave"
  style="width: 100%;margin-top: 16px"
>
    .......
</el-table>

tableRowClassName({row, rowIndex}) {
  let arr = this.hoverOrderArr
  for (let i = 0; i < arr.length; i++) {
    if (rowIndex === arr[i]) {
      return 'success-row'
    }
  }
},
cellMouseEnter(row, column, cell, event) {
  this.rowIndex = row.rowIndex
  this.hoverOrderArr = []
  this.recordIndexArr.forEach((element) => {
    if (element.indexOf(this.rowIndex) >= 0) {
      this.hoverOrderArr = element
    }
  })
},
cellMouseLeave(row, column, cell, event) {
  this.rowIndex = '-1'
  this.hoverOrderArr = []
},

<style scoped>
/deep/ .el-table .success-row {
  background: #ecf4fe;
}
</style>

完整代碼

在線咨詢

上一篇：HTML表單3（下拉列表、多行文字輸入）-零基礎自學網頁制作
下一篇：手把手教你利用Python爬蟲采集二次元美女壁紙

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商