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>
显示效果如下:
颜色对照表可以看这篇文章: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 <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>
显示效果:
在上面markdown代码中,可以看到还使用了前面文章说过的 <font>
标签,可以使表格的字体更丰富。关于内嵌html表格有不清楚的可以结合上面的例子,复制markdown代码到markdown编辑器去看看效果,自己改一改有助于理解。
参考资料: