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

目录
一、markdown表格
二、HTML表格
 2.1 标签属性
 2.2 跨列单元格(合并单元格)
 2.3 跨行单元格(合并单元格)
 2.4 单元格内换行
 2.5 单元格背景色
 2.6 单元格的字体(颜色、大小、字体)
 2.7 单元格的里的<、>字符
 2.8 html表格的其他属性

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表格由

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

2.1 标签属性

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

  • 标签的属性
    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 单元格内换行

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

    显示效果如下:

    红色 橙色 黄色 绿色 蓝色 靛色 紫色

    颜色对照表可以看这篇文章: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的转义字符代替,<表示<>表示>,更多转义字符相关内容可以看这篇文章:HTML转义字符对照表
    markdown代码如下:

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

    显示效果如下:

    关闭设备 #include
    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>tablefont>标签td>
    	tr>
    	<tr>
    		<td align=left>分隔每列->管道(|)td>
    		<td align=right bgcolor=#D8BFD8>标题-><font color=red>thfont>标签td>
    	tr>
    	<tr>
    		<td align=left>对齐->冒号(:)td>
    		<td align=right bgcolor=#B0C4DE>行-><font color=red>trfont>标签td>
    	tr>
    	<tr>
    		<td align =left>强调->反引号(`)td>
    		<td align=right bgcolor=#AFEEEE>列-><font color=red>tdfont>标签td>
    	tr>
    table>
    

    显示效果:

    markdown表格 html表格
    语法 标题->连字符(---) 语法 表格->table标签
    分隔每列->管道(|) 标题->th标签
    对齐->冒号(:) 行->tr标签
    强调->反引号(`) 列->td标签

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


    参考资料:
    Markdown 官方教程
    Markdown样式自定义及详解


    相关文章:
    Markdown编辑器(一) - 实现页内跳转
    Markdown编辑器(二) - 文本样式(更改字体、字体大小、字体颜色、加粗、斜体、高亮、删除线)
    Markdown编辑器(三) - 图片缩放、指定尺寸、居中、左对齐、右对齐

    在这里插入图片描述



    你可能感兴趣的:(Markdown,html,编辑器)