# 在 “Table render hooks” 中实现表格单元格的合并

**URL:** <https://discourse.gohugo.io/t/table-render-hooks/52092>\
**Category:** 中文\
**Created:** [October 23, 2024, 3:01pm UTC](https://discourse.gohugo.io/t/table-render-hooks/52092 "2024-10-23T15:01:04Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![overlookart](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/overlookart/32/23087_2.png) [@overlookart](https://discourse.gohugo.io/u/overlookart)\
**Post date:** [October 23, 2024, 3:01pm UTC](https://discourse.gohugo.io/t/table-render-hooks/52092/1 "2024-10-23T15:01:04Z")

</div>

> 灵感来自 [Swift-DocC Adding Tables of Data](https://www.swift.org/documentation/docc/adding-tables-of-data)  
> hugo 的版本为： **0.136.4**

// layouts/\_default/\_markup/render-table.html

```html
<!-- 表格的行数 -->
{{- $rowCount := len .TBody }}
<!-- 表格的列数 -->
{{- $colCount := len (index .THead 0) }}

<table {{- range $k, $v := .Attributes }}
{{- if $v }}
  {{- printf " %s=%q" $k $v | safeHTMLAttr }}
{{- end }}
{{- end }}>

    <thead>
    {{- range .THead }}
      <tr>
        {{- range . }}
          <th
            {{- with .Alignment }}
              {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
            {{- end -}}
          >
            {{- .Text -}}
          </th>
        {{- end }}
      </tr>
    {{- end }}
    </thead>
    <tbody>
    {{- $TBody := .TBody }}
    
    <!-- 遍历每一行 -->
    {{- range $rowIndex, $row := .TBody }}
        <!-- 获取下一行 -->
        {{ $nextRowIndex := add $rowIndex 1 }}
        {{ $nextRow := index $TBody $nextRowIndex }}
      <tr>
        <!-- 遍历当前行的每一列 -->
        {{- range $colIndex, $col := $row }}
            <!-- 获取下一行的这列的单元格 -->
            {{ $nextRowCell := index $nextRow $colIndex }}
            <!-- 获取这一行的下一列单元格 -->
            {{ $nextColIndex := add $colIndex 1 }}
            {{ $nextColCell := index $row $nextColIndex }}
            {{- if and (ne $col.Text "^") (ne $col.Text "&lt;") }}
                <!-- 纵向合并单元格的数量 -->
                {{ $rowspan := 1 }}
                <!-- 横向合并单元格的数量 -->
                {{ $colspan := 1 }}
                <!-- 纵向合并单元格的处理逻辑 -->
                <!-- 如果下一行所在该列的单元格的 Text 值是 "^"，则进行纵向合并 -->
                {{ if eq $nextRowCell.Text "^" }}
                    <!-- 纵向合并单元格的数量增加 -->
                    {{ $rowspan = add $rowspan 1 }}
                    <!-- 再向下查找，直到找到第一个不是 "^" 的单元格，合并单元格结束 -->
                    {{ $newRowIndex := add $nextRowIndex 1 }}
                    {{ $afterCount := sub $rowCount $newRowIndex }}
                    {{ range after $afterCount $TBody }}
                        {{ $tcol := index . $colIndex }}
                        {{- if eq $tcol.Text "^" }}
                            {{- $rowspan = add $rowspan 1 -}}
                        {{ else }}
                            {{- break -}}
                        {{ end }}
                    {{ end }}
                {{end}}
                <!-- 横向合并单元格的处理逻辑 -->
                <!-- 如果下一行的该列单元格的 Text 值是 "&lt;"，则进行横向合并 -->
                {{ if eq $nextColCell.Text "&lt;" }}
                    <!-- 横向合并单元格的数量增加 -->
                    {{ $colspan = add $colspan 1 }}
                    <!-- 再向右查找，直到找到第一个不是 "&lt;" 的单元格，合并单元格结束 -->
                    {{ $newColIndex := add $nextColIndex 1 }}
                    {{ $afterCount := sub $colCount $newColIndex }}
                    {{ range $tcol := after $afterCount $row }}
                        {{- if eq $tcol.Text "&lt;" }}
                            {{- $colspan = add $colspan 1 -}}
                        {{ else }}
                            {{- break -}}
                        {{ end }}
                    {{ end }}
                {{end}}
                {{ $style := printf "text-align: %s" $col.Alignment }}
                <td rowspan="{{ $rowspan }}" colspan="{{ $colspan }}" style="{{ $style }}">
                {{- $col.Text -}}
                </td>
            {{- end }}
        {{- end }}
      </tr>
    {{- end }}
  </tbody>
</table>

```

效果图：

 ![Xnip2024-10-23_22-57-50](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/a/6/a6a565623ca6efb0ca227f137499b0e40808f226.jpeg)

或访问我的博客 [Test Markdown Render](https://overlookart-github-io.pages.dev/markdown/test/) 查看效果