Markdown (CSDN) MD编辑器(四)- 漂亮表格(表格背景色、跨行、跨列、多行)

简介: Markdown (CSDN) MD编辑器(四)- 漂亮表格(表格背景色、跨行、跨列、多行)

Markdown是一种轻量级标记语言,排版语法简洁,让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档,可与HTML混编,可导出 HTML、PDF 以及本身的 .md 格式的文件。因简洁、高效、易读、易写,Markdown被大量使用,如Github、Wikipedia、简书等。


一、markdown表格

markdown 的表格语法简单,使用三个或以上的连字符(---)创建每列的标题;使用管道(|)分隔每列;创建标题时在连字符两侧使用冒号(:)表示靠哪一侧对齐;使用反引号(`)可以强调文本,直接看例子:

  • markdown格式文本
| Align `left`   | center align |   Align right |
| :------------- | :----------: | ------------: |
| `left`-aligned |   centered   | right-aligned |
| `左`对齐        |    中对齐     |         右对齐 |
  • 显示效果
Align left center align Align right
left-aligned centered right-aligned
对齐 中对齐 右对齐

二、HTML表格

markdown的表格语法简单,功能也简单,有时表格需要设置背景色、跨行、跨列,markdown支持内嵌HTML的语法,所以可以用 HTML 表格来实现这样的需求。

HTML表格由 <table> 标签来定义,

表格的表头<th>标签定义,

表格的每一行<tr> 标签定义,

每行被分割的单元格<td> 标签定义。

这几个标签都有一些自带的属性用来最终改变表格的整体风格,下面先看看这些属性,然后结合例子看看怎样制作精美的表格。

2.1 标签属性

<table>标签的属性

border属性用于设置表格的边框大小

<th>、<td>标签的属性

colspan属性表示一个格子可以跨几列

rowspan属性表示一个格子可以跨几行

bgcolor属性定义单元格的背景色,用十六进制rgb表示颜色

width 属性表示单元格的宽度,可以用百分比表示,也可以用数值表示

height属性表示单元格的高度,用数值表示

align 属性表示对齐方式,取值有left、right、center

2.2 跨列单元格(合并单元格)

下面创建一个表格,使第一行的格子跨两格,只需要在第一行的单元格加属性colspan="2"

markdown代码如下:

<table border="2" >
  <tr >
    <td colspan="2">跨两个单元格</td>
  </tr>
  <tr >
    <td>第一格</td>
    <td>第二格</td>
  </tr>
</table>

显示效果如下:

跨两个单元格
第一格 第二格

2.3 跨行单元格(合并单元格)

下面创建一个表格,使第一列的格子跨两行,只需要在第一个的单元格加属性rowspan="2"

markdown代码如下:

<table border="2" >
  <tr >
    <td rowspan="2">跨两行的单元格</td>
    <td>第一格</td>
  </tr>
  <tr >
    <td>第二格</td>
  </tr>
</table>

显示效果如下:

跨两行的单元格 第一格
第二格

2.4 单元格内换行

下面创建一个表格,在第二个单元格里写入多行文字,只需要在每一行文字后面加入<br>就可以换行了

markdown代码如下:

<table border="2" >
  <tr >
    <td>只有一行</td>
    <td>
      这是第一行<br>
      这是第二行<br>
      这是第三行<br>
    </td>
  </tr>
</table>

显示效果如下:

只有一行 这是第一行
这是第二行
这是第三行

2.5 单元格背景色

下面创建一个表格,给每个格子设置不同的背景色,只需要修改单元格的bgcolor属性,可以用系统识别的颜色,也可以使大写或小写的十六进制。

markdown代码如下:

<table border="2" >
  <tr >
    <td bgcolor="red">红色</td>
    <td bgcolor="orange">橙色</td>
    <td bgcolor=#FFFF00>黄色</td>
    <td bgcolor=#00FF00>绿色</td>
    <td bgcolor=#0000ff>蓝色</td>
    <td bgcolor=#00ffff>靛色</td>
    <td bgcolor=#ff00ff>紫色</td>
  </tr>
</table>

显示效果如下:

image.png

颜色对照表可以看这篇文章:HTML颜色码对照表-英文代码、中文描述、十六进制、rgb值

2.6 单元格的字体(颜色、大小、字体)

下面创建一个表格,使用font标签改变字体,第一个格子用4号红色楷体,第二个格子同时使用三种颜色字体,关于字体的更多内容可以看这篇文章:https://blog.csdn.net/wkd_007/article/details/124253243

markdown代码如下:

<table border="2" >
  <tr >
    <td width="50%"><font face="楷体" color=red size=4>4号红色楷体</font></td>
    <td>
      <font color=red>红</font><font color=green>绿</font><font color=blue>蓝</font>
    </td>
  </tr>
</table>

显示效果如下:

4号红色楷体 绿

2.7 单元格的里的<、>字符

下面创建一个表格,在第二个表格需要输入<、>,直接输入会有语法错误,需要使用html的转义字符代替,&lt表示<&gt表示>,更多转义字符相关内容可以看这篇文章:HTML转义字符对照表

markdown代码如下:

<table border="2" >
  <tr >
    <td >关闭设备</td>
    <td align=left>
      <font face="courier New" font color=red>#include &ltunistd.h&gt</font><br/>
      <font face="courier New" font color=blue>close(framebuf_fd);</font><br/>
    </td>
  </tr>
</table>

显示效果如下:

关闭设备 #include <unistd.h>
close(framebuf_fd);

2.8 html表格的其他属性

markdown代码如下:

<table border="2" >
  <tr>
    <th colspan="2" align="center">markdown表格</th>
    <th colspan="2" >html表格</th>
  </tr>
  <tr>
    <td width="10%" rowspan="4">语法</td>
    <td width="40%" align=left>标题->连字符(---)</td>
    <td  width="10%" rowspan="4" bgcolor=#FAEBD7>语法</td>
    <td align=right bgcolor=#FFB6C1>表格-><font color=red>table</font>标签</td>
  </tr>
  <tr>
    <td align=left>分隔每列->管道(|)</td>
    <td align=right bgcolor=#D8BFD8>标题-><font color=red>th</font>标签</td>
  </tr>
  <tr>
    <td align=left>对齐->冒号(:)</td>
    <td align=right bgcolor=#B0C4DE>行-><font color=red>tr</font>标签</td>
  </tr>
  <tr>
    <td align =left>强调->反引号(`)</td>
    <td align=right bgcolor=#AFEEEE>列-><font color=red>td</font>标签</td>
  </tr>
