Markdown编辑表格实现合并单元格、单元格内容换行

冷不防 2023-01-22 05:54 36阅读 0赞

Markdown虽然没有合并单元格的语法，但是Markdown是兼容HTML的，因此，我们可以通过HTML的方式实现单元格合并。  
跨行合并使用 rowspan 属性  
跨列合并使用 colspan 属性

## HTML表格语法简介 ##

HTML标签是以一对<>包括，比如表格标签< table >。并且每个标签是成对方式出现的，结束标签前面是/,在一对标签中间是要展示的内容，标签在解释器解释时候并不做显示。  
表标签的标记是table,比如：

表格的标题标签是caption,并且作为表格的内容一定要放在表格标签对里面：

行标签< tr >，列单元格标签< td >，

效果如下：

表头标签< th >，表头字体会加粗区别，且单元格背景色略有不同：

## 合并单元格 ##

跨行合并使用 rowspan 属性  
跨列合并使用 colspan 属性

行合并在起始单元格标签中加上`rowspan = “合并单元数”`即可实现，比如合并两行：

列合并在起始单元格标签中加上\`colspan = “合并单元数”\`即可实现，比如合并两行列：

## 单元格内容换行 ##

使用HTML的`<br>`实现  
在Markdown的写法中：

|排名|姓名|
    |--|--|
    |第一名|隔壁老王|
    |第二名|隔壁小王 <br> 隔壁小小王|

<table> 
 <thead> 
  <tr> 
   <th>排名</th> 
   <th>姓名</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>第一名</td> 
   <td>隔壁老王</td> 
  </tr> 
  <tr> 
   <td>第二名</td> 
   <td>隔壁小王 <br> 隔壁小小王</td> 
  </tr> 
 </tbody> 
</table>

如果使用HTML的table：

<table>
    	<tr>
    		<th> 排名 </th>
    		<th> 姓名 </th>
     	</tr>
    	<tr>
    		<td> 第一名 </td>
    		<td> 隔壁老王 </td>
     	</tr>
     	<tr>
     		<td> 第二名 </td>
     		<td> 隔壁小王<br> 隔壁小小王 </td>
     	</tr>
     </table>

<table> 
 <tbody> 
  <tr> 
   <th> 排名 </th> 
   <th> 姓名 </th> 
  </tr> 
  <tr> 
   <td> 第一名 </td> 
   <td> 隔壁老王 </td> 
  </tr> 
  <tr> 
   <td> 第二名 </td> 
   <td> 隔壁小王<br> 隔壁小小王 </td> 
  </tr> 
 </tbody> 
</table>

两种方法实现的表格效果是基本一致的。

## 对齐方式 ##

单元格的对齐标记是align,它有三种属性内容：  
left  
right  
center  
它可以放在一行或者一个列单元格的标记中控制这一行或者这一个列单元格标记的对齐方式

注意：不设置对齐则默认与上一个相同对齐方式，两个标签中间要有空格

## 单元格背景色 ##

注意：

<td colspan="2" bgcolor=#7B68EE>  这里colspan="2"和bgcolor=#7B68EE中间必须有空格

推荐一个网站可以在Excel表格中编辑好后在线转换成html标记对的网站：[http://pressbin.com/tools/excel\_to\_html\_table/index.html][http_pressbin.com_tools_excel_to_html_table_index.html]

参考鸣谢：  
[Markdown表格-换行、合并单元格][Markdown_-]  
[csdn的Markdown编辑器中如何（跨行跨列）合并单元格表格][csdn_Markdown]  
[Markdown(六)——表格合并单元格&增加标题][Markdown]  
[Markdown表格—合并单元格—设置单元格颜色][Markdown 1]  
[Markdown快速实现复杂表格方法][Markdown 2]

[http_pressbin.com_tools_excel_to_html_table_index.html]: http://pressbin.com/tools/excel_to_html_table/index.html
[Markdown_-]: https://blog.csdn.net/qq_42711815/article/details/89257489?utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-1.control
[csdn_Markdown]: https://blog.csdn.net/li1325169021/article/details/111657881
[Markdown]: https://blog.csdn.net/qq_36749906/article/details/107633430?utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~default-13.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~default-13.control
[Markdown 1]: https://wangsp.blog.csdn.net/article/details/80954960?utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~default-12.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~default-12.control
[Markdown 2]: https://blog.csdn.net/qq_33301866/article/details/101975889?utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-12.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-12.control