html開發(fā)筆記20-合并單元格-列和行

、什么是合并單元格？

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

二、怎么合并？

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

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

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

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

4、重點：合并單元格只和 td 標(biāo)簽有關(guān)系：

（1）合并列：是左右合并，在左側(cè)的 td 標(biāo)簽中添加 colspan="2" 要合并的 td 的數(shù)量。

（2）合并行：是上下合并，在上面的 td 標(biāo)簽中添加 rowspan="2" 要合并的td的數(shù)量。

（3）合并完后刪除多余的 td 標(biāo)簽。

三、兩個屬性的用法

1、合并列的用法：

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

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


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

2、合并行的用法：

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

完整代碼：↓

數(shù)據(jù)密集型文檔和網(wǎng)頁中，復(fù)雜表格結(jié)構(gòu)是必不可少的。它們幫助用戶理解大量的信息和數(shù)據(jù)關(guān)系。本文將詳細(xì)介紹復(fù)雜表格的設(shè)計要點，提供實用的例子，并展示如何使用HTML代碼來創(chuàng)建這些表格。

復(fù)雜表格的設(shè)計要點

1. 清晰的層次結(jié)構(gòu)

復(fù)雜表格應(yīng)該有明確的層次結(jié)構(gòu)，以便用戶可以輕松地從總體到細(xì)節(jié)地閱讀信息。這通常通過使用標(biāo)題行和列來實現(xiàn)。

2. 一致的對齊

數(shù)據(jù)應(yīng)該根據(jù)其類型進(jìn)行對齊，例如，數(shù)字通常右對齊以便于比較，而文本則左對齊。

3. 合理的分隔

使用邊框和底色來區(qū)分不同的行和列，以增強(qiáng)可讀性。

4. 簡潔的標(biāo)注

對于包含復(fù)雜數(shù)據(jù)的表格，應(yīng)該提供清晰的標(biāo)注和腳注，以便用戶理解數(shù)據(jù)的來源和含義。

表格實例與HTML代碼

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

這個表格顯示了一個團(tuán)隊成員在上半年和下半年的表現(xiàn)評估。

<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>優(yōu)秀</td>
      <td>優(yōu)秀</td>
      <td>良好</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>合格</td>
      <td>良好</td>
      <td>良好</td>
      <td>優(yōu)秀</td>
    </tr>
  </tbody>
</table>

實例 2: 帶有子標(biāo)題的復(fù)雜表格

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

<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>財務(wù)報告</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: 具有行跨度的表格

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

<table border="1">
  <thead>
    <tr>
      <th>功能</th>
      <th>支持的設(shè)備</th>
      <th>兼容性</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">視頻播放</td>
      <td>手機(jī)</td>
      <td>高</td>
    </tr>
    <tr>
      <td>平板</td>
      <td>高</td>
    </tr>
    <tr>
      <td>電腦</td>
      <td>中</td>
    </tr>
    <tr>
      <td rowspan="2">音頻播放</td>
      <td>手機(jī)</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>

最佳實踐

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

復(fù)雜表格結(jié)構(gòu)是展示和理解多維數(shù)據(jù)的強(qiáng)大工具。通過遵循上述設(shè)計原則和實例，你可以創(chuàng)建清晰、有效的表格來提高你的數(shù)據(jù)呈現(xiàn)能力。

考自下列文章

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

目標(biāo)樣式

合并后樣式

來源數(shù)據(jù)

獲取到后臺返回的數(shù)據(jù)再經(jīng)過前端處理
注意 [processId] [dimensionTag] 是參與合并的關(guān)鍵字段

[
    {
        "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": "管理指標(biāo)",
        "dimensionTag": "1499255834195238914管理指標(biāo)",
        "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": "管理指標(biāo)",
        "dimensionTag": "1499255834996350977管理指標(biāo)",
        "nature": "02",
        "name": "12",
        "statusRemark": "12",
        "scoreStand": "12",
        "source": "12",
        "weight": 0.1,
        "status": "-",
        "remark": "-",
        "index": 2,
        "rowIndex": 7
    }
]

將數(shù)據(jù)按照字段[processId] [dimensionTag]進(jìn)行處理

// 按照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])
    }
  }
},

根據(jù)頁面展示需要,控制哪一些列上的數(shù)據(jù)需要進(jìn)行合并

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
            }
          }
        }
      }
    }
  }
},

處理樣式

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

樣式錯亂

在el-table上添加 [row-class-name] [@cell-mouse-enter] [@cell-mouse-leave]并實現(xiàn)對應(yīng)方法

<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（下拉列表、多行文字輸入）-零基礎(chǔ)自學(xué)網(wǎng)頁制作
下一篇：手把手教你利用Python爬蟲采集二次元美女壁紙

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商