场景

众所周知，在HTML中，可以使用 colspan 和 rowspan 属性来合并table表格的单元格。

colspan属性，用于指定单元格横跨的列数。通过设置 colspan 属性，你可以将一个单元格横跨多个列。

<td colspan="2">合并的单元格</td>

rowspan属性，用于指定单元格纵向跨越的行数。通过设置 rowspan 属性，你可以将一个单元格纵向跨越多个行。

<td rowspan="2">合并的单元格</td>

举例说明

<table>
    <tr>
      <td>单元格1</td>
      <td colspan="2"> colspan 合并</td>
    </tr>
    <tr>
      <td rowspan="2">rowspan 合并</td>
      <td>单元格2</td>
      <td>单元格3</td>
    </tr>
    <tr>
      <td>单元格4</td>
      <td>单元格5</td>
    </tr>
</table>

效果如图所示

通过结合使用colspan和rowspan属性，可以实现各种复杂的表格单元格合并效果。

遇到复杂的表格，单元格合并，可能有点麻烦。

那么，现在切入正题。借用Python代码轻松实现table单元格合并。

小妙招

1.新建 Microsoft Excel 工作表，绘制电子表格。

2.通过Python代码，将excel文件中的表格，转为html的table代码。

Python代码如下：

import re
from openpyxl import load_workbook
from openpyxl.cell import MergedCell


class to_html():
    def __init__(self, file, save_file, sheet_name):
        self.file = file  # 文件路径
        self.save_file = save_file  # html保存路径
        self.sheet_name = sheet_name  # sheet名

    def creat_html(self):
        wb = load_workbook(filename=self.file)
        sheet = wb[self.sheet_name]
        cell_dic = {}  # 用于储存 所有合并单元格的左上单元格对象
        col_width = {}  # 用于储存 所有列的列宽,px
        row_height = {}  # 用于储存 所有列的行高,px
        # 查询列宽
        for col in sheet.columns:
            pat = r"[A-Z]+"
            pat = re.compile(pat)
            colname = pat.findall(col[0].coordinate)[0]  # 分离字母 和数字，取出列字母名称
            px = round(sheet.column_dimensions[colname].width * 5)  # 读出列宽换算为像素
            col_width[colname] = px
        # 查询行高
        for row in sheet.rows:
            pat = r"[A-Z]+(\d+)"
            pat = re.compile(pat)
            rowid = int(pat.findall(row[0].coordinate)[0])  # 分离字母 和数字，取出行数字序号
            px = sheet.row_dimensions[rowid].height  # 读出行高换算为像素
            if px == None:
                px = 13.5
            row_height[str(rowid)] = px

        # 找出所有合并区域的行高，列宽，向右合并距离，向下合并距离
        for merged_range in sheet.merged_cells.ranges:
            now_width = 0  # 定义列宽
            now_height = 0  # 定义行高
            for i in range(merged_range.min_col, merged_range.max_col + 1):
                coord = sheet.cell(row=1, column=i).coordinate  # 位置标识，例如：A1
                pat = r"[A-Z]+"
                pat = re.compile(pat)
                colname = pat.findall(coord)[0]  # 分离字母 和数字，取出列字母名称
                now_width = now_width + col_width[colname]
            for i in range(merged_range.min_row, merged_range.max_row + 1):
                coord = sheet.cell(row=i, column=1).coordinate  # 位置标识，例如：A1
                pat = r"[A-Z]+(\d+)"
                pat = re.compile(pat)
                colindex = pat.findall(coord)[0]  # 分离字母 和数字，取出列数字名称
                now_height = now_height + row_height[colindex]

            now_width = int(now_width)  # 合并单元格列宽（所有子单元格相加）
            now_height = int(now_height)  # 合并单元格行高（所有子单元格相加）

            cell = sheet.cell(row=merged_range.min_row, column=merged_range.min_col)  # 选择合并区域左上单元格
            colspan = merged_range.max_col - merged_range.min_col + 1  # 向右合并长度
            rowspan = merged_range.max_row - merged_range.min_row + 1  # 向下合并长度
            cell_dic[cell] = (now_height, now_width, colspan, rowspan)

        html = '''<table border="1">'''
        # 开始写入数据到table标签
        for row in sheet.rows:
            tr = '''<tr>'''
            for cell in row:
                td = ""
                if cell in cell_dic:  # 判断是否为合并单元格左上单元格
                    if cell.value == None:
                        text = ''
                    else:
                        text = cell.value

                    if cell.alignment.vertical != None:
                        vertical = f'''vertical-align: {cell.alignment.vertical};'''  # 水平位置
                    else:
                        vertical = ''
                    if cell.alignment.horizontal != None:
                        horizontal = f'''text-align: {cell.alignment.horizontal};'''  # 垂直位置
                    else:
                        horizontal = ''

                    font_size = str(int(cell.font.size) + 3)  # 字体大小
                    font_weight = '700' if cell.font.b else '400'  # 字体是否加粗
                    style = f'''"color: rgb(0, 0, 0); font-size: {font_size}px; font-weight: {font_weight}; font-style: normal;{vertical}{horizontal}"'''
                    td = f'''<td height="{cell_dic[cell][0]}" width="{cell_dic[cell][1]}" colspan="{cell_dic[cell][2]}" rowspan="{cell_dic[cell][3]}" style={style}>{text}</td>'''
                else:
                    if not isinstance(cell, MergedCell):  # 判断该单元格是否为合并单元格
                        if cell.alignment.vertical != None:
                            vertical = f'''vertical-align: {cell.alignment.vertical};'''  # 水平位置
                        else:
                            vertical = ''
                        if cell.alignment.horizontal != None:
                            horizontal = f'''text-align: {cell.alignment.horizontal};'''  # 垂直位置
                        else:
                            horizontal = ''
                        pat = r"([A-Z]+)(\d+)"
                        pat = re.compile(pat)
                        cell_name = pat.findall(cell.coordinate)[0][0]
                        cell_index = pat.findall(cell.coordinate)[0][1]
                        font_size = str(int(cell.font.size) + 3)  # 字体大小
                        font_weight = '700' if cell.font.b else '400'  # 字体是否加粗
                        style = f'''"color: rgb(0, 0, 0); font-size: {font_size}px; font-weight: {font_weight}; font-style: normal;{vertical}{horizontal}"'''
                        if cell.value != None:
                            td = f'''<td height="{row_height[cell_index]}" width="{col_width[cell_name]}" style={style} >{cell.value}</td>'''
                        else:
                            td = f'''<td height="{row_height[cell_index]}" width="{col_width[cell_name]}"></td>'''
                tr = tr + td

            tr = tr + '''</tr>'''
            html = html + tr

        html = html + '''</table>'''
        with open(self.save_file, 'w', encoding='utf-8') as f:
            f.write(html)


