Markdown 表格单元格合并（跨行、跨列）及文本换行

斐夷所非

已于 2024-09-03 18:08:18 修改

阅读量8.3k

点赞数 10

分类专栏： document 文章标签： markdown

于 2024-06-06 14:25:03 首次发布

本文链接：https://blog.csdn.net/u013669912/article/details/139498417

版权

document 专栏收录该内容

28 篇文章

订阅专栏

Markdown 没有原生支持合并单元格的语法，Markdown 编辑器中快捷表格模版仅适合创建“中规中矩“的表格，但可以通过 Markdown 兼容的 HTML 代码实现自定义区域单元格合并。

在这里插入图片描述

1、HTML 表格中的两种单元格

数据单元格 (table datagrid) - 包含数据（使用 <td> 元素创建）

<td> 标签定义 HTML 表格中的标准数据单元格，通常用于表示表格中的内容。默认情况下，<td> 元素中的文本是普通左对齐。
标题单元格 (table header) - 包含标题信息（使用 <th> 元素创建）

<th> 标签定义 HTML 表格中的标题单元格，通常用于表示表格中的标题行。默认情况下，<th> 元素中的文本是粗体居中。

<td> 元素和 <th> 元素可以只用一种，也可以一起用。

1.1 HTML 表格基本语法结构

HTML 语言中表格的语法结构是一行一格。

元素含义

`<table>` 表格开始	`</table>` 表格结束
`<capital>` 标题开始	`</capital>` 标题结束
`<tr>` 表格行 (table row) 开始	`</tr>` 表格行结束
`<td>` 单元格 (table datagrid) 开始	`</td>` 单元格结束
`<th>` 表头(table header) 开始	`</th>` 表头结束

1.2 HTML 表格宽度颜色选项

选项位于开始标签内，后括号之前，多个选项以空格间隔

元素	含义
`width="100px"` `width="10%"`	列宽的两种表达方式 1、以具体的像素（px）值来显示宽度，不受窗口大小影响，始终保持固定的像素宽度。 2、相对于其父元素的宽度的百分比。元素的宽度将会根据父元素的实际宽度进行调整。
`bgcolor="lightblue"` `bgcolor=#FFFFFF`	背景颜色（对表头无效）使用颜色名称或 6 位 16 进制格式颜色代码

1.3 HTML 文本选项

元素	含义
`<b>`	开始加粗
`</b>`	停止加粗（后续为空可省略）
`<i>`	开始斜体
`</i>`	停止斜体（后续为空可省略）
`<mark>`	开始高亮
`</mark>`	停止高亮（后续为空可省略）
`<br>`	换行
`<p>`	段落标签将文本包裹在 `<p></p>` 标签之间，每个 `<p>` 元素默认会在前后增加一定间距
`align="left"`	居左
`align="center"`	居中
`align="right"`	居右
`wrap="wrap"`	自动换行
`nowrap="nowrap"`	不换行

1.4 HTML 表格行列合并选项

元素	含义
`colspan=x`	水平跨列合并（ x 为列数）
`rowspan=y`	竖直跨行合并（ y 为行数）

2、示例

2.1 使用 HTML `<td>` 元素的 `colspan` 和 `rowspan`

<table>
  	<tr>
		<td align="left" >A B</td>
		<td align="left" >C D</td>
	<tr>
	<tr>
		<td align="left"  colspan="2">E F G H</td>
	<tr>
	<tr>
		<td align="left"  rowspan="2">I J M N </td>
		<td align="left" >K L</td>
	</tr>
	<tr>
		<td  align="left" >O P</td>
	</tr>
</table>

效果

A B	C D
E F G H
I J M N	K L
	O P

2.2 使用 HTML `<th>` 元素的 `colspan` 和 `rowspan`

<table>
  	<tr>
		<th align="left" >A B</th>
		<th align="left" >C D</th>
	<tr>
	<tr>
		<th align="left"  colspan="2">E F G H</th>
	<tr>
	<tr>
		<th align="left"  rowspan="2">I J M N </th>
		<td align="left" >K L</td>
	</tr>
	<tr>
		<td  align="left" >O P</td>
	</tr>
</table>

效果

A B	C D
E F G H
I J M N	K L
I J M N	O P

2.3 综合表格示例 by 午夜柴拖

