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

、什么是合并單元格？

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

二、怎么合并？

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

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

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

3、合并后的單元格（行或列）必然會(huì)自動(dòng)多出來(lái)一個(gè)，需要手動(dòng)刪掉。

4、重點(diǎn)：合并單元格只和 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)簽。

三、兩個(gè)屬性的用法

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列。

完整代碼：↓

考自下列文章

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

目標(biāo)樣式

合并后樣式

來(lái)源數(shù)據(jù)

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

[
    {
        "processId": "1499255834195238914",
        "currentProcessInfoId": "1499255834245570561",
        "flowType": "01",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "01",
        "dimensionName": "重點(diǎn)-測(cè)試",
        "dimensionTag": "1499255834195238914重點(diǎn)-測(cè)試",
        "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": "日常-測(cè)試",
        "dimensionTag": "1499255834195238914日常-測(cè)試",
        "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": "日常-測(cè)試",
        "dimensionTag": "1499255834195238914日常-測(cè)試",
        "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": "重點(diǎn)-測(cè)試",
        "dimensionTag": "1499255834996350977重點(diǎn)-測(cè)試",
        "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": "日常-測(cè)試",
        "dimensionTag": "1499255834996350977日常-測(cè)試",
        "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": "日常-測(cè)試",
        "dimensionTag": "1499255834996350977日常-測(cè)試",
        "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ù)頁(yè)面展示需要,控制哪一些列上的數(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
            }
          }
        }
      }
    }
  }
},

處理樣式

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

樣式錯(cuò)亂

在el-table上添加 [row-class-name] [@cell-mouse-enter] [@cell-mouse-leave]并實(shí)現(xiàn)對(duì)應(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>

完整代碼

格是組織和顯示數(shù)據(jù)的一種有效方式，無(wú)論是在文檔中還是網(wǎng)頁(yè)上。良好的表格設(shè)計(jì)可以提高信息的可讀性和易理解性。本文將詳細(xì)介紹如何創(chuàng)建和格式化表格，并提供一些實(shí)例。

創(chuàng)建表格

在Word或類似文檔編輯器中創(chuàng)建表格

插入表格：打開文檔編輯器，例如Microsoft Word，找到“插入”選項(xiàng)卡，點(diǎn)擊“表格”，選擇需要的行數(shù)和列數(shù)。
輸入數(shù)據(jù)：點(diǎn)擊表格中的單元格，開始輸入數(shù)據(jù)。可以使用Tab鍵在單元格之間跳轉(zhuǎn)。
調(diào)整行列：根據(jù)需要調(diào)整行高和列寬。在Word中，可以通過(guò)拖動(dòng)表格邊框來(lái)調(diào)整，或者點(diǎn)擊右鍵選擇“表格屬性”進(jìn)行精確設(shè)置。

在HTML中創(chuàng)建表格

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

<table> 標(biāo)簽用于創(chuàng)建表格。
<tr> 標(biāo)簽定義表格中的行。
<th> 標(biāo)簽定義表頭單元格，通常加粗居中顯示。
<td> 標(biāo)簽定義標(biāo)準(zhǔn)單元格。

格式化表格

格式化表格包括調(diào)整表格的樣式、布局和顏色等，以提高其可讀性和美觀性。

文檔編輯器中的格式化

邊框樣式：可以為表格或單個(gè)單元格設(shè)置邊框樣式、顏色和寬度。在Word中，選擇表格，然后在“設(shè)計(jì)”選項(xiàng)卡中選擇邊框樣式。
單元格填充：為了區(qū)分不同的行或列，可以對(duì)單元格進(jìn)行顏色填充。在Word中，選擇單元格或行列，然后在“布局”選項(xiàng)卡中選擇“填充”。
文本對(duì)齊：文本對(duì)齊方式可以設(shè)置為左對(duì)齊、居中或右對(duì)齊。選擇單元格后，在“布局”選項(xiàng)卡中選擇對(duì)齊方式。
合并單元格：有時(shí)需要將多個(gè)單元格合并為一個(gè)單元格以顯示標(biāo)題或其他信息。選擇要合并的單元格，然后點(diǎn)擊“合并單元格”。

HTML中的格式化

在HTML中，格式化通常通過(guò)CSS完成。

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

border-collapse 設(shè)置為 collapse 以消除單元格之間的間隙。
th, td 設(shè)置了邊框、填充和文本對(duì)齊。
th 設(shè)置了表頭的背景色。
tr:nth-child(even) 為偶數(shù)行設(shè)置了條紋效果。

實(shí)例

文檔編輯器實(shí)例

假設(shè)我們需要?jiǎng)?chuàng)建一個(gè)3x3的表格，顯示一個(gè)小型團(tuán)隊(duì)的成員信息。

插入一個(gè)3行3列的表格。
輸入數(shù)據(jù)：姓名、職位、郵箱。
設(shè)置第一行為表頭，加粗并填充淡藍(lán)色背景。
設(shè)置所有單元格的文本為居中對(duì)齊。
為表格添加外邊框，并為行添加細(xì)邊框。

HTML實(shí)例

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    width: 50%;
    border-collapse: collapse;
    margin: 25px 0;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>
</head>
<body>

<table>
  <tr>
    <th>Name</th>
    <th>Position</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Manager</td>
    <td>alice@example.com</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>Developer</td>
    <td>bob@example.com</td>
  </tr>
  <tr>
    <td>Charlie</td>
    <td>Designer</td>
    <td>charlie@example.com</td>
  </tr>
</table>

</body>
</html>

在這個(gè)HTML實(shí)例中，我們創(chuàng)建了一個(gè)帶有條紋效果的表格，表頭有綠色背景和白色文字，每個(gè)單元格都有適當(dāng)?shù)奶畛浜瓦吙颉?/p>

結(jié)論

創(chuàng)建和格式化表格是一項(xiàng)基本技能，無(wú)論是在文檔編輯器還是HTML中。一個(gè)良好格式化的表格不僅能有效傳達(dá)信息，還能提升整體文檔或網(wǎng)頁(yè)的美觀性和專業(yè)性。通過(guò)實(shí)踐這些技巧和使用示例作為參考，你可以創(chuàng)建出既實(shí)用又吸引人的表格。

在線咨詢

上一篇：PHP神器：輕松獲取網(wǎng)頁(yè)HTML元素
下一篇：face-api.js：在瀏覽器中進(jìn)行人臉識(shí)別的JavaScript接口

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商