if __name__ == '__main__':
    data = to_html("合并单元格.xlsx", "合并单元格.html", "Sheet1")
    data.creat_html()

生成的合并单元格.html代码， 在页面显示如下：

通过Python生成的HTML代码如下：

<table border="1">
  <tr>
    <td height="135" width="65" colspan="1" rowspan="10"
      style="color: rgb(0, 0, 0); font-size: 14px; font-weight: 400; font-style: normal;vertical-align: center;text-align: center;">
      成员名单</td>
    <td height="27" width="65" colspan="1" rowspan="2"
      style="color: rgb(0, 0, 0); font-size: 14px; font-weight: 400; font-style: normal;vertical-align: center;text-align: center;">
      序号</td>
    <td height="27" width="65" colspan="1" rowspan="2"
      style="color: rgb(0, 0, 0); font-size: 14px; font-weight: 400; font-style: normal;vertical-align: center;text-align: center;">
      姓名</td>
    <td height="13" width="195" colspan="3" rowspan="1"
      style="color: rgb(0, 0, 0); font-size: 14px; font-weight: 400; font-style: normal;vertical-align: center;text-align: center;">
      时间</td>
    <td height="27" width="76" colspan="1" rowspan="2"
      style="color: rgb(0, 0, 0); font-size: 14px; font-weight: 400; font-style: normal;vertical-align: center;text-align: center;">
      工作单位及职务</td>
    <td height="27" width="65" colspan="1" rowspan="2"
      style="color: rgb(0, 0, 0); font-size: 14px; font-weight: 400; font-style: normal;vertical-align: center;text-align: center;">
      备注</td>
    <td height="27" width="65" colspan="1" rowspan="2"
      style="color: rgb(0, 0, 0); font-size: 14px; font-weight: 400; font-style: normal;vertical-align: center;text-align: center;">
      操作</td>
  </tr>
  <tr>
    <td height="13.5" width="65"
      style="color: rgb(0, 0, 0); font-size: 14px; font-weight: 400; font-style: normal;vertical-align: center;text-align: center;">
      年</td>
    <td height="13.5" width="65"
      style="color: rgb(0, 0, 0); font-size: 14px; font-weight: 400; font-style: normal;vertical-align: center;text-align: center;">
      月</td>
    <td height="13.5" width="65"
      style="color: rgb(0, 0, 0); font-size: 14px; font-weight: 400; font-style: normal;vertical-align: center;text-align: center;">
      日</td>
  </tr>
  <tr>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="76"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
  </tr>
  <tr>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="76"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
  </tr>
  <tr>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="76"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
  </tr>
  <tr>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="76"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
  </tr>
  <tr>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="76"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
  </tr>
  <tr>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="76"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
  </tr>
  <tr>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="76"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
  </tr>
  <tr>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="76"></td>
    <td height="13.5" width="65"></td>
    <td height="13.5" width="65"></td>
  </tr>
</table>

最后的话

以上，如果对你有用的话，不妨点赞收藏关注一下，谢谢 🙏

😊 微信公众号: OrzR3

💖 不定期更新一些技术类，生活类，读书类的文章。