<table>
<capital>Markdown 中 HTML 制表</capital>
<tr>
<th>普通表头</th>
<th align="right"><i>表头斜体右对齐</th>
<th colspan=2>表头横向合并</th>
<td width="120px">限制列宽为120px，超出会自动换行</td>
</tr>
<tr>
<th>左表头</th>
<td bgcolor=ffffcc>底色</td>
<td bgcolor=lightblue>部分<mark>高亮</mark></td>
<td><b>加粗</b><i>斜体</i></td>
<td width="60px">限制列宽为60px无效，小于120px，服从120px</td>
</tr>
<tr>
<td>表头不是必须一整行或一整列</td>
<td rowspan=2>纵向合并<br>字太多<br>会<br>换行</td>
<td rowspan=2 colspan=2>可以从行列两个方向合并</td>
<td rowspan=2 width="10%">百分比和像素可混用，服从于大的</td>
</tr>
<td align="left"> 左对齐 </td>
</tr>
</table>

效果

Markdown 中 HTML 制表

普通表头	表头斜体右对齐	表头横向合并		限制列宽为120px，超出会自动换行
左表头	底色	部分高亮	加粗斜体	限制列宽为60px无效，小于120px，服从120px
表头不是必须一整行或一整列	纵向合并字太多会换行	可以从行列两个方向合并		百分比和像素可混用，服从于大的
左对齐	纵向合并字太多会换行	可以从行列两个方向合并		百分比和像素可混用，服从于大的

2.4 对已有的 Markdown 表格转换 HTML 行合并示例

Markdown 表格示例代码

| 范围                   | IPv6 组播地址      | 含义                                     |
| :--------------------- | :----------------- | :--------------------------------------- |
| 节点（或接口）本地范围 | FF01:0:0:0:0:0:0:1 | 网段内所有主机和路由器（等效于广播地址） |
|                        | FF01:0:0:0:0:0:0:2 | 所有路由器地址                           |

效果（未合并，默认行标题突显）

范围	IPv6 组播地址	含义
节点（或接口）本地范围	FF01:0:0:0:0:0:0:1	网段内所有主机和路由器（等效于广播地址）
	FF01:0:0:0:0:0:0:2	所有路由器地址

Markdown 转 HTML（任选其一）

Markdown 转 HTML
https://lwebapp.com/zh/markdown-to-html
Markdown 转换 HTML
https://www.ivtool.com/md2html/

如果 Markdown 表格已经存在明确指定的对齐格式，也会一同转换。也可以使用其他支持转换的代码编辑器。

删除 Markdown 转 HTML 后合并单元格多出的无内容空格。

HTML `<td rowspan="2">` 合并

<table>
<thead>
<tr>
<td align="left">范围</td>
<td align="left">IPv6 组播地址</td>
<td align="left">含义</td>
</tr>
</thead>
<tbody><tr>
<td align="left" rowspan="2" nowrap="nowrap">节点（或接口）本地范围</td>
<td align="left">FF01:0:0:0:0:0:0:1</td>
<td align="left">网段内所有主机和路由器（等效于广播地址）</td>
</tr>
<tr>
<td align="left">FF01:0:0:0:0:0:0:2</td>
<td align="left">所有路由器地址</td>
</tr>
<tr>
</tbody></table>

效果

范围	IPv6 组播地址	含义
节点（或接口）本地范围	FF01:0:0:0:0:0:0:1	网段内所有主机和路由器（等效于广播地址）
节点（或接口）本地范围	FF01:0:0:0:0:0:0:2	所有路由器地址

HTML `<th rowspan="2">` 合并（行、列标题突显）

<table>
<thead>
<tr>
<th align="left">范围</th>
<th align="left">IPv6 组播地址</th>
<th align="left">含义</th>
</tr>
</thead>
<tbody><tr>
<th align="left" rowspan="2" nowrap="nowrap">节点（或接口）本地范围</th>
<td align="left">FF01:0:0:0:0:0:0:1</td>
<td align="left">网段内所有主机和路由器（等效于广播地址）</td>
</tr>
<tr>
<td align="left">FF01:0:0:0:0:0:0:2</td>
<td align="left">所有路由器地址</td>
</tr>
<tr>
</tbody></table>

效果

范围	IPv6 组播地址	含义
节点（或接口）本地范围	FF01:0:0:0:0:0:0:1	网段内所有主机和路由器（等效于广播地址）
节点（或接口）本地范围	FF01:0:0:0:0:0:0:2	所有路由器地址