首页 > 其他分享 >Markdown表格-换行、合并单元格

Markdown表格-换行、合并单元格

时间:2023-04-29 23:34:02浏览次数:60  
标签:Markdown 表格 换行 行第 单元格 第二列 第一列 隔壁

1.表格中对其、换行处理

1.1 一般我们都会这样用表格如下:

|排名|姓名|
|--|--|
|第一名|隔壁老王|
|第二名|隔壁小王、隔壁小小王|

实现效果图:

排名 姓名
第一名 隔壁老王
第二名 隔壁小王、隔壁小小王

1.2 当然这里也可以通过设置|:--|左对齐,|--:|右对齐

比如下面的左对齐:

|排名|姓名|
|:--|:--|
|第一名|隔壁老王|
|第二名|隔壁小王、隔壁小小王|

效果:

排名 姓名
第一名 隔壁老王
第二名 隔壁小王、隔壁小小王

1.3 实现表格内容换行

Markdown本身不提供单元格合并语法,但是,Markdown是兼容HTML的,因此,我们可以通过HTML的方式实现单元格合并。

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

效果:

排名 姓名
第一名 隔壁老王
第二名 隔壁小王
隔壁小小王

1.4表格结构标签

使用场景:因为表格可能很长为了更好的表示表格的语义,可以将表格分割成表格头部和表格主体两大部分:

在表格标签中,分别用:<thead></thead>标签表格的头部区域、<tbody></tbody>标签表格的庄体区域。这样可以更好的分清表格结构。

<table>
    <tr>
        <th>第1列表头</th> <th>第2列表头</th>
        <tr><td>第1行第1列单元格</td> <td>第1行第2列单元格</td>
        <tr><td>第2行第1列单元格</td> <td>第2行第2列单元格</td>
        <tr><td>第3行第1列单元格</td> <td>第3行第2列单元格</td>
    </tr>
</table>

效果图:

第1列表头 第2列表头
第1行第1列单元格 第1行第2列单元格
第2行第1列单元格 第2行第2列单元格
第3行第1列单元格 第3行第2列单元格

2.合并表格

2.1 合并表格行

这里还是要与HTML网页结合起来,来达到效果。
这里用到了HTML的一个标签,
colspan:规定单元格可纵深的列数
rowspan:规定单元格可横跨的行数

<table>
	<tr>
		<td>小王</td>
		<td>小小王</td>
	<tr>
	<tr>
		<td colspan="2">隔壁老王</td>
	<tr>
</table>

效果图:

小王 小小王
隔壁老王
<table border="1" align="center">
	<tr>
		<th align="center">Month</th>
		<th align="center">Savings</th>
	</tr>
	<tr>
		<td align="center">January</td>
		<td align="center">$100</td>
	</tr>
	<tr>
		<td align="center">February</td>
		<td align="center">$80</td>
	</tr>
</table>

效果图:

Month Savings
January $100
February $80
<table>  
	<tr>    
		<td colspan="2" style="text-align: center;">合并两列并居中</td>  
	</tr>  
	<tr>    
		<td>第一列</td>    <td>第二列</td>  
	</tr>
</table>
合并两列并居中
第一列 第二列

例子:

<table>  
    <tr>    
        <td colspan="3" style="text-align:center;">第一行</td>  
    </tr>  
    <tr>    
        <td style="width:33%; text-align:center;">第二行,第一列</td>   
        <td style="width:33%; text-align:center;">第二行,第二列</td>   
        <td style="width:33%; text-align:center;">第二行,第三列</td>  
    </tr> 
    <tr>   
        <td style="width:33%; text-align:center;">第三行,第一列</td>    
        <td style="width:33%; text-align:center;">第三行,第二列</td>    
        <td style="width:33%; text-align:center;">第三行,第三列</td>  
    </tr>  
    <tr>   
        <td style="width:33%; text-align:center;">第四行,第一列</td>   
        <td style="width:33%; text-align:center;">第四行,第二列</td>   
        <td style="width:33%; text-align:center;">第四行,第三列</td> 
    </tr> 
    <tr>    
        <td style="width:33%; text-align:center;">第五行,第一列</td>    
        <td style="width:33%; text-align:center;">第五行,第二列</td>    
        <td style="width:33%; text-align:center;">第五行,第三列</td>  
    </tr> 