</table>

显示效果:

image.png

在上面markdown代码中,可以看到还使用了前面文章说过的 <font> 标签,可以使表格的字体更丰富。关于内嵌html表格有不清楚的可以结合上面的例子,复制markdown代码到markdown编辑器去看看效果,自己改一改有助于理解。

参考资料:

Markdown 官方教程

Markdown样式自定义及详解

目录
相关文章
|
2月前
|
Ubuntu Linux 测试技术
Linux系统之部署轻量级Markdown文本编辑器
【10月更文挑战第6天】Linux系统之部署轻量级Markdown文本编辑器
128 1
Linux系统之部署轻量级Markdown文本编辑器
|
23天前
|
人工智能 移动开发 前端开发
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
Markdown-to-Image 是一款开源的在线 Markdown 转海报编辑器,能够将 Markdown 文本内容转换为图像,适用于创建社交媒体帖子、海报和其他视觉内容。该工具支持多种输出格式,并允许用户自定义样式,适用于多种应用场景。
66 4
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
|
4月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
177 0
|
1月前
|
程序员
【Markdown速成】半小时入门Markdown教程(后缀.md文件详解)
作为程序员我们经常会看到README.md这种说明文件,以.md为后缀的文件就是我们所说的Markdown的文件。
164 4
|
3月前
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
4月前
|
前端开发 Python
60行Python代码开发在线markdown编辑器
60行Python代码开发在线markdown编辑器
|
4月前
|
Shell
一个能够生成 Markdown 表格的 Bash 脚本
【8月更文挑战第20天】这是一个使用Bash脚本生成Markdown表格的示例。脚本首先设置表头与内容数据,然后输出Markdown格式的表格。用户可以根据需要自定义表格内容。使用时,只需将脚本保存为文件(如 `generate_table.sh`),赋予执行权限,并运行它,即可在终端看到生成的Markdown表格。
|
4月前
Markdown使用HTML语法实现复杂表格
Markdown使用HTML语法实现复杂表格
173 1
|
4月前
|
Web App开发 Linux Windows
解决Markdown文件上传至CSDN无法显示本地图片问题-白嫖版,分享给别人的md文件图片不显示的解决方案
解决Markdown文件上传至CSDN无法显示本地图片问题-白嫖版,分享给别人的md文件图片不显示的解决方案
119 3
|
5月前
|
JavaScript
vue 加载展示md文件(markdown语法 .md后缀的文件)
vue 加载展示md文件(markdown语法 .md后缀的文件)
853 0