</table>

效果:

第一行
第二行,第一列 第二行,第二列 第二行,第三列
第三行,第一列 第三行,第二列 第三行,第三列
第四行,第一列 第四行,第二列 第四行,第三列
第五行,第一列 第五行,第二列 第五行,第三列

参考链接:

https://blog.csdn.net/qq_42711815/article/details/89257489

https://www.jianshu.com/p/bcc39682c074

https://blog.csdn.net/weixin_42118352/article/details/125230209

标签:Markdown,表格,换行,行第,单元格,第二列,第一列,隔壁
From: https://www.cnblogs.com/codemagiciant/p/17364676.html

相关文章

  • 测试博客园的Markdown编辑器的支持语法和解析结果
    @目录欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学......
  • Markdown基本语法
    Markdown基本语法介绍Markdown是一种轻量级的标记语言,常用于编写文档和博客文章。它简单易学,具有清晰的结构和格式化效果,是非常适合写作和发布内容的工具。下面我们来介绍一些Markdown基本语法。1.标题在Markdown中,可以使用#符号表示标题,一级标题使用一个#符号,二级......
  • matlab设置坐标轴颜色以及标签换行显示、旋转显示
    set(gca,'ycolor',[000]);%颜色%设置不同字体、字型、以及换行显示,换行显示用{}包住每行字即可yr=ylabel('\it\fontname{TimesNewRoman}y_{CS}^{M4}...\rm\fontname{TimesNewRoman}\cdot{10}');%旋转跳跃set(yr,'Rotation',0,'position',[5.71100]......
  • NPOI Word 换行
    NPOI版本2.6.0需求描述:多行文本换行问题,如下图模板,其中$质量标准$,会被多行文本替换,不管是用\r\n、AddCarriageReturn、AddBreak()等各种方法,要么不好使;要么word转pdf文件后,pdf换行好用,但是word不是换行;开发就要做到表里如一,word与pdf一致,翻看官方示例后,尝试了示例中的各种换行......
  • 【软件工具使用问题】gitlab中md文件如何显示换行
    前言 解决方法:在需要换行的文本后面,多加两个空格就可以。 参考1. GitHub中README.md如何换行_newnwee的博客-CSDN博客;完......
  • css--实现一个文字少时居中,文字换行时居左的样式
    css--实现一个文字少时居中,文字换行时居左的样式 前言最近群里的小伙伴去面试,遇到这样一个问题,面试官问:"用css对一行文字进行布局,当文字不够换行的时候,这行文字要居中显示,当文字出现换行的时候,这行文字要靠左显示。",遇到这样的需求一下束手无策,后来查下资料,哦,原来这......
  • MarkDown语法
    MarkDown语法标题:#+空格:一级标题##+空格:二级标题……最多支持六级标题字体HelloWorld!两边2个*HelloWorld!两边1个*HelloWorld!两边3个*HelloWorld!两边2个~引用引用即英文>后加空格分割线三个-或三个*图片英文感叹号[图片名称]中间无空格(路径)超链接[连接......
  • element 合并单元格方法
    你的数据是需要排列好的,把所有一样的数据都排序到一起//获取需要合并的位置constgetSpanNumber=(data:User[],prop:string)=>{constlength=data.lengthif(length>0){letposition=0lettemp=data[0][prop]constresult=[1]fo......
  • 如何在博客园快速上传Markdown文件
    如何在博客园快速上传Markdown文件1、首先拥有书写MarkDown文件的工具:例如:Typora(博主推荐使用)MarkdownPadBookPad小书匠VisualStudioCode等等下载Typora的地址(自取):MarkDown软件https://www.aliyundrive.com/s/vnBazjXLdkr提取码:tx58点击链接保存,或者复制本段内......
  • IntelliJ Idea设置text file encoding UTF-8;换行符为 Unix 格式
    设置textfileencodingUTF-8Transparentnative-to-asciiconversion这个功能会将我们输入的所有字符转换成Unicode序列码保存,避免properties的乱码问题。CreateUTF-8files选择withNOBOMUTF-8BOM又叫UTF-8签名。BOM,byteordermark。UTF-8的BOM在文件头部,用来